带有导航点的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