圆形进度条的模仿3-DrawArc,DrawCircle,DrawText，自定义属性实例讲解

• 2020 年 10 月 20 日
• 筆記

前面两篇中已经讲过如何使用drawARC，等，画其他的图形的方法的使用也是一样的，只是参数不同，

同时也讲了如何通过xml进行自定义属性，接下来这篇便是通过实例讲解如何实地应用起来，

效果如下，点击开始时，进度条会开始转动，点击停止时会停在转动的位置，若在次点击开始时，会从停止

的位置开始转动。

1：这个控件我们是自定义的，所以定义一个类继承于view类，必须要写的两个构造方法，

2：将要添加的属性在values下面的xml文件中写好（方法看上一篇）：

3：在layout中将属性用起来（方法看上篇）

4：回到代码中，在xml构造方法中，将自定义的属性解析出来，（里面的参数及其理解看上篇，），

 5：重写ondraw方法，绘画的部分是在该方法里面实现的，

6：在ondraw方法中画出自己要画的图形，我这里画的是一个圆，一个圆弧，以及一个文本

  canvas?.drawCircle(cx,cy,radious,paint)

//画弧
canvas?.drawArc(mstrokewidth,mstrokewidth,width-mstrokewidth,height-mstrokewidth,
    -90f,360f*arc_chang,false,arc_paint)

//画文本
canvas?.drawText("${text.toInt()}%",width/2f,height/2f+textMove,text_paint)

进度条本身是一个圆环，我是通过设置画圆的画笔来实现画圆环的：通过设置它的填充方式为Stroke,以及
画笔的宽度宽一点，那么画出来就是一个圆环

//圆的画笔
private val paint = Paint().apply {
    color = Color.BLUE
    style = Paint.Style.STROKE
    strokeWidth = mstrokewidth
}

而我们画的并不是一个死的东西，是一个在变化的东西，那么我们就可以设置它的动画因子，如画弧的弧度，就可以通过
设置弧度变化的动画因子来实现，它是从-90度，转360度转一圈，那么我们可以设置一个动画因子为arc_chang，它的
变化范围我0到1，在乘以360，就是0到360的范围变化了，

 //圆弧的动画因子
val valueAnimator = ValueAnimator.ofFloat(0f,1f).apply {
    duration = 2000
    addUpdateListener {
        myView.arc_chang = it.animatedValue as Float
        myView.text = (it.animatedValue as Float)*100
    }
}

同理画文本也可以这样做，把数字改一下就好了，在启动动画

start.setOnClickListener {
    if (valueAnimator.isPaused) {
        valueAnimator.resume()
    }else{
    valueAnimator.start()
       }
}
stop.setOnClickListener {
    valueAnimator.pause()

}

GitHub连接：//github.com/luofangli/Circle_progress_bar

整体的代码
1：values文件中的：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="myview">
        //圆环
        <attr name="Color"  format="color|reference"/>
        //进度圆环
        <attr name="forColor"  format="color|reference"/>
        //字体
        <attr name="android:textColor"/>
    </declare-styleable>
</resources>

2：layout中

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="//schemas.android.com/apk/res/android"
    xmlns:app="//schemas.android.com/apk/res-auto"
    xmlns:tools="//schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.example.myapplication.myview
        android:id="@+id/myView"
        android:layout_width="200dp"
        android:layout_height="200dp"

        android:textColor="@color/colorAccent"
        app:Color="@color/colorGray"
        app:forColor="@color/colorPrimary"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:text="开始"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/stop"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/myView" />

    <Button
        android:id="@+id/stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="停止"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/start"
        app:layout_constraintTop_toTopOf="@+id/start" />


</androidx.constraintlayout.widget.ConstraintLayout>

3：自定义view类中

package com.example.myapplication

import android.content.Context
import android.content.res.TypedArray
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View
import java.util.jar.Attributes

class myview:View {
    //圆的圆心
    private var cx= 0f
    private var cy = 0f
    //半径
    private var radious = 0f
    //画笔的粗细
    private val mstrokewidth = 50f
    //圆中心的文本
    var text = 0f
    set(value) {
        field = value
        invalidate()
    }
    //圆弧的动画因子
    var arc_chang = 0.00f
    set(value) {
        field = value
        invalidate()
    }


    //圆的画笔
    private val paint = Paint().apply {
        color = Color.BLUE
        style = Paint.Style.STROKE
        strokeWidth = mstrokewidth
    }
    //圆弧的画笔
    private val arc_paint = Paint().apply {
        color = Color.BLUE
        style = Paint.Style.STROKE
        strokeWidth = mstrokewidth
    }
    //画笔向下移动的距离
    private var textMove = 0f
    //文本的画笔
    private val text_paint = Paint().apply {
        color = Color.BLUE
        style = Paint.Style.FILL
        textSize = 50f
        textAlign = Paint.Align.CENTER
        textMove = (descent()-ascent())/2f
    }



    //画笔的颜色
var paint_color = Color.BLUE
    set(value) {
        field = value
        paint.color = value
    }
    //画圆弧的颜色
    var arc_color = Color.GREEN
    set(value) {
        field = value
        arc_paint.color = value
    }
    //字体颜色
    var text_color = Color.GREEN

    constructor(context: Context):super(context){}
    //代码
    constructor(context: Context,attributes: AttributeSet?):super(context,attributes){
        //1：简析
val typedArray = context.obtainStyledAttributes(attributes,
    R.styleable.myview)
        //获取属性
        paint_color = typedArray.getColor(R.styleable.myview_Color,Color.GRAY)
        arc_color = typedArray.getColor(R.styleable.myview_forColor,Color.GREEN)
        text_color = typedArray.getColor(R.styleable.myview_android_textColor,
            Color.GREEN)

        //释放内存
        typedArray.recycle()
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        cx = width/2f
        cy = height/2f
        radious = Math.min(width,height)/2f - mstrokewidth
    }
    override fun onDraw(canvas: Canvas?) {
        canvas?.drawCircle(cx,cy,radious,paint)
        //画弧
        canvas?.drawArc(mstrokewidth,mstrokewidth,width-mstrokewidth,height-mstrokewidth,
            -90f,360f*arc_chang,false,arc_paint)

        //画文本
        canvas?.drawText("${text.toInt()}%",width/2f,height/2f+textMove,text_paint)

    }
}

4：mainActivity类中

package com.example.myapplication

import android.animation.Animator
import android.animation.ValueAnimator
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import kotlinx.android.synthetic.main.activity_main.*
import java.io.ObjectInputValidation

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //圆弧的动画因子
       val valueAnimator = ValueAnimator.ofFloat(0f,1f).apply {
           duration = 2000
           addUpdateListener {
               myView.arc_chang = it.animatedValue as Float
               myView.text = (it.animatedValue as Float)*100
           }
       }
        start.setOnClickListener {
            if (valueAnimator.isPaused) {
                valueAnimator.resume()
            }else{
            valueAnimator.start()
               }
        }
        stop.setOnClickListener {
            valueAnimator.pause()

        }


}
}