如何做移动端网站网站性能优化方法

---

前言

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

---

一、码前分析

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

---

二、开码

1.画笔

代码如下（示例）：

    private val progressPaint: Paint = Paint().apply {color = resources.getColor(R.color.ff1DB0CC)style = Paint.Style.STROKEstrokeWidth = 3fisAntiAlias = true}

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

2.弧度

代码如下（示例）：

    private var currentProgress: Float = 0fprivate var maxProgress: Float = 15000fval sweepAngle = 360f * currentProgress / maxProgress

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

3.圆弧的位置

代码如下（示例）

 		val center = width / 2fval radius = center - progressPaint.strokeWidth / 2fval sweepAngle = 360f * currentProgress / maxProgresscanvas.drawArc(center - radius, center - radius, center + radius, center + radius,-90f, sweepAngle, false, progressPaint)

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

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

代码如下（示例）

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

---

三、使用

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

      		 <com.zyf.view.CircularProgressBarandroid:id="@+id/progress"android:layout_width="113dp"android:layout_height="113dp"/>

---

四、完整代码

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.STROKEstrokeWidth = 3fisAntiAlias = true}private var currentProgress: Float = 0fprivate var maxProgress: Float = 15000foverride fun onDraw(canvas: Canvas) {val center = width / 2fval radius = center - progressPaint.strokeWidth / 2fval sweepAngle = 360f * currentProgress / maxProgresscanvas.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()}
}

---

总结

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