背景
在网上看到一个效果,虽然很简单,但是做的很漂亮我很喜欢,正好在学习自定义View,于是拿来练练手。来看下效果,直接用的人家的效果图,后面给出连接,不过我做的是个简化版的,毕竟是拿来练手的。
分析View中的元素
- 背景圆
- 进度条弧线
- 进度条头部的圆
- 中间的进度文字
实现
- 画一个空心的背景圆,需要圆心坐标、半径和宽度,这个很简单;
- 绘制进度,需要计算出弧的圆心角度数、起始点、宽度(不能小于背景圆的宽度吧);
- 进度头的圆是2个,内圆和外圆,圆心位置是关键,需要用到三角函数,也很简单;
- 中间的文字绘制关键点是确定文字的起始位置;
确定需要的属性
新建res/values/attr.xml,定义如下属性
<declare-styleable name="CircleProgressView">
<attr name="background_circle_width" format="dimension" />
<attr name="background_circle_color" format="color" />
<attr name="progress_width" format="dimension" />
<attr name="progress_color" format="color" />
<attr name="progress_percent" format="integer" />
<attr name="progress_text_size" format="dimension" />
<attr name="progress_text_color" format="color" />
<attr name="progress_circle_width" format="dimension"/>
</declare-styleable>
在构造方法中获取定义的属性
private void initAttrs(Context context, AttributeSet attributeSet) {
TypedArray ta = context.obtainStyledAttributes(attributeSet, R.styleable.CircleProgressView);
mBackgroundCircleWidth = ta.getDimension(R.styleable.CircleProg