自定义CircleProgressView

最新推荐文章于 2024-08-20 09:21:58 发布

置顶

一棵大白杨

最新推荐文章于 2024-08-20 09:21:58 发布

阅读量813

点赞数

分类专栏：自定义View 文章标签： Android 自定义View 进度条 CircleProgressView 自定义控件

本文链接：https://blog.csdn.net/danceinkeyboard/article/details/82844740

版权

背景

在网上看到一个效果，虽然很简单，但是做的很漂亮我很喜欢，正好在学习自定义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