ViewPager引导页实现跟随式小圆点

众所周知，很多APP都是带引导页的，也就是传说中的ViewPager实现的，当然，我们也可以看到，在引导页的下方有小圆点指示器，小圆点指示器有两种，一种是跳跃式小圆点，也是最常见的一种，另一种就是本篇博客要讲的跟随式小圆点。
原理：跟随式效果其实就是一个小红点事先覆盖在第一页的小灰点上面，当滑动引导页的时候，小红点根据滑动的距离而不断的改变平移距离。当滑动到第二页的时候，小红点也正好覆盖住了第二个小灰点。

OK！上代码！先看一下xml里的小圆点布局，我是xml实现的小圆点，当然你也可以动态添加小圆点实现效果：

<?xml version="1.0" encoding="utf-8"?>
<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=".activity.MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="60dp">
        <LinearLayout
            android:id="@+id/linearlayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/point_gray"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:src="@drawable/point_gray"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:src="@drawable/point_gray"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:src="@drawable/point_gray"/>
        </LinearLayout>
        <ImageView
            android:id="@+id/point_red"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/point_red" />
    </RelativeLayout>
</RelativeLayout>

这样，一打开引导页的时候，小红点就事先默认覆盖住了第一个小灰点。

接下来看核心代码：

/**
         * 当底部红色小圆点加载完成时测出两个小灰点的距离，便于计算后面小红点动态移动的距离
         */
        point_red.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                distance =  linearlayout.getChildAt(1).getLeft() - linearlayout.getChildAt(0).getLeft();
            }
        });

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //测出页面滚动时小红点移动的距离，并通过setLayoutParams(params)不断更新其位置
                float leftMargin = distance * (position + positionOffset);
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) point_red.getLayoutParams();
                params.leftMargin = Math.round(leftMargin);
                point_red.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

代码里有注释说明，相信你能看懂！

附上完整代码：

public class MainActivity extends Activity {
    private List<View> viewList;
    private ViewPager viewPager;
    private ImageView point_red;
    private int distance;
    private LinearLayout linearlayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        viewList.add(getLayoutInflater().inflate(R.layout.welcome_one,null));
        viewList.add(getLayoutInflater().inflate(R.layout.welcome_two,null));
        viewList.add(getLayoutInflater().inflate(R.layout.welcome_three,null));
        viewList.add(getLayoutInflater().inflate(R.layout.welcome_four,null));
        viewPager.setAdapter(new GuidePagerAdapter(viewList));

        /**
         * 当底部红色小圆点加载完成时测出两个小灰点的距离，便于计算后面小红点动态移动的距离
         */
        point_red.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                distance =  linearlayout.getChildAt(1).getLeft() - linearlayout.getChildAt(0).getLeft();
            }
        });

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //测出页面滚动时小红点移动的距离，并通过setLayoutParams(params)不断更新其位置
                float leftMargin = distance * (position + positionOffset);
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) point_red.getLayoutParams();
                params.leftMargin = Math.round(leftMargin);
                point_red.setLayoutParams(params);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initView() {
        viewList = new ArrayList<>();
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        point_red = (ImageView) findViewById(R.id.point_red);
        linearlayout = (LinearLayout) findViewById(R.id.linearlayout);
    }
}