Android 自定义View 渐变圆弧 渐变进度条

先来瞅瞅这玩意儿长啥样

progress.gif 如果GIF图没有展示那就对付看下这个静态PNG吧..

OK效果已经展示如果这是你需要的效果 继续往下看吧 话不多说直接上代码

class UpdateProgressView(context: Context, attributeSet: AttributeSet? = null) : View(context, attributeSet) {
    //角度
    private var progress = 0f

    //圆弧画笔
    private var pan = Paint()

    //文字画笔
    private var textPan = Paint()

    //颜色渐变器
    private var sg: SweepGradient? = null

    init {
        //画笔抗锯齿
        textPan.isAntiAlias = true
        pan.isAntiAlias = true
        //圆弧两端是圆弧状
        pan.strokeCap = Paint.Cap.ROUND
        //画笔样式为线
        pan.style = Paint.Style.STROKE
        //文字居中
        textPan.textAlign = Paint.Align.CENTER
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        //圆弧的宽度 可以根据你自己的需要调整 以下所有根据width/*皆为按比例适配不同大小的尺寸可以按需调整
        pan.strokeWidth = width / 27f
        //文字大小为宽度的1/6
        textPan.textSize = width / 6f
        //旋转-90度让圆弧起点从右侧变为正上方
        canvas.rotate(-90f, width / 2f, width / 2f)
        //渐变颜色实时获取以实时改变文字颜色 传入百分比起始颜色和结束颜色
        val color = MyUtils.getCurrentColor(progress / 360f, Color.parseColor("#16B1FF"), Color.parseColor("#405CFD"))
        //设置文字颜色(渐变)
        textPan.color = color
        //设置渐变色的起始和终止颜色集合 可以设置多个
        val colors = intArrayOf(Color.parseColor("#16B1FF"), Color.parseColor("#405CFD"))
        //将渐变色赋值给颜色渲染器
        if (sg == null) {
            sg = SweepGradient(width / 2f, width / 2f, colors, null)
            pan.shader = sg
        }
        //绘制圆弧 此处像内侧偏移20px防止边框的圆弧无法完全展示 起始角度偏移6度防止圆弧部分颜色变为结束颜色
        canvas.drawArc(20f, 20f, width - 20f, width - 20f, 6f, progress, false, pan)
        //回转90度 让文字正过来(因为刚刚旋转了-90度)
        canvas.rotate(90f, width / 2f, width / 2f)
        //将角度换算为百分比
        val percent = (progress * 100 / 360f).toInt()
        //绘制文字
        canvas.drawText("${percent}%", width / 2f, width / 18f * 10f, textPan)
    }

    /**根据百分比处理圆弧*/
    fun handlerPercent(percent: Int) {
        progress = percent * 3.6f
        invalidate()
    }
}

文字渐变色获取 此处为借(chao)鉴(xi)
原文https://blog.csdn.net/qq_34947883/article/details/103295271

 object MyUtils {
    fun getCurrentColor(fraction: Float, startColor: Int, endColor: Int): Int {
        val redCurrent: Int
        val blueCurrent: Int
        val greenCurrent: Int
        val alphaCurrent: Int
        val redStart: Int = Color.red(startColor)
        val blueStart: Int = Color.blue(startColor)
        val greenStart: Int = Color.green(startColor)
        val alphaStart: Int = Color.alpha(startColor)
        val redEnd = Color.red(endColor)
        val blueEnd = Color.blue(endColor)
        val greenEnd = Color.green(endColor)
        val alphaEnd = Color.alpha(endColor)
        val redDifference = redEnd - redStart
        val blueDifference = blueEnd - blueStart
        val greenDifference = greenEnd - greenStart
        val alphaDifference = alphaEnd - alphaStart
        redCurrent = (redStart + fraction * redDifference).toInt()
        blueCurrent = (blueStart + fraction * blueDifference).toInt()
        greenCurrent =  (greenStart + fraction * greenDifference).toInt()
        alphaCurrent =  (alphaStart + fraction * alphaDifference).toInt()
        return Color.argb(alphaCurrent, redCurrent, greenCurrent, blueCurrent)
    }
}

好的 就是这么简单的实现了 那去吧你