闲来无事,想了一个很low的进度条的实现
原理:
用一个空白的覆盖在一个完整的进度条上,然后在最上面画个轮廓,在有进度变化时修改覆盖层左边的位置就行
代码:
/** * 进度条控件 */ class ProView : View { //最下层的完整进度条 private var bottomPaint:Paint= Paint().apply { color = Color.BLUE style=Paint.Style.FILL } //中间遮挡的 private var centerPaint:Paint= Paint().apply { setColor(Color.WHITE) style=Paint.Style.FILL } //最上面的轮廓层 private var topPaint: Paint= Paint().apply { color = Color.BLUE style=Paint.Style.STROKE strokeWidth=lineWidth } //基础方框 private lateinit var rect:RectF //负责进度的方框即白色覆盖层的(进度变化时改变覆盖层的left的值,将底下的进度条逐渐的展现出来) private lateinit var rectCenter:RectF //外边框线条的宽度 private val lineWidth=3f constructor(context: Context?) : this(context, null) constructor(context: Context?, attrs: AttributeSet?) : this(context, attrs, 0) constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs,defStyleAttr) override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh) rect=RectF(0f+lineWidth,0f+lineWidth,width.toFloat()-lineWidth,height.toFloat()-lineWidth) rectCenter=RectF(0f,0f,width.toFloat(),height.toFloat()) } override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) //画底部的进度条 canvas?.drawRoundRect(rect,height/2f,height/2f,bottomPaint) //中间空白的覆盖层 canvas?.drawRect(rectCenter,centerPaint) //最上面的轮廓 canvas?.drawRoundRect(rect,height/2f,height/2f,topPaint) } /** * 设计进度 */ fun progress(pro:Float){ Log.e("xxj",pro.toString()) rectCenter.left=width*pro postInvalidate() } }
这个就是有个麻烦的一点,要根据使用场景的背景色设置覆盖层的颜色
