打造最简单ViewPager指示器，实现小圆点效果

  实现ViewPager小圆点效果，最简单的轮播图

  为了实现这样的效果我们首先应该仔细研究一下这个接口OnPageChangeListener它里面有三个方法

   1. onPageSelected(int position): 这个方法有一个参数position，就是position代表当前被选中的页面。

   2. onPageScrolled(int position, float positionOffset, int positionOffsetPixels):这个方法会在屏幕滚动过程中不断被调用。

有三个参数，第一个position，当用手指滑动时，如果手指按在页面上不懂，position和当前页面index是一致的；如果手指向左拖动（相应页面向右翻动），这个时候position大部分时间和当前页面一致，只有翻页成功的情况下最后一次调用才会变为目标页面；如果手指向右拖动（相应页面向左翻动），原理一样。

第二个参数positionOffset是当前页面滑动比例，如果页面向右翻动，这个值不断变大，最后趋近1的情况后变为0，如果页面向左翻动，这个值不断变小，最后为0。

第三个参数positonOffsetPixels是当前页面滑动像素，变化情况和positionOffset一致。

   3. onPaheScrollStateChanged(int state): 这个方法在手指操作屏幕的时候发生变化，state有三个值分别是：0（END）、1（PRESS）、2（UP）；

当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，抬起时如果发生了滑动，这个值会变为2，然后最后变为0.总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生，这个时候只会调用这个方法两次，state的值分别是1,0。

三个方法的执行顺序为：用手指拖动翻页时，最先执行一遍onPageScrollStateChanged(1)，然后不断执行onPageScrolled，放手指的时候，直接立即执行一次onPageScrollStateChanged(2)，然后立即执行一次onPageSelected。

好了说了这么多，其实我们主要看onPageSelected(int position)这个方法即可;

按照这个方法我们想一下应该如何开始，我的想法就是在ViewPager下面放一个线性布局，根据轮播广告的条数来动态添加ImageView，根据当前选择的页面来动态的改变当前的小圆点图片。

我们首先自定义一个类来实现这个接口：

public class ViewPagerIndicator implements ViewPager.OnPageChangeListener {            @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }    @Override    public void onPageSelected(int position) {    }    @Override    public void onPageScrollStateChanged(int state) {    }}

接着我们想需要的东西，有Context，LinearLayout, ViewPager, 轮播图的size，当然我们还需要两张图片，一个选中状态，一个未被选中状态，还有装ImageView的集合。

完整代码：

public class ViewPagerIndicator implements ViewPager.OnPageChangeListener {    private Context context;    private ViewPager viewPager;    private LinearLayout dotLayout;    private int size;    private int img1 = R.mipmap.gouwuzy_16, img2 = R.mipmap.gouwuzy_17;    private int imgSize = 15;    private List<ImageView> dotViewLists = new ArrayList<>();    public ViewPagerIndicator(Context context, ViewPager viewPager, LinearLayout dotLayout, int size) {        this.context = context;        this.viewPager = viewPager;        this.dotLayout = dotLayout;        this.size = size;        for (int i = 0; i < size; 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(img1);            } else {                imageView.setBackgroundResource(img2);            }            //为LinearLayout添加ImageView            dotLayout.addView(imageView, params);            dotViewLists.add(imageView);        }    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    @Override    public void onPageSelected(int position) {        for (int i = 0; i < size; i++) {            //选中的页面改变小圆点为选中状态，反之为未选中            if ((position % size) == i) {                ((View) dotViewLists.get(i)).setBackgroundResource(img1);            } else {                ((View) dotViewLists.get(i)).setBackgroundResource(img2);            }        }    }    @Override    public void onPageScrollStateChanged(int state) {    }}

MainActivity中：

public class MainActivity extends AppCompatActivity {    private ViewPager vp;    private VPAdapter vpAdapter;    private LinearLayout ll;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        vp = (ViewPager) findViewById(R.id.vp);        vpAdapter = new VPAdapter(this);        vp.setAdapter(vpAdapter);        ll = (LinearLayout) findViewById(R.id.ll);        vp.setOnPageChangeListener(new ViewPagerIndicator(this, vp, ll, 3));    }}

效果图：

欢迎下载