当前位置：首页 > news >正文

Android自定义一个带背景的圆环形进度条（Kotlin）

news 来源：原创 2024/9/20 13:35:22

前言

在Android开发过程中，难免遇到一些复杂的UI组件需要我们自定义

当然使用系统原生组件拼凑也能完成，但是UI复杂度增加了不说，在更新UI状态的时候还不好管理，最重要的是复用的价值不大，上述的操作很容易引增加码冗余度和阅读难度，为此自定义UI成了一个非常不错的选择。

实现一个带进度条的播放按钮，类似于QQ音乐底部控住组件中的播放按钮。

1.ProgressBar组件

ProgressBar是Android开发中用于显示进度的一个UI组件。它通常用于向用户展示某个操作的进度情况，比如文件下载、数据加载等场景。ProgressBar可以以不同的形式展现，常见的有圆形进度条和水平进度条。

主要属性

max：进度条的最大值，默认为100。
progress：当前进度值。
progressDrawable：自定义进度条的Drawable。
indeterminate：是否设置为不确定模式，不确定模式的进度条会不断循环动画，而不会停止在一个特定的进度。
indeterminateDrawable：自定义不确定模式进度条的Drawable。
secondaryProgress：次要进度值，可以用于显示中间进度，比如缓冲进度。

使用场景

下载文件时显示下载进度。
加载数据时显示加载进度。
视频播放时显示缓冲进度。

<ProgressBar  android:id="@+id/progressBar"  style="?android:attr/progressBarStyleHorizontal"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:max="100"  android:progress="50" />

2.自定义组件

继承View，在onDraw中使用Canvas绘制

背景

使用drawBitmap绘制背景

canvas.drawBitmap(it, null, rectF, null)

圆环

drawCircle绘制圆，其中Paint的style设置为STROKE可以绘制环形

strokeWidth就是圆环的半径

private val backgroundPaint = Paint()backgroundPaint.apply {color = backgroundColorstrokeWidth = 10fstyle = Paint.Style.STROKEisAntiAlias = false
}canvas.drawCircle(w, h, r, backgroundPaint)

进度条

drawArc实现环形进度条的绘制

rectF是整个环形的内切正方形坐标，这个正方形坐标需要和背景所在的圆环对上，否则可能出现进度条和背景对不上的问题

private val progressPaint = Paint()progressPaint.apply {color = progressColorstrokeWidth = 10fstyle = Paint.Style.STROKEisAntiAlias = false
}canvas.drawArc(rectF, 270f, progress.toFloat() / max.toFloat() * 360f, false, progressPaint)

完整代码

class CircleBar : View {private val backgroundPaint = Paint()private val progressPaint = Paint()private var max = 100private var progress = 0private var backgroundColor: Int = Color.WHITEprivate var progressColor: Int = Color.BLACKprivate var backgroundBitmap: Bitmap? = nullprivate val rectF = RectF()private val offset = 5fconstructor(context: Context) : super(context)constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet) {init(context, attributeSet)}constructor(context: Context, attributeSet: AttributeSet, defStyleAttr: Int) : super(context,attributeSet,defStyleAttr) {init(context, attributeSet)}private fun init(context: Context, attributeSet: AttributeSet) {val typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.CircleBar)max = typedArray.getInteger(R.styleable.CircleBar_max, 100)progress = typedArray.getInteger(R.styleable.CircleBar_progress, 0)backgroundColor = typedArray.getColor(R.styleable.CircleBar_backgroundColor, Color.WHITE)progressColor = typedArray.getColor(R.styleable.CircleBar_progressColor, Color.BLACK)val background = typedArray.getDrawable(R.styleable.CircleBar_background)if (background != null) {backgroundBitmap = (background as BitmapDrawable).bitmap}typedArray.recycle()backgroundPaint.apply {color = backgroundColorstrokeWidth = 10fstyle = Paint.Style.STROKEisAntiAlias = false}progressPaint.apply {color = progressColorstrokeWidth = 10fstyle = Paint.Style.STROKEisAntiAlias = false}}override fun onDraw(canvas: Canvas) {super.onDraw(canvas)val w = width / 2fval h = height / 2fval r = w - offsetrectF.set(offset, h - r, w + r, h + r)backgroundBitmap?.let { canvas.drawBitmap(it, null, rectF, null) }canvas.drawCircle(w, h, r, backgroundPaint)canvas.drawArc(rectF, 270f, progress.toFloat() / max.toFloat() * 360f, false, progressPaint)}fun setMax(max: Int) {this.max = maxinvalidate()}fun setProgress(progress: Int) {this.progress = progressinvalidate()}fun getMax(): Int {return max}}

组件主题样式

<declare-styleable name="CircleBar"><attr name="max" format="integer" /><attr name="progress" format="integer" /><attr name="backgroundColor" format="color" /><attr name="progressColor" format="color" /><attr name="background" format="reference" />
</declare-styleable>