對於大多數android開發者來說，ViewPager和ListView是再熟悉不過了，ViewPager的實現思路和ListView大同小異，具體參照前面的ListView詳解。在實現基礎的ViewPager後還加上了一個類似於Tab的效果。
下面來一一詳解：
1.在activity_main.xml中定義了ViewPager控制元件，在這之前，先匯入android的v4包。

<RelativeLayout 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"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/vp" />

</RelativeLayout>
 

2.因為在引導頁中有一個類似與Tab的效果，於是我就在drawable下定義一個小圓點，分別是正常狀態下和選中狀態下：
新建point.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <size
        android:width="16dp"
        android:height="16dp"
        />
    <solid
 
 android:color="#cc11e1"/>
</shape>

新建point_press.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<size
    android:width="8dp"
    android:height="8dp"
    />
<solid android:color="#ff0000"/>
</shape>

新建一個選擇器，point_selector.xml,這裡使用的是state_enabled來判斷選擇的狀態。

<?xml version="1.0" encoding="UTF-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/point" android:state_enabled="false"/>

<item android:drawable="@drawable/point_press" android:state_enabled="true"/>

</selector>

3.在MainActivity中獲取到控制元件，準備資料來源，設定介面卡。

package com.pbq.viewpager;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;


public class MainActivity extends Activity {

            private ViewPager viewPager;
            MyViewPager myViewPager;
            private int images[]={R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d};
            private int points[]={R.drawable.point,R.drawable.point,R.drawable.point,R.drawable.point};
            private String texts[]={"第一頁","第二頁","第三頁","第四頁"};
            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                viewPager= (ViewPager) findViewById(R.id.vp);
                //設定介面卡
                myViewPager=new MyViewPager(this,images,points,texts);
                viewPager.setAdapter(myViewPager);

                //設定中間位置
//                int item = Integer.MAX_VALUE/2 - Integer.MAX_VALUE/2%images.length;//要保證imageViews的整數倍
//                viewPager.setCurrentItem(item);

                viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                    /**
                     * 當頁面滾動了的時候回撥這個方法
                     * @param position 當前頁面的位置
                     * @param positionOffset 滑動頁面的百分比
                     * @param positionOffsetPixels 在螢幕上滑動的像數
                     */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            /**
             * 當某個頁面被選中了的時候回撥
             * @param position 被選中頁面的位置
             */
            @Override
            public void onPageSelected(int position) {
                myViewPager.setPointState(position);
            }

            /**
             * 當頁面滾動狀態變化的時候回撥這個方法
             *@param i 靜止->滑動
             *滑動-->靜止
             *靜止-->拖拽
             */
            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }
}

4.新建介面卡MyViewPager，這裡從MainActivity中會傳入一個構造器，第一個引數為上下文，第二個引數為圖片的資源陣列，第三個引數為小圓點的圖片資源陣列，第四個引數為顯示的文字資源。這是MyViewPager繼承PagerAdapter這個抽象類，實現getCount（獲取總數），isViewFromObject（比較View和Object是否為同一例項），instantiateItem（相當於getView），destroyItem（釋放資源）這4個方法，最主要的當然是instantiateItem的具體實現，要想講圖片文字和小圓點顯示在檢視上，此時我們需要一個行佈局，把他通過instantiateItem載入到檢視上。
新建item.xml

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/a"
        android:scaleType="fitXY"
        />
    <LinearLayout
        android:orientation="vertical"
        android:gravity="center"
        android:layout_alignBottom="@id/iv"
        android:layout_width="match_parent"
        android:layout_height="80dp">
        <TextView
            android:id="@+id/tv"
            android:textColor="#000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第一頁"
            />
        <LinearLayout
            android:layout_marginTop="10dp"
            android:id="@+id/ll"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

細心的朋友可以看到這裡在textView的下面怎麼有一個空的LinearLayout，這是用來顯示小圓點的，為什麼不在行佈局中顯示呢？之前我也是在這裡顯示，但發現一個小問題，當我寫了4個小圓點定義好之後，顯示確實好看，但如果我的圖片資源不止4個呢？我還要自己手動去來行佈局中進行修改，於是靈光一現，我是不是可以在程式碼中動態新增呢？看看程式碼，是不是比先前更智慧了呢？這裡設定了預設顯示第一頁選中。

linearLayout= (LinearLayout) view.findViewById(R.id.ll);
        for (int i = 0 ;i < images.length;i++) {
            //新增點
            ImageView point = new ImageView(context);
            point.setBackgroundResource(R.drawable.point_selector);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(16,16);
            if (i == 0) {
                //預設顯示第一頁選中
                point.setEnabled(true); //顯示紅色
            } else {
                point.setEnabled(false);//顯示紫色
                params.leftMargin = 16;
            }
            point.setLayoutParams(params);
            linearLayout.addView(point);
        }

這時，心想終於完成了，執行程式碼一看，為什麼滑動到第二頁之後小圓點沒有移動呢？

呵呵，原來還沒對viewpager的頁面進行監聽

 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                    /**
                     * 當頁面滾動了的時候回撥這個方法
                     * @param position 當前頁面的位置
                     * @param positionOffset 滑動頁面的百分比
                     * @param positionOffsetPixels 在螢幕上滑動的像數
                     */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            /**
             * 當某個頁面被選中了的時候回撥
             * @param position 被選中頁面的位置
             */
            @Override
            public void onPageSelected(int position) {
                myViewPager.setPointState(position);
            }

            /**
             * 當頁面滾動狀態變化的時候回撥這個方法
             *@param i 靜止->滑動
             *滑動-->靜止
             *靜止-->拖拽
             */
            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

當頁面被選中的時候通過adapter去呼叫myViewPager.setPointState(position);這個方法。來到MyViewPager中。

   /**
     * 設定點滑動的狀態
     * @param position
     */
    public void setPointState(int position) {
        //支援無限滑動
//        int realPosition = position%images.length;

        //把上一個高亮的設定預設-紫色
        linearLayout.getChildAt(prePosition).setEnabled(false);
        //當前的設定為高亮-紅色

        linearLayout.getChildAt(position).setEnabled(true);
    }

好了，看一下效果。這是在第二個頁面小圓點也移動了。