Android 一个很low的进度条

最新推荐文章于 2022-10-20 14:14:10 发布

沉默的小鸡

最新推荐文章于 2022-10-20 14:14:10 发布

阅读量2.6k

点赞数

分类专栏： low的自动义控件笔记文章标签： android

本文链接：https://blog.csdn.net/xxj_1234562/article/details/107128777

版权

low的自动义控件同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

笔记

2 篇文章 0 订阅

订阅专栏

闲来无事，想了一个很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()
     }
}

这个就是有个麻烦的一点，要根据使用场景的背景色设置覆盖层的颜色