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

最新推荐文章于 2023-12-15 10:13:41 发布

神户西瓜

最新推荐文章于 2023-12-15 10:13:41 发布

阅读量495

点赞数

分类专栏： Android 文章标签： canvas animation android kotlin

本文链接：https://blog.csdn.net/woai6116110/article/details/117248880

版权

Android 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先来瞅瞅这玩意儿长啥样

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()
    }
}

文字渐变色获取
原文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)
    }
}