android 之indicatorView的实现分析

• indicator的实现

使用一个软件常注意到刚使用软件时会有一个导览页，通过滑动页面来显示不同的图，底部有用于指示在哪一页的圆点，这就是我们将要实现的indicator(指示器)，接来我们介绍在android 中如何实现p>

indicator的实现

首先，我们需要了解indicator的组成，一般来说，它是由几个圆点组成，翻到对应页时，圆点颜色改变，有些indicator圆点还有字母或者数字，如图：

接下来，我们需要知道如何绘出这些圆和圆内的数字。要确定一个圆，需要知道圆的半径和圆心位置x,y,半径是由我们自行配置的，所以我们需要确定每个圆圆心的位置，而y是固定的，所以我们需要知道每个圆x的值，如图，我们可以观察到它的规律如下：第一个圆的x 就等于圆的半径，从第二个圆开始，当前圆的圆心x 坐标为 上一个圆的x 坐标 + (radius * 2 + mSpace)。 其中mSpace 是圆之间的间距。

那么，接下来我们绘制这些圆，生成一个继承View的CircleIndicatorView，在这个View中定义相关的属性，如半径，圆点颜色等，我们需要定义一个indicator类，用来存放圆点数据：

接下来，计算每个圆的圆点圆心的位置，第一个圆心的x坐标为半径加上边界值，y的值取View的高度除二，取中间位置，上面已经介绍了它的计算规律，我们只需按规律算出相应的值保存在mIndicators（存放圆心的一个List）中：

有了圆心的数据，我们就可以绘制圆了,我们需要定义画圆心和字符的Paint类（mCirclePaint、mTextPaint），Paint可以用于画几何图形，文本和bitmap，setStyle用于设置样式，样式有三种：
Paint.Style.FILL：填充内部
Paint.Style.FILL_AND_STROKE ：填充内部和描边
Paint.Style.STROKE ：描边
Paint还有其他属性：
setAntiAlias(boolean a) //设置抗锯齿，如果不设置，加载位图的时候可能会出现锯齿状的边界，如果设置，边界就会变的稍微有点模糊，锯齿就看不到了。
setDither(boolean dither) //设置是否抖动，如果不设置感觉就会有一些僵硬的线条，如果设置图像就会看的更柔和一些

如果圆内有字母数字我们还需要再进行绘制，首先需要判断FillMode的值是什么，若为字母或数字则可进一步绘制，用Canvas来绘制文本需要给文本定位，我们借助Rect来获得文本的宽、高，Paint.getTextBounds用于获取文本的宽高，然后我们计算文本的开始位置，使文本居中：

还有一个细节，我们在点击相应的小圆点时会跳转到相应页面，我们来实现它：

我们需要与ViewPaper配合使用，所有还需要一个与ViewPaper关联的方法，并在其中设置ViewPaper监听该View：

基本的已实现，那么我们来应用它，在xml文件中，我们可以在这里设置很多属性，这些属性对应着attr.xml中的内容：

在activity中与ViewPaper关联：

实验效果：

在build.gradle(app)中dependencies添加:

sync一下即可直接使用

参考文章：
indicator的实现
一起看画布Android Canvas
Android文本测量