1、先看效果如下：

2、然後實現這個效果大體說明：

1）滑動的頁面，用ViewPager來實現
2）小圓點用LinerLayout裡面新增圖片來實現
3）三個滑動頁面和小圓點都是圖片
4）當滑動到當前頁面的時候，小圓點顯示紅色，其他圓點顯示藍色
5）ViewPager滑動頁面的實現我之前部落格已經寫過了，這次只要是直接把佈局的背景設定成圖片就可以了。

3、然後講一下小圓點
我當前只有一個主佈局檔案，其他三個佈局檔案都是用來適配ViewPager的。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 
 xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.gucheng.viwerpagerdemo.MainActivity"
 
>

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

    <LinearLayout
        android:id="@+id/dot"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
 

        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:layout_marginBottom="15dp">

    </LinearLayout>

</RelativeLayout>

4、佈局檔案設定好之後，現在在Java類裡面進行實現:
首先，宣告一個ImageView物件陣列的用來存放小圓點，陣列的大小取決於當前ViewPager的大小。
我把小圓點設定函式單獨封裝成了一個類，只需要傳入當前ImageView[],存放小圓點的LinerLayout佈局物件，以及當前上下文就可以完成靜態小圓點的設定（就是說目前為止，滑動頁面小圓點的狀態並沒有改變）。

下面是我封裝的類：

//圓點設定函式
public class SetDot {
    public  SetDot(ImageView[] imageView, LinearLayout dot, Context context){
        for (int i=0; i < imageView.length;i++){
            ImageView imageViewLocal = new ImageView(context);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);

            //控制元件，繫結到這個LinerLayout裡面
            imageViewLocal.setLayoutParams(layoutParams);
            //給空陣列賦值
            imageView[i] = imageViewLocal;
            //預設初始介面為紅色圓點
            if (i == 0){
                imageView[i].setImageResource(R.mipmap.dot_red);
            } else {
                imageView[i].setImageResource(R.mipmap.dot_blue);
            }
            dot.addView(imageViewLocal);
        }
    }
}

5、設定好小圓點之後，現在要做的是實現小圓點狀態和ViewPager同步變化，我也把這個函式封裝成了一個單獨的類：
只需要在例項化的時候傳入ViewPager物件, ImageView[]物件

package com.example.gucheng.viwerpagerdemo;

import android.support.v4.view.ViewPager;
import android.widget.ImageView;

/**
 * Created by gucheng on 2017/7/4.
 */

public class SetDotChangeWithViewPager {
    //建構函式
    public SetDotChangeWithViewPager(){}

    //給ViewPager設定監聽事件，當頁面滑動的時候，小圓點的狀態也跟著改變
    public void dotChangeWithViewPager(ViewPager viewPager, final ImageView[] imageView){
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener(){

            //頁面正在滑動的時候會呼叫
            @Override
            public void onPageScrolled(int position,float positionOffset,int positionOffsetPixels){
            }

            //頁面改變以後會呼叫
            @Override
            public void onPageSelected(int position){
                for (int i=0;i < imageView.length;i++){
                    if (i == position){//當前頁面小圓點設定為紅色
                        imageView[i].setImageResource(R.mipmap.dot_red);
                    }else {
                        imageView[i].setImageResource(R.mipmap.dot_blue);
                    }
                }
            }

            //頁面狀態改變時被呼叫
            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }
}

關於ViewPager的實現就不寫了，主要是小圓點的程式碼，在MainActivity類裡面：
先宣告兩個變數如下

private ImageView[] imageView;
private LinearLayout dot;//小圓點的佈局檔案

然後

//小圓點設定
        dot = (LinearLayout)findViewById(R.id.dot);
        //imageView陣列的大小取決於佈局檔案的大小,就是viewList的大小
        imageView = new ImageView[viewList.size()];
        new SetDot(imageView,dot,MainActivity.this);

其中SetDot是我封裝的第一個函式，寫在開始了。然後

//給viewPager設定監聽事件,讓小圓點跟著頁面變化而滑動
        SetDotChangeWithViewPager setDotChangeWithViewPager = new SetDotChangeWithViewPager();
        setDotChangeWithViewPager.dotChangeWithViewPager(viewPager,imageView);

ok，這樣的話就可以實現開頭gif演示的效果了。