网站登不了企业建设网银wordpress注册报名
Android 自定义view 圆形进度条
- 前言
 - 一、码前分析
 - 二、开码
 - 1.画笔
 - 2.弧度
 - 3.圆弧的位置
 - 4.暴露给外部设置进度条的方法
 - 三、使用
 - 四、完整代码
 
- 总结
 
前言
先来看看效果,大概要实现这么一个圆形的进度条

一、码前分析
要实现这么一个进度条的效果,实际上是要画一个圆弧,那么我们需要蓝色的画笔,这个圆弧的弧度,以及这个圆弧应该画在什么位置
 
二、开码
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 ° ∗ 进度条现在的进度 / 进度条总进度 . 圆弧的弧度 = 360°* 进度条现在的进度/进度条总进度. 圆弧的弧度=360°∗进度条现在的进度/进度条总进度.
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,并分析了需要实现的基本要素,包括画笔、弧度和圆弧的位置。最后给出了完整的代码。
