![](https://i-blog.csdnimg.cn/blog_migrate/5a42a4afc795fa414b95c832011510a5.webp?x-image-process=image/format,png)
Indicator (指示器) 可能大家都见的比较多了,在一个APP中,有很多场景都会用到Indicator,比如第一次安装APP 时的引导页,首页上面的广告Banner ,又或者是Tab下面的Indicator。Indicator 一般配合ViewPager 使用,它能很直观的反应出ViewPager 中一共有多少页,当前选中的是哪一页,用户能够很容易的看出是否还可以滑动,用户体验较好。那么本篇文章就讲一下如何通过自定义View来实现一个漂亮简洁的IndicatorView。
Indicator的展示形式
我们使用Indicator时,常见的有三种形式,第一种是根据ViewPager 的总页数展示一排小圆点,选中和未选中分别标为不同的颜色。这也是普遍的使用Indicator的效果,效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/d0e949be3cfb62c6a950807048c57d29.webp?x-image-process=image/format,png)
第二种形式是根据ViewPager 的总页数展示一排圆点,并且用数字标出其顺序(1,2,3,4 ...),大概效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/37762f19a8cd0f77ed0d80a27dbbd771.webp?x-image-process=image/format,png)
第三种形式和第二种形式差不多,同样根据ViewPager总页数展示一片圆点,但是用字母标出顺序(A,B,C,D ....), 比如 :魅族手机屏幕的切换的Indicator。效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/65d68186012198904cf990cfcbbf43ea.webp?x-image-process=image/format,png)
本篇文章就通过自定义View来实现这三种IndicatorView。
通过自定义View 实现多功能的CircleIndicatorView
首先整理一下思路,CircleIndicatorView ,它是由一组圆 组成的,只不过圆有多种状态,选中、未选中、显示字母、显示数字等等。看着有这么多中状态,感觉挺复杂,但是其实不复杂,只是用不同的变量来控制不同的状态即可。其他的先不考虑,我们只要先把这一排圆画出来,剩下的就比较容易了。要确定一个圆的,需要知道圆的半径和圆心,半径是我们可以配置的,那么,其实核心就是计算这一排的圆点的圆心位置。圆心 y 的位置是固定的(View 高的一般),因此我们只需要计算每个圆的圆心x的位置,看下图,其实很容易就能找到规律,规律如下: 第一个圆的x 就等于圆的半径,从第二个圆开始,当前圆的圆心x 坐标为 上一个圆的x 坐标 + (radius * 2 + mSpace)。 其中mSpace 是圆之间的间距。
![](https://i-blog.csdnimg.cn/blog_migrate/c904c0930efb8e64cfd415061b5484db.webp?x-image-process=image/format,png)
有了上面的规律,我们只需要一个循环就能找出所有圆的圆心位置。代码如下:
/**
* 测量每个圆点的位置
*/
private void measureIndicator(){
mIndicators.clear();
float cx = 0;
for(int i=0;i<mCount;i++){
Indicator indicator = new Indicator();
if( i==