四.自定义View之ViewPager指示器

最近一个项目中有这样一个需求，就是一个ViewPager，下面带有几个指示器的小圆点，这样的需求很容易实现，网上也有很多的开源框架都可以满足这个需求，但是最近已经不太想用开源框架了，比较简单的功能都自己写代码实现。今天就来记录一下ViewPager指示器的实现。

效果图：

就是这样一个需求，布局分析如下：

三个小圆点是根据填充ViewPager集合的size动态添加到线性布局中的。

小圆点使用ImageView画出来，背景使用shape文件来定义

未选中时的白色：

选中时的黄色：

定义好了小圆点，需要给小圆点设置宽高，Margin等参数，此时就需要设置小圆点的布局参数。从第二个小圆点开始设置左侧Margin值

for(int i =0;i

ImageView imageView = new ImageView(mActivity);

imageView.setBackgroundResource(R.drawable.home_point_white);

//布局参数，父控件是什么布局就创建什么布局的布局参数

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(

LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

if(i>0){

params.leftMargin = 20;//从第二个小圆点开始设置左侧边距

}

imageView.setLayoutParams(params);

ll_home_point.addView(imageView);}

小黄点是跟着ViewPager走的，给ViewPager添加一个页面切换的监听setOnPageChangeListener，其中方法onPageScrolled是在ViewPager滑动过程中调用的，其中的参数positionOffset是指滑动的百分比。

那么我们计算滑动距离是，用两个圆点之间的间距*滑动百分比，就可以时时得到滑动的距离。那么两个圆点之间的间距怎么求呢

如上图所示，两个圆点之间的距离就是两个圆点左侧的距离，用第二个圆点getLeft - 第一个圆点getLeft就可以得到。

但这样写是无法获取到两者间距的，如果在Activity中，控件的绘制是在onCreate()方法之后，那么此时控件还未绘制，当然拿不到getLeft的值，我们需要对ImageView设置一个监听，onLayout方法执行完成之后再获取点之间的间距。

代码如下：

//计算两个圆点之间的距离

iv_home_point_yellow.getViewTreeObserver().addOnGlobalLayoutListener(

new ViewTreeObserver.OnGlobalLayoutListener() {

@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)

@Override

public void onGlobalLayout() {

iv_home_point_yellow.getViewTreeObserver().removeOnGlobalLayoutListener(this);

//ll_home_point.getChildAt(1)，获取线性布局中的第二个小圆点

//ll_home_point.getChildAt(0)，获取线性布局中的第一个小圆点

int pointDis = ll_home_point.getChildAt(1).getLeft() - ll_home_point.getChildAt(0).getLeft();

Log.i("圆点间距", "showButtomDialog: "+pointDis);

}});

得到了两个点之间的间距，得到了滑动百分比，那么现在就得到了小黄点随ViewPager滑动的时时距离。

那么现在就开始修改小黄点的布局参数，更新其左侧边距即可。但是这里要注意的是，当滑动到新的页面是，滑动距离百分比会变为0，因此需要加上一段距离，这段距离可以用position*pointsDis，两个圆点之间的距离*页面位置position。第一个页面的position为0

代码如下：

home_bottom_vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

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

//更新小黄点的移动的距离

float leftMargin = positionOffset * pointDis + position * pointDis;

Log.i("小黄点移动的距离", "onPageScrolled: "+leftMargin +"-------"+positionOffset);

RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams)iv_home_point_yellow.getLayoutParams(); layoutParams.leftMargin =(int) leftMargin;

iv_home_point_yellow.setLayoutParams(layoutParams);

}

@Override

public void onPageSelected(int position) { }

@Override

public void onPageScrollStateChanged(int state) { }});