ViewPager添加指示器，仿引导页效果

我们的应用几乎都有启动引导页介绍，通常是3~4张引导图，然后进入我们的主界面。大家可以发现，我们大部分引导界面都会有一种指示器（也就是小圆点，这里比较常见）。除了引导页以外呢，我们常见的广告页也经常会有这种指示器效果。

我们来看一下效果图：

实现这种效果的方式有多种多样，虽然说很简单，但是我们可以写成一个通用的指示器类，在需要用到的地方实例化就可以了。这样就会减少代码的重复。

实现思路是这样的，我们知道ViewPager有一个addOnPageChangeListener接口，这个接口可以对ViewPager的页面改变进行监听。那么，这样我们就可以通过这个接口监听Page的Position，Page的Position位置无非就是对当前页的指示器（小圆点）的状态进行改变来迎合ViewPager，从而达到我们想要的效果。

我们看下代码：

public class PageIndicator implements ViewPager.OnPageChangeListener {
    private int mPageCount;//页数
    private List<ImageView> mImgList;//保存img总个数
    private int img_select;
    private int img_unSelect;

    public PageIndicator(Context context, LinearLayout linearLayout, int pageCount) {
        this.mPageCount = pageCount;

        mImgList = new ArrayList<>();
        img_select = R.drawable.dot_select;
        img_unSelect = R.drawable.dot_unselect;
        final int imgSize = 25;

        for (int i = 0; i < mPageCount; i++) {
            ImageView imageView = new ImageView(context);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            //为小圆点左右添加间距
            params.leftMargin = 10;
            params.rightMargin = 10;
            //给小圆点一个默认大小
            params.height = imgSize;
            params.width = imgSize;
            if (i == 0) {
                imageView.setBackgroundResource(img_select);
            } else {
                imageView.setBackgroundResource(img_unSelect);
            }
            //为LinearLayout添加ImageView
            linearLayout.addView(imageView, params);
            mImgList.add(imageView);
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override
    public void onPageSelected(int position) {
        for (int i = 0; i < mPageCount; i++) {
            //选中的页面改变小圆点为选中状态，反之为未选中
            if ((position % mPageCount) == i) {
                (mImgList.get(i)).setBackgroundResource(img_select);
            } else {
                (mImgList.get(i)).setBackgroundResource(img_unSelect);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {}
}

我们分析一下上部分代码：这个类实现了OnPageChangeListener这个接口，这接口里的方法我们就不一一讲了，主要我们是在onPageSelected()这个方法内进行对小圆点的状态进行改变的。我们实例化了一个LinerLayout容器用作存放小圆点，因为我们首次进入页面，ViewPager默认postition是为0，在此我们得设置一个初始小圆点的状态，也就是指向第一页。我们在onPageSelected()方法中，改变当前页面的小圆点状态。

下面放出我们ViewPager的布局：

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

        <LinearLayout
            android:orientation="horizontal"
            android:id="@+id/dot_horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="32dp"
            android:gravity="center" />
    </FrameLayout>

这里说明一下，小圆点可以选择任意的图片资源，而我是写了一个drawable文件，样式比较简单，也放出代码吧：

//选中
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />
    <corners android:radius="1000dp" />
</shape>
//未选中
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#323232" />
    <corners android:radius="1000dp" />
</shape>

接着我们这样引用到我们的ViewPager上：

mViewPager.addOnPageChangeListener(new PageIndicator(getContext(), dotHorizontal, 3));

适配器之类的代码我就不贴出来了，比较简单。这样便实现了如上图的指示器效果了。

ViewPager添加指示器，仿引导页效果

猜你喜欢