打造最简单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，放手指的时候，直接立即执行一次onPageScr
4000
ollStateChanged(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));
}
}

效果图：



欢迎下载