通过点击按钮实现ViewPager的切换

这里我们实现的是通过点击按钮来切换ViewPager，就是在ViewPager的底端我们定义一个

LinearLayout布局，在其中放置4个ImageView控件，我们可以通过点击不同的控件来切换ViewPager并改变

ImageView的状态。所以这里我们需要用到选择器。

首先在res文件夹下新建一个drawable文件夹，并在其中新建一个Selector类型的dot.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!--
              定义选中和未选中时的图片 
    icon01是灰色，可以接受触摸或点击事件
    icon02是白色，不可以接受触摸或点击事件
    -->
    <item android:drawable="@drawable/icon01" android:state_enabled="true"></item>
    <item android:drawable="@drawable/icon02" android:state_enabled="false"></item>
    <!--
	控件状态：
	android:state_selected:选中或未选中
	android:state_focused:获得焦点或未获得焦点
	android:state_enabled:能否接受触摸或者点击事件
    -->

</selector>

然后是在activity_main.xml布局文件中引用我们定义的dot.xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="10dp"
        android:layout_weight="5" >
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_centerHorizontal="true"
        android:layout_weight="1"
        android:background="@android:color/holo_orange_light"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:src="@drawable/dot" />
    </LinearLayout>

</LinearLayout>

MainActivity的具体实现：

package com.example.text_03;

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.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity {

	private int[] images = new int[] { R.drawable.bd_logo1, R.drawable.them01,
			R.drawable.them02, R.drawable.them03 };
	// 存放图片资源的集合
	private List<ImageView> data;
	private ViewPager viewPager;
	// 存储小圆点的集合
	private ImageView[] icons;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		// 调用初始化ImageView的方法
		initData();
		// 初始化小圆点的方法
		initDot();
		MyAdapter adapter = new MyAdapter();
		viewPager.setAdapter(adapter);
		// 给ViewPager添加页面切换事件
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			// 页面选中调用该方法
			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				for (int i = 0; i < images.length; i++) {
					icons[i].setEnabled(true);
				}
				icons[arg0].setEnabled(false);
			}

			// 页面滚动调用该方法
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub

			}

			// 页面滚动过程中的状态
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});
	}

	// 初始化ImageView
	private void initData() {
		data = new ArrayList<ImageView>();
		for (int i = 0; i < images.length; i++) {
			ImageView iv = new ImageView(this);
			iv.setImageResource(images[i]);
			data.add(iv);
		}
	}

	// 初始化指示性图标
	private void initDot() {
		// 首先获得父控件，线性布局
		LinearLayout layout = (LinearLayout) findViewById(R.id.layout);
		// 创建存储小圆点的数组变量
		icons = new ImageView[images.length];
		// 循环获得小圆点并初始化图片
		for (int i = 0; i < icons.length; i++) {
			// 通过索引获得线性布局中的每一个子控件，就是ImageView
			icons[i] = (ImageView) layout.getChildAt(i);
			// 设置状态为true,与dot.xml中的选择器相关联，并使用对应的图片加载到ImageView中
			icons[i].setEnabled(true);
			// 每个ImageView保存当前的索引值，0123
			icons[i].setTag(i);

			// 设置ImageView的点击事件
			icons[i].setOnClickListener(new View.OnClickListener() {

				@Override
				public void onClick(View v) {
					// 设置ViewPager当前显示的页面,获得与icons[i]相同索引item(pager页面)
					viewPager.setCurrentItem((Integer) v.getTag());

				}
			});
		}
		// 设置第一个为默认选中
		icons[0].setEnabled(false);

	}

	class MyAdapter extends PagerAdapter {

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return data.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0 == arg1;
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			// TODO Auto-generated method stub
			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));
		}

	}

}

运行结果：

另外是两种图片资源：第二个是白色的