1. 程式人生 > >ViewPager(一):帶指示圖示的滑動頁面的實現

ViewPager(一):帶指示圖示的滑動頁面的實現

ViewPager是可滑動的控制元件,在v4包中,在UI中使用該控制元件必須用全類名android.support.v4.view.ViewPager

下面實現帶小圓點圖示的圖片頁面滑動的效果,先來效果圖吧:

   <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    <LinearLayout 
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="350dp"
        android:orientation="horizontal">
        <ImageView 
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="20dp"
            android:src="@drawable/dot"/>
        <ImageView 
            android:layout_width="25dp"
            android:layout_height="25dp"
             android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:src="@drawable/dot"/>
         <ImageView 
            android:layout_width="25dp"
            android:layout_height="25dp"
             android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:src="@drawable/dot"/>
         <ImageView 
            android:layout_width="25dp"
            android:layout_height="25dp"
             android:layout_marginLeft="20dp"
            android:layout_marginRight="30dp"
            android:src="@drawable/dot"/>
    </LinearLayout>

以上是activity_main.xml的程式碼,四個ImageView就是那四個小圓點

在res中的drawable-hdpi中新建一個xml檔案

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 定義選中和未選中時的圖片 -->
    <item android:state_enabled="true" android:drawable="@drawable/icon01"></item>
    <item android:state_enabled="false" android:drawable="@drawable/icon02"></item>

</selector>
	<!-- 控制元件狀態:
	android:state_selected  選中/未選中
	android:state_focused   獲得焦點/未獲得焦點
	android:state_enabled   可用/不可用-->

MainActivity.java程式碼:

package com.example.viewpager_demo01;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
	private ViewPager viewPager;
	private List<ImageView> data;  //儲存ViewPager每一頁顯示的ImageView
	
	private ImageView[] icons;  // 儲存小圓點的集合
	private int[] imgs={R.drawable.ic_01,R.drawable.ic_02,R.drawable.ic_03,R.drawable.ic_04};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		viewPager=(ViewPager)findViewById(R.id.viewpager);
		data=new ArrayList<ImageView>();
		for (int i = 0; i < imgs.length; i++) {
			//建立ImageView物件
			ImageView iView=new ImageView(this);
			//使用圖片的資源,給ImageView新增圖片
			iView.setImageResource(imgs[i]);
			//ImageView儲存到list集合
			data.add(iView);
		}
		MyPagerAdapter adapter=new MyPagerAdapter();
		viewPager.setAdapter(adapter);
		
		//初始化小圓點
		initDot();
		
		//新增頁面切換(滾動)的事件
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			//頁面選中呼叫該方法
			@Override
			public void onPageSelected(int position) {
				// TODO Auto-generated method stub
				for (int i = 0; i < icons.length; i++) {
					icons[i].setEnabled(true);
					
				}
				icons[position].setEnabled(false);
			}
			//頁面滾動呼叫該方法
			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {
				// TODO Auto-generated method stub
				
			}
			//頁面滾動過程中的狀態
			@Override
			public void onPageScrollStateChanged(int state) {
				// TODO Auto-generated method stub
				
			}
		});
	}
	//初始化指示性圖示
	private void initDot() {
		//獲得父控制元件->線性佈局
		LinearLayout layout = (LinearLayout)findViewById(R.id.layout);
		//建立儲存小圓點的陣列物件
		icons=new ImageView[imgs.length];
		//迴圈獲得小圓點,並初始化圖片
		for (int i = 0; i < icons.length; i++) {
			//從線性佈局中獲得每一個子控制元件
			icons[i]=(ImageView) layout.getChildAt(i);
			//設定狀態為true,與dot.xml中的選擇器相關聯,並使用對應的圖片載入到ImageView中
			icons[i].setEnabled(true);
			//每個ImageView儲存當前的索引值,0、1、2、3
			icons[i].setTag(i);
			
			//設定小圓點的單擊事件
			icons[i].setOnClickListener(new OnClickListener() {
				
				@Override
				public void onClick(View v) {
					// 設定ViewPager當前顯示的頁面,獲得與icon[i]相同索引的item(pager頁面)
					viewPager.setCurrentItem((Integer)v.getTag());
					
				}
			});
		}
		//設定第一個為預設選中
		icons[0].setEnabled(false);
	}

	//建立自定義介面卡
	class MyPagerAdapter extends PagerAdapter{

		//載入到介面卡中的pager的個數(有幾頁)
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return data.size();
		}

		//判斷當前的View物件與instantiateItem方法的返回值是否一致
		//(arg1就是instantiateItem的返回值)
		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0==arg1;
		}
		
		//建立一個新的Pager頁面
		//引數一:container  容器,指ViewPager
		//引數二:position   位置,當前頁的索引
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			// 從ImageView的集合中取出一個元素新增到ViewPager中
			container.addView(data.get(position));
			//返回每一個頁面新增的內容
			return data.get(position);
		}
		
		//移除滑出螢幕的頁面
	@Override
	public void destroyItem(ViewGroup container, int position, Object object) {
		// TODO Auto-generated method stub
		container.removeView(data.get(position));
	}
		
	}


}