Android 以圆形进度条为例讲怎么实现自定义View

最新推荐文章于 2025-06-14 15:11:15 发布

原创

最新推荐文章于 2025-06-14 15:11:15 发布 · 1k 阅读

标签

#android

本文介绍了如何在Android中自定义Drawable实现圆形进度条，包括单个Drawable的创建与动画，以及如何使用MultiCircleProgressView控制多进度环形进度条。作者通过实例演示了Drawable的构造和onDraw方法的使用。

关键词：自定义View，圆形进度条，新手教学向

开篇想先问下，Android 这个行业还有新人进来学习吗∠( ᐛ 」∠)＿

以图为例，看到下图你第一个想到的实现方案是什么？

环形多进度条

是不是想写三个 ProgressBar？

然后产品经理说，这个地方需要有两点需要注意

进度在 >100% 和 <100% 的时候效果不同
根据用户角色不同，这地方有时候存在展示2～4个进度环的可能

这时候还考虑叠 ProgressBar 吗？

仔细分析一下，这个控件其实并不复杂，会画弧线，会画圈就行。

        // 圆环
        canvas.drawCircle(...)
        // 画弧线
        canvas.drawArc(...)

那么，再把这个控件再拆分一下，由Drawable绘制圆形进度条，View负责控制Drawable数量和颜色，这样就OK了。

设计完成，开始实现

进度条Drawable

可以直接看 draw 方法


/**
 * 构造方法传入背景颜色、进度条颜色、背景环宽度、进度条宽度
 */
class CircleProgressDrawable(
    val bgColor: Int = Color.parseColor("#1F000000"),
    val pColor: Int = Color.RED,
    val bgWidth: Float = 8F,
    val pWidth: Float = 8F
) : Drawable() {

    /**
     * 默认值和常用值，最好用常量保存
     * 就算没有用常量保存，默认值也最好写在变量初始化位置
     */
    companion object {
        /**
         * 默认圆环阴影绘制长度，占整体圆环的百分比
         */
        private const val DEFAULT_SHADOW_DRAW_PERCENT = 0.08F

        /**
         * 阴影默认启示渐变色
         */
        private const val DEFAULT_SHADOW_START_COLOR: String = "#70000000"
    }

    /**
     * 当前进度
     */
    var progress: Int = 0

    /**
     * 总进度
     */
    var total: Int = 0

    /**
     * 阴影绘制角度
     */
    @FloatRange(from = 0.0, to = 1.0)
    var shadowPercent: Float = DEFAULT_SHADOW_DRAW_PERCENT

    private var width = 0
    private var height = 0
    private var centerX = 0
    private var centerY = 0

    /**
     * 圆环半径
     */
    private var radius = 0F

    /**
     * 绘制角度
     */
    private var drawPercent = 0F
        set(value) {
            field = value
            // 重新设置绘制角度时，阴影渐变色也要更改
            mShadowShader = SweepGradient(
                0F,
                0F,
                intArrayOf(Color.parseColor(DEFAULT_SHADOW_START_COLOR), Color.TRANSPARENT),
                floatArrayOf(
                    0F,
                    shadowPercent
                )

最低0.47元/天解锁文章