自定义圆环进度条

最新推荐文章于 2020-11-27 10:39:49 发布
最新推荐文章于 2020-11-27 10:39:49 发布
阅读量365 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DengDongQi/article/details/106101412
版权

 

import android.animation.ValueAnimator
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View
import android.view.animation.LinearInterpolator
import com.android.smartbath.R

/**
 * <pre>
 * Renovation by DengDongQi on 2020/5/12
 * 自定义圆环
 * </pre>
 */
class CalibrationCircleView : View {
    //初始化标记
    private var init = false
    //是否使用渐变
    var useGradient = false
        set(value) {
            field = value
            init()
        }

    // 默认的起始渐变色
    var defStartColor = Color.RED
    // 默认的中间渐变色
    var defCenterColor = Color.YELLOW
    // 默认的结束渐变色
    var defendColor = Color.BLUE

    //环形颜色
    var ringColor = Color.GREEN
        set(value) {
            field = value
            init()
        }
    //环形背景色
    var ringBgColor = Color.TRANSPARENT
        set(value) {
            field = value
            init()
        }
    //起始颜色
    var startColor = Color.TRANSPARENT
        set(value) {
            field = value
            if (init && value!=Color.TRANSPARENT) {
                useGradient = true
            }
        }
    //中间颜色
    private var centerColor = Color.TRANSPARENT
        set(value) {
            field = value
            if (init && value!=Color.TRANSPARENT) {
                useGradient = true
            }
        }
    //结束颜色
    private var endColor = Color.TRANSPARENT
        set(value) {
            field = value
            if (init && value!=Color.TRANSPARENT) {
                useGradient = true
            }
        }
    //线宽
    var roundWidth = 8
        set(value) {
            field = value
            init()
        }

    //线帽样式
    var strokeCap = Paint.Cap.BUTT
        set(value) {
            field = value
            init()
        }
    //描边样式
    var strokeJoin = Paint.Join.MITER
        set(value) {
            field = value
            init()
        }
    //起始背景角度
    var startBgAngle = -90f
        set(value) {
            field = value
            postInvalidate()
        }
    //结束背景角度
    var endBgAngle = startBgAngle + 360f
        set(value) {
            field = value
            postInvalidate()
        }
    //起始角度
    var startAngle = -90f
        set(value) {
            field = value
            postInvalidate()
        }
    //结束角度
    var endAngle = startAngle + 360f
        set(value) {
            field = value
            postInvalidate()
        }
    //活动角度(绘制缓存)
    private var sweepAngle = 0f
    //更新动画时长
    var duration = 250L
        set(value) {
            field = value
            va.duration = value
            postInvalidate()
        }
    //起始进度(最小进度)
    var startProgress = 0f
        set(value) {
            field = value
            tempProgress = startProgress
            progress = progress
        }
    //结束进度(最大进度)
    var endProgress = 100f
        set(value) {
            field = value
            tempProgress = startProgress
            progress = progress
        }
    //目标进度
    var progress = 50f
        set(value) {
            //合法性检查
            field = when {
                value in startProgress..endProgress -> value

                value > Math.max(startProgress, endProgress) -> Math.max(startProgress, endProgress)

                else -> Math.min(startProgress, endProgress)
            }
            va.setFloatValues(tempProgress, progress)
            va.start()
        }
    //刻度宽度
    var scaleWidth = 0
        set(value) {
            field = value
            postInvalidate()
        }
    //开始结束进度块宽度
    var startEndProgressBlockWidth = 0
        set(value) {
            field = value
            postInvalidate()
        }
    //进度块宽度
    var progressBlockWidth = 0
        set(value) {
            field = value
            postInvalidate()
        }
    //插值器
    private val va = ValueAnimator()
    //画笔
    private val bgPaint = Paint()
    private val forePaint = Paint()
    private val scalePaint = Paint()
    //绘制实时进度
    private var tempProgress = progress
    //绘制矩形
    private val rectF = RectF()

    constructor(ctx: Context) : super(ctx)

    constructor(ctx: Context, attrs: AttributeSet?) : this(ctx, attrs, 0)

    constructor(ctx: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(ctx, attrs, defStyleAttr) {
        //属性配置
        val ta = context.obtainStyledAttributes(attrs, R.styleable.RingProgressView)
        ringColor = ta.getColor(R.styleable.RingProgressView_f_ringColor, ringColor)
        ringBgColor = ta.getColor(R.styleable.RingProgressView_f_ringBgColor, ringBgColor)
        startColor = ta.getColor(R.styleable.RingProgressView_f_startColor, startColor)
        centerColor = ta.getColor(R.styleable.RingProgressView_f_centerColor, centerColor)
        endColor = ta.getColor(R.styleable.RingProgressView_f_endColor, endColor)
        //渐变色设置检查
        if (startColor != Color.TRANSPARENT || centerColor != Color.TRANSPARENT || endColor != Color.TRANSPARENT) {
            useGradient = true
        }
        useGradient = ta.getBoolean(R.styleable.RingProgressView_f_useGradient, useGradient)
        startAngle = ta.getFloat(R.styleable.RingProgressView_f_startAngle, startAngle)
        endAngle = ta.getFloat(R.styleable.RingProgressView_f_endAngle, endAngle)
        startBgAngle = ta.getFloat(R.styleable.RingProgressView_f_startBgAngle, startBgAngle)
        endBgAngle = ta.getFloat(R.styleable.RingProgressView_f_endBgAngle, endBgAngle)
        roundWidth = ta.getDimensionPixelSize(R.styleable.RingProgressView_f_roundWidth, roundWidth)
        strokeCap = when (ta.getInteger(R.styleable.RingProgressView_f_strokeCap, 0)) {
            0 -> Paint.Cap.BUTT
            1 -> Paint.Cap.ROUND
            else -> Paint.Cap.SQUARE
        }
        strokeJoin = when (ta.getInteger(R.styleable.RingProgressView_f_strokeJoin, 0)) {
            0 -> Paint.Join.MITER
            1 -> Paint.Join.ROUND
            else -> Paint.Join.BEVEL
        }
        duration = ta.getInt(R.styleable.RingProgressView_f_duration, duration.toInt()).toLong()
        startProgress = ta.getFloat(R.styleable.RingProgressView_f_startProgress, startProgress)
        endProgress = ta.getFloat(R.styleable.RingProgressView_f_endProgress, endProgress)
        progress = ta.getFloat(R.styleable.RingProgressView_f_progress, progress)
        scaleWidth = ta.getDimensionPixelSize(R.styleable.RingProgressView_f_scaleWidth,scaleWidth)
        startEndProgressBlockWidth = ta.getDimensionPixelSize(R.styleable.RingProgressView_f_s_e_ProgressBlock,startEndProgressBlockWidth)
        progressBlockWidth = ta.getDimensionPixelSize(R.styleable.RingProgressView_f_progressBlock,progressBlockWidth)
        tempProgress = progress
        ta.recycle()
    }

    init {
        va.interpolator = LinearInterpolator()
        va.setFloatValues(startProgress, progress)
        va.duration = duration
        va.addUpdateListener {
            tempProgress = it.animatedValue as Float
            postInvalidate()
        }
        va.start()
    }

    override fun onDraw(canvas: Canvas) {
        //画背景环形
        canvas.drawArc(rectF, startBgAngle, endBgAngle - startBgAngle, false, bgPaint)
        //计算前景环形角度
        sweepAngle = tempProgress / (endProgress - startProgress) * (endAngle - startAngle)
        //画前景环形
        canvas.drawArc(rectF, startAngle, sweepAngle, false, forePaint)

        if(scaleWidth > 0f) {
            //绘制刻度
            // 顺时针时:startAngle < endAngle才有效
            // startEndProgressBlockWidth:开始结束进度块宽度
            // progressBlockWidth : 进度块宽度
            var start = startAngle + startEndProgressBlockWidth
            val p = ((Math.abs(endAngle - startAngle) - 2 * startEndProgressBlockWidth) / (scaleWidth + progressBlockWidth)).toInt()
            for (i in 1..(p + 1)) {
                canvas.drawArc(rectF, start, scaleWidth.toFloat(), false, scalePaint) // 绘制间隔快
                start += scaleWidth + progressBlockWidth
            }
        }
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        if (!init) {
            init = true
        }
        init()
    }

    /**
     * 初始化参数
     */
    private fun init() {
        // 禁止硬件加速，硬件加速会有一些问题，这里禁用掉
        setLayerType(LAYER_TYPE_SOFTWARE, null)
        //设置画笔参数
        //背景画笔属性
        bgPaint.strokeWidth = roundWidth.toFloat()
        bgPaint.strokeCap = strokeCap
        bgPaint.strokeJoin = Paint.Join.ROUND
        bgPaint.style = Paint.Style.STROKE
        bgPaint.isAntiAlias = true
        bgPaint.color = ringBgColor
        //前景画笔属性
        forePaint.strokeWidth = roundWidth.toFloat()
        forePaint.strokeCap = strokeCap
        forePaint.strokeJoin = Paint.Join.ROUND
        forePaint.style = Paint.Style.STROKE
        forePaint.isAntiAlias = true
        //刻度画笔属性
        scalePaint.strokeWidth = roundWidth.toFloat()+2f  //去白边
        scalePaint.alpha = 0
        scalePaint.setXfermode(PorterDuffXfermode(PorterDuff.Mode.DST_IN)) //透明了背景 改法：先把path绘制到一个bitmap上，然后在onDraw中把那个bitmap绘制出来。
        scalePaint.isAntiAlias = true
        scalePaint.strokeCap = strokeCap
        scalePaint.isDither = true
        scalePaint.strokeJoin = Paint.Join.ROUND
        scalePaint.style = Paint.Style.STROKE
//        scalePaint.color = Color.BLACK

        //着色器颜色筛选
        val filter = intArrayOf(startColor, centerColor, endColor).filter { it != Color.TRANSPARENT }
        var colorArray: IntArray = when {
            filter.isEmpty() -> intArrayOf(startColor, centerColor, endColor)
            filter.size > 1 -> filter.toIntArray()
            else -> {
                intArrayOf(filter.first(), filter.first())
            }
        }

        //着色器/颜色设置
        if (useGradient) {
            //如果没有渐变色(都是透明 = 0)
            var isNotHaveGraditent = false
            colorArray.forEach continuing@{
                if (it != 0) {
                    isNotHaveGraditent = false
                    return@continuing
                }
                isNotHaveGraditent = true
            }
            //赋值默认进度条渐变颜色
            if(isNotHaveGraditent){
                colorArray = intArrayOf(defStartColor,defCenterColor,defendColor)
            }
            forePaint.shader =
                    LinearGradient(
                            0f,
                            0f,
                            width.toFloat(),
                            height.toFloat(),
                            colorArray,
                            null,
//                            floatArrayOf(0f,0.45f,0.9f),
                            Shader.TileMode.CLAMP
                    )

        } else {
            forePaint.shader = null
            forePaint.color = ringColor
        }

        //矩形
        rectF.set(
                0f + roundWidth / 2,
                0f + roundWidth / 2,
                width.toFloat() - roundWidth / 2,
                height.toFloat() - roundWidth / 2
        )
        if (init) {
            postInvalidate()
        }
    }
}

自定义属性 

<declare-styleable name="RingProgressView">
        <!--前景环形是否使用渐变-->
        <attr format="boolean" name="f_useGradient"/>
        <!--前景环形默认渐变起始颜色-->
        <attr format="color" name="f_def_startColor"/>
        <!--前景环形默认渐变结束颜色-->
        <attr format="color" name="f_def_endColor"/>
        <!--前景环形渐变起始颜色-->
        <attr format="color" name="f_startColor"/>
        <!--前景环形渐变中间颜色-->
        <attr format="color" name="f_centerColor"/>
        <!--前景环形渐变结束颜色-->
        <attr format="color" name="f_endColor"/>
        <!--前景环形颜色-->
        <attr format="color" name="f_ringColor"/>
        <!--背景环形颜色-->
        <attr format="color" name="f_ringBgColor"/>
        <!--前景环形起始角度-->
        <attr format="float" name="f_startAngle"/>
        <!--前景环形结束角度-->
        <attr format="float" name="f_endAngle"/>
        <!--背景环形起始角度-->
        <attr format="float" name="f_startBgAngle"/>
        <!--背景环形结束角度-->
        <attr format="float" name="f_endBgAngle"/>
        <!--环形线宽-->
        <attr format="dimension" name="f_roundWidth"/>
        <!--进度变化动画时长-->
        <attr format="integer" name="f_duration"/>
        <!--前景环形开始进度-->
        <attr format="float" name="f_startProgress"/>
        <!--前景环形结束进度-->
        <attr format="float" name="f_endProgress"/>
        <!--前景环形目标进度(你想设置的)-->
        <attr format="float" name="f_progress"/>
        <!--刻度宽度-->
        <attr format="dimension" name="f_scaleWidth"/>
        <!--开始结束进度块宽度-->
        <attr format="dimension" name="f_s_e_ProgressBlock"/>
        <!--进度块宽度-->
        <attr format="dimension" name="f_progressBlock"/>
        <!--环形线帽样式Paint.Cap-->
        <attr format="enum" name="f_strokeCap">
            <!--默认没有-->
            <enum name="butt" value="0"/>
            <!--圆角-->
            <enum name="round" value="1"/>
            <!--直角-->
            <enum name="square" value="2"/>
        </attr>
        <!--环形描边样式,详见Paint.Join-->
        <attr format="enum" name="f_strokeJoin">
            <enum name="miter" value="0"/>
            <enum name="round" value="1"/>
            <enum name="bevel" value="2"/>
        </attr>
    </declare-styleable>

 使用:

 <com.android.smartbath.view.CalibrationCircleView
        android:id="@+id/ring2"
        android:layout_width="140px"
        android:layout_height="140px"
        android:layout_centerInParent="true"

        app:f_strokeCap="butt"

        app:f_ringBgColor="#E6999999"

        app:f_useGradient="true"
        app:f_startColor="#017fd6"
        app:f_endColor="#ab36bb"

        app:f_roundWidth="28px"

        app:f_progress="160"
        app:f_endProgress="180"

        app:f_startAngle="-225"
        app:f_startBgAngle="-225"

        app:f_endAngle="45"
        app:f_endBgAngle="45"

        app:f_scaleWidth="4px"
        app:f_s_e_ProgressBlock="4px"
        app:f_progressBlock="4px"
        />

 

DengDongQi
关注
专栏目录
android自定义环形进度条（类似仪表盘）
01-05
android自定义环形进度条（类似仪表盘）
自定义圆环形进度条实现
最新发布
白小飞的博客
12-02 587
自定义圆环进度条
自定义圆形进度条
weixin_44666694的博客
08-03 278
/** Created by CirclePercentBar Time: 2020/8/3 Tunction:圆形进度条 */ public class CirclePercentBar extends View { private Context mContext; private int mArcColor; private int mArcWidth; private int mCenterTextColor; private int mCenterTextSize; private i
Android-一个简单的Android自定义圆环进度条~
08-12
自定义圆环进度条的核心是继承自View或ProgressBar类，并重写onDraw()方法。在这个方法里，我们将使用Canvas进行绘制。首先，我们需要在布局XML文件中定义我们的自定义视图，并在代码中初始化它： ```xml android...
Android自定义View实现圆环进度条
01-03
本文实例为大家分享了Android自定义View实现圆环进度条的具体代码，供大家参考，具体内容如下 效果展示 动画效果 View实现 1.底层圆环是灰色背景 2.上层圆环是红色背景 3.使用动画画一条弧线 View /** * 圆环...
Android自定义带动画圆环进度条
01-22
要创建这样的自定义圆环进度条，我们需要进行以下步骤： 1. **定义XML布局**：在res/layout目录下创建一个新的XML布局文件，声明自定义视图。我们可以定义基本的属性，如圆环的宽度、颜色、初始角度、进度等。 ```...
WPF实现的圆形进度条
03-16
在Windows Presentation Foundation (WPF) 中，开发人员可以利用丰富的图形功能来创建各种自定义UI元素，其中之一就是圆形进度条。圆形进度条通常用于展示一个任务的进度，它以直观的方式呈现百分比完成状态，与传统...
自定义环形进度条 显示百分比
11-26
自定义环形进度条 显示百分比
Android高手进阶之自定义View，自定义属性（带进度的圆形进度条）源码
08-25
自定义android进度条，带有进度指示，项目详情：http://blog.csdn.net/xiaanming/article/details/10298163
自定义Qt圆形进度条
01-14
自定义Qt圆形进度条。 非常漂亮。
自定义圆形进度条（带圆点）
12-12
自定义圆形进度条，可进行自主设置属性和颜色等；
iOS自定义方格进度条
09-15
实现多种自定义进度条，有方格、圆角方格、圆形、以及反方向进度条。
自定义实现圆环进度条
weixin_33736048的博客
12-03 497
一.效果图二.实现原理 1.先绘制背景圆环和代表进度的圆环。 2.绘制两端的小圆 3.使用SweepGradient为圆环添加渐变色 4.绘制阴影 5.绘制中间文字三.实现的具体过程 1.自定义View的基本过程，自定义属性和获取自定义属性 <declare-styleable name="ProgressBarView"> <attr nam...
自定义环形进度条
forrey的专栏
07-31 829
在学习之前如果对view常用的绘制方法不熟悉可以参考http://blog.csdn.net/harvic880925/article/details/38926877 这篇博客。那么闲言少叙我们先看一下效果        环形进度条分四部分,第一部分绿色背景,第二部分青色圆环,第三部分白色进度外环,第四部分进度百分比。            package com.qc.wintr
自定义环形进度条RoundProgressBar
weixin_34268310的博客
02-13 236
一.效果图： Canvas画圆环说明： 圆环宽度不必在意，只是画笔宽度设置后达到的效果. 二.实现步骤 1.自定义View-RoundProgressBar 2.设置属性resources(declear_styleable) 1 <?xml version="1.0" encoding="utf-8"?> 2 <resources>...
自定义View——圆环进度条RingProgressBar
APPLYB的博客
11-27 810
话不多说先上效果图 非常简单的一个圆环进度条 主要有以下主要功能 1.支持中间文字的显示隐藏，修改样式 2.支持自定义进度条背景的颜色宽度以及进度条的颜色宽度 3.支持开启关闭动画效果 4.支持自定义动画的插值器，动画时长 接下来我们就来一步步说下是如何实现这个小功能的： 分析：想要自定义view首先要了结自定义view的一些步骤和一些关键方法的含义 1.首先我们新建一个类 让这个类继承自View ，然后会提示我们要重写他的构造方法，这个时候我们选择实现它的三个构造函数并稍微改造一...
Android自定义View：圆环进度条与数字百分比实现
通过以上步骤，我们就实现了一个完整的自定义圆环进度条View，它可以实时显示进度并伴随动画效果。这个自定义组件可以方便地集成到任何Android应用中，为用户提供直观的进度反馈。同时，由于源代码的开放性，开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值