Android自定义View之 实现一个多功能的IndicatorView

CircleIndicatorView.png

Indicator (指示器) 可能大家都见的比较多了，在一个APP中，有很多场景都会用到Indicator，比如第一次安装APP 时的引导页，首页上面的广告Banner ，又或者是Tab下面的Indicator。Indicator 一般配合ViewPager 使用，它能很直观的反应出ViewPager 中一共有多少页，当前选中的是哪一页，用户能够很容易的看出是否还可以滑动，用户体验较好。那么本篇文章就讲一下如何通过自定义View来实现一个漂亮简洁的IndicatorView。

Indicator的展示形式

我们使用Indicator时,常见的有三种形式，第一种是根据ViewPager 的总页数展示一排小圆点，选中和未选中分别标为不同的颜色。这也是普遍的使用Indicator的效果，效果如下：

image.png

第二种形式是根据ViewPager 的总页数展示一排圆点，并且用数字标出其顺序（1，2，3，4 ...），大概效果如下：

image.png

第三种形式和第二种形式差不多，同样根据ViewPager总页数展示一片圆点，但是用字母标出顺序(A,B,C,D ....), 比如 ：魅族手机屏幕的切换的Indicator。效果如下：

image.png

本篇文章就通过自定义View来实现这三种IndicatorView。

通过自定义View 实现多功能的CircleIndicatorView

首先整理一下思路，CircleIndicatorView ,它是由一组圆 组成的，只不过圆有多种状态，选中、未选中、显示字母、显示数字等等。看着有这么多中状态，感觉挺复杂，但是其实不复杂，只是用不同的变量来控制不同的状态即可。其他的先不考虑，我们只要先把这一排圆画出来，剩下的就比较容易了。要确定一个圆的，需要知道圆的半径和圆心，半径是我们可以配置的,那么，其实核心就是计算这一排的圆点的圆心位置。圆心 y 的位置是固定的（View 高的一般），因此我们只需要计算每个圆的圆心x的位置，看下图，其实很容易就能找到规律，规律如下： 第一个圆的x 就等于圆的半径，从第二个圆开始，当前圆的圆心x 坐标为 上一个圆的x 坐标 + (radius * 2 + mSpace)。 其中mSpace 是圆之间的间距。

圆心x坐标计算公式.png

有了上面的规律，我们只需要一个循环就能找出所有圆的圆心位置。代码如下：

/**
     * 测量每个圆点的位置
     */
    private void measureIndicator(){
        mIndicators.clear();
        float cx = 0;
        for(int i=0;i<mCount;i++){
            Indicator indicator = new Indicator();
            if( i==