Android 自定义view 圆形进度条

---

前言

先来看看效果，大概要实现这么一个圆形的进度条

---

一、码前分析

要实现这么一个进度条的效果，实际上是要画一个圆弧，那么我们需要蓝色的画笔，这个圆弧的弧度，以及这个圆弧应该画在什么位置

---

二、开码

1.画笔

代码如下（示例）：

    private val progressPaint: Paint = Paint().apply {
        color = resources.getColor(R.color.ff1DB0CC)
        style = Paint.Style.STROKE
        strokeWidth = 3f
        isAntiAlias = true
    }
1
2
3
4
5
6

上面的示例创建了一个画笔progressPaint，它的颜色是ff1DB0CC，填充方式是描边，画笔宽度为3f；值得一提的是isAntiAlias ，设置为true时表示打开抗锯齿，使我们的圆弧更为圆滑。

2.弧度

代码如下（示例）：

    private var currentProgress: Float = 0f
    private var maxProgress: Float = 15000f
    
val sweepAngle = 360f * currentProgress / maxProgress
1
2
3
4

上面的代码示例计算了圆弧的弧度
$$圆弧的弧度=360°\ast 进度条现在的进度/进度条总进度.$$

3.圆弧的位置

代码如下（示例）

 		val center = width / 2f
        val radius = center - progressPaint.strokeWidth / 2f
        val sweepAngle = 360f * currentProgress / maxProgress
        canvas.drawArc(center - radius, center - radius, center + radius, center + radius,-90f, sweepAngle, false, progressPaint)
1
2
3
4

上面的代码示例计算了圆弧绘制的位置，并通过drawArc方法将圆弧绘制出来。

4.暴露给外部设置进度条的方法

代码如下（示例）

    fun setProgress(progress: Int) {
        currentProgress = progress.toFloat()
        invalidate()
    }

    fun setMaxProgress(max: Int) {
        maxProgress = max.toFloat()
    }
1
2
3
4
5
6
7
8

---

三、使用

直接在xml中使用即可，通过暴露方法自己设置进度

      		 <com.zyf.view.CircularProgressBar
                    android:id="@+id/progress"
                    android:layout_width="113dp"
                    android:layout_height="113dp"
                   />
1
2
3
4
5

---

四、完整代码

class CircularProgressBar @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val progressPaint: Paint = Paint().apply {
        color = resources.getColor(R.color.ff1DB0CC)
        style = Paint.Style.STROKE
        strokeWidth = 3f
        isAntiAlias = true
    }

    private var currentProgress: Float = 0f
    private var maxProgress: Float = 15000f

    override fun onDraw(canvas: Canvas) {
        val center = width / 2f
        val radius = center - progressPaint.strokeWidth / 2f



        val sweepAngle = 360f * currentProgress / maxProgress
        canvas.drawArc(center - radius, center - radius, center + radius, center + radius,
            -90f, sweepAngle, false, progressPaint)


    }

    fun setProgress(progress: Int) {
        currentProgress = progress.toFloat()
        invalidate()
    }

    fun setMaxProgress(max: Int) {
        maxProgress = max.toFloat()
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

---

总结

本文介绍了如何实现一个圆形进度条的自定义 View，并分析了需要实现的基本要素，包括画笔、弧度和圆弧的位置。最后给出了完整的代码。