android 圆环进度view

迷南。 2021-10-19 03:01 319阅读 0赞

新建RoundProgressBar

class RoundProgressBar : View {
    
        private val paint = Paint()
    
        var max = 100      //最大进度
        var progress = 0   //当前进度   取值范围 0-max
            set(value) {
                field = value
                invalidate()//调用该方法后  onDraw会执行
            }
        var roundColor = Color.GRAY //圆环颜色
        var roundProgressColor = Color.YELLOW  //圆环进度的颜色
        var roundWidth:Float = 16f    //圆环的宽度（粗细）
    
    
        constructor(context: Context) : super(context) {
            init(null, 0)
        }
    
        constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet) {
            init(attributeSet, 0)
        }
    
        constructor(context: Context, attributeSet: AttributeSet, defStyle: Int) : super(context, attributeSet, defStyle) {
            init(attributeSet, defStyle)
        }
    
        private fun init(attributeSet: AttributeSet?, defStyle: Int) {
            val typedArray = context.obtainStyledAttributes(attributeSet, R.styleable.RoundProgressBar, defStyle, 0)
            max = typedArray.getInt(R.styleable.RoundProgressBar_max, 100)
            progress = typedArray.getInt(R.styleable.RoundProgressBar_progress, 30)
            progress = max(0,min(progress,100))
            roundColor = typedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.GRAY)
            roundProgressColor = typedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor,Color.YELLOW)
            roundWidth = typedArray.getDimension(R.styleable.RoundProgressBar_roundWidth,16f)
            typedArray.recycle()
        }
    
        override fun onDraw(canvas: Canvas?) {
            super.onDraw(canvas)
            // 获取圆心x坐标  (x=y)
            val c = (width / 2).toFloat()
            // 圆环的半径
            val radius = c - roundWidth / 2
    
            paint.color = roundColor  //设置颜色
            paint.style = Paint.Style.STROKE
            paint.strokeWidth = roundWidth //设置宽度
            paint.isAntiAlias = true   //消除锯齿
    
            canvas?.drawCircle(c,c,radius,paint)
    
            paint.color = roundProgressColor
            paint.style = Paint.Style.STROKE
            paint.strokeWidth = roundWidth
            paint.isAntiAlias = true
    
            val rectF = RectF(c - radius,c - radius,c + radius,c + radius)
            canvas?.drawArc(rectF,(-90).toFloat(),(progress * 360 / max).toFloat(),false,paint)
            //invalidate()
        }
    
    
    }

context.obtainStyledAttributes 用来获取布局文件的所有属性

canvas?.drawCircle(c,c,radius,paint) 根据画笔类型画圆环或者画圆

Paint.Style.STROKE 画圆环  Paint.Style.FILL 画圆  Paint.Style.FILL_AND_STROKE 画圆 直径包括strokeWidth宽度

canvas?.drawArc(矩形对象,起始角度,画的角度,是否包含圆心,paint) 想要包含圆心的 画笔样式不能是Paint.Style.STROKE 才有效果

在res.values下创建attrs.xml

<?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <declare-styleable name="RoundProgressBar">
            <attr name="max" format="integer" />
            <attr name="progress" format="integer" />
            <attr name="roundColor" format="color" />
            <attr name="roundProgressColor" format="color" />
            <attr name="roundWidth" format="dimension" />
        </declare-styleable>
    
    </resources>

后面就可以使用了

<com.chao.myvideo.view.RoundProgressBar
            android:layout_width="50dp"
            android:layout_height="50dp"
            app:progress="0"
            app:max="100"
            android:layout_gravity="center"/>

转载于:https://www.cnblogs.com/rchao/p/11226828.html