帶有導航點的ViewPager

我想這個很多人都做過了，可是我想記下怎麼做好，跟簡書的各位分享一下我的方法。
這是上一年的項目，在首頁上部設計了一個帶導航點還會滾動的ViewPager，首先：

show me the photos!

（第二三張圖下面是三個點的，第一張圖比較清晰

然後我採取了一個framelayout的佈局，先寫承載大圖的ViewPager，再在大圖底部佔個linearlayout，填充自己的導航點。下面是其xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.anno.exe.goodsviewpagerwithpoint.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="350dp">

        <android.support.v4.view.ViewPager
            android:id="@+id/vp_goods"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="0dp" />

        <LinearLayout
            android:id="@+id/layout_dot"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_gravity="bottom"
            android:layout_marginBottom="10dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

        </LinearLayout>
    </FrameLayout>
</LinearLayout>

MainActivity裏面這樣寫

public class MainActivity extends AppCompatActivity {

    // 頭部viewpager
    private ViewPager vp_goods_introduc;
    private ArrayList<View> pageViews;
    // 包裹小圓點的LinearLayout,圖片組和單一的圖片
    private ViewGroup group;
    private ImageView[] imageViews;
    private ImageView imageView;
    private int[] productPhotos = new int[]{R.mipmap.d264848,
            R.mipmap.d1199722982,
            R.mipmap.x222358899};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById();
        initGoodsViewPager();
    }

    private void findViewById() {
        vp_goods_introduc = (ViewPager) findViewById(R.id.vp_goods_introduc);
        group = (ViewGroup) findViewById(R.id.layout_dot);
    }


    private void initGoodsViewPager() {

        // 圖片
        pageViews = new ArrayList<View>();
        for (int i = 0; i < productPhotos.length; i++) {
            LinearLayout layout = new LinearLayout(this);
            ViewGroup.LayoutParams ltp = new ViewGroup.LayoutParams(
                    ViewPager.LayoutParams.MATCH_PARENT,
                    ViewPager.LayoutParams.MATCH_PARENT);//每張圖的大小
            // 每張圖片展示的方式
            final ImageView imageView = new ImageView(this);
            // 適應整個viewpager，不留白
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
      imageView.setBackgroundDrawable(getResources().getDrawable(productPhotos[i]));
            layout.addView(imageView, ltp);
            pageViews.add(layout);
        }

        /**
         * 有幾張圖片下面就顯示幾個小圓點
         */
        imageViews = new ImageView[pageViews.size()];
        LinearLayout.LayoutParams margin = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);//每個圓點大小
        // 設置每個小圓點距離左邊的間距
        margin.setMargins(15, 0, 0, 0);

        for (int i = 0; i < pageViews.size(); i++) {

            imageView = new ImageView(MainActivity.this);

            // 設置每個小圓點的寬高
            imageView.setLayoutParams(new LinearLayout.LayoutParams(5, 5));
            imageViews[i] = imageView;

            if (i == 0) {

                // 默認選中第一張圖片
                imageViews[i]
                        .setBackgroundResource(R.drawable.goods_indicator_focused);
            } else {
                // 其他圖片都設置未選中狀態
                imageViews[i]
                        .setBackgroundResource(R.drawable.goods_indicator_unfocused);
            }
            group.addView(imageViews[i], margin);
        }
        // 給viewpager設置適配器
        vp_goods_introduc.setAdapter(new GoodsViewAdapter(pageViews));
        // 給viewpager設置監聽事件
        vp_goods_introduc
                .setOnPageChangeListener(new GuidePageChangeListener());
    }


    /* 頭部viewpager的頁面轉換監聽 */
    private class GuidePageChangeListener implements
            ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {
            // TODO Auto-generated method stub
        }
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            // TODO Auto-generated method stub
        }

        @Override
        public void onPageSelected(int arg0) {
            // 遍歷數組讓當前選中圖片下的小圓點設置顏色
            for (int i = 0; i < imageViews.length; i++) {      imageViews[arg0].setBackgroundResource(R.drawable.goods_indicator_focused);
                if (arg0 != i) {
                    imageViews[i].setBackgroundResource(R.drawable.goods_indicator_unfocused);
                }
            }
        }
    }
}

下載demo goodsviewpagerwithpoint