這裡我們實現的是通過點選按鈕來切換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>
 

<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>
 

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

	}

}
 

另外是兩種圖片資源：第二個是白色的