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));
	}
		
	}


}