一、简介。

    继续Android自定义控件之旅。这次要实现的一个组合的圆，即两部分扇形加起来就是一个圆。效果如下：

Paste_Image.png
Paste_Image.png

所谓的动态是指在开始的时候它可以不断地显示它的内容，先显示一部分到全部显示完，圆的显示添加了动画的效果，而不是一个静态的圆形。

二、思路和主要的代码。

1、计算蓝色扇形和绿色扇形的角度。

根据传进来的数值计算所占的比例，然后确定它们的角度，这部分比较简单就跳过。

2、根据扇形的角度来画文本。

我就分别取它们的一半角度的来计算里面文本的位置。

Paste_Image.png
Paste_Image.png
Paste_Image.png

这部分是画已使用流量的文本的代码。根据它角度的大小来确定(x,y)坐标，比较繁琐。

Paste_Image.png

圆心为坐标系的原点。上面要画的就是“已使用流量、250.0M”这部分。用同样的方法画其余的文本。

3、设置画圆形的属性动画。开始值是0，结束值是360，在onAnimationUpdate回调方法里可以获取到当前的值，然后重新绘制。

Paste_Image.png

4、把扇形画出来。当当前的角度达到扇形的角度的时候就改变画笔的颜色，这样两部分扇形就画出来了。

Paste_Image.png
Paste_Image.png

5、封装并对外提供接口。

1、提供一个builder

Paste_Image.png

2、提供设置控件属性的方法。

Paste_Image.png

3、用动画来显示控件。

Paste_Image.png

4、外部的调用。传的参数就是这个控件类。

Paste_Image.png

三、总结。

（1）我觉得这个控件的难点在于如何让扇形动起来，其实就是不断地画当前的角度的扇形，当它达到当前扇形的角度时就变换画笔的颜色，然后继续画另外一个扇形。
（2）让小的扇形突出。我是通过在要画绿色部分的扇形时候，根据它所占的角度计算它的圆心坐标，然后把之前的圆心坐标移动一下，这样当绿色扇形部分角度比蓝色部分角度小的时候，因为它的圆心比之前的要远了一点，而半径又一样，那么 绿色部分就突出了。