Android基础控件——TextView的自定义，实现圈圈进度条的倒计时

前言

在开发中，正常的进度条都是用ProgressBar实现的，但是遇到需要文本的进度条和光滑动画的进度条时，用ProgressBar实现起来就有点吃力，这里可以通过TextView+ValueAnimator的方式来实现

本例子中实现效果如下

实现思路

• 继承AppCompatTextView
• 通过drawRoundRect的方式画内圈椭圆
• 通过drawPath+PathMeasure+ValueAnimator的方式画外圈的倒计时椭圆

实现分析

1、快速使用

在xml直接使用

<com.example.uitest.RoundRectCountDown.RoundRectCountDown
    android:id="@+id/pb"
    android:layout_width="80dp"
    android:layout_height="36dp"
    android:layout_centerInParent="true"
    android:gravity="center"
    android:text="0.0s"
    android:textColor="#04B4E3"
    android:textSize="12sp" />

在代码启动倒计时

val pb = findViewById<RoundRectCountDown>(R.id.pb)
pb.startAnimation(20, object : AnimatorListenerAdapter() {
    override fun onAnimationEnd(animation: Animator?) {
        
    }
})

2、初始化属性

定义想要的属性值，并初始化画笔

//圆角
private val ROUND = 20f
//倒计时外框宽度
private val STROKE_WIDTH = 4f

//动画相关
private var mValueAnimator: ValueAnimator? = null
private var mAnimatorValue = 0f

//内圈用Rect绘制椭圆，外圈用Path来绘制椭圆
private var mInSizeRectF = RectF()
private var mOutSizePath = Path()

//相当于辅助外圈框用的工具类
private val mOutSizeTempPath = Path()
private val mOutSizePathMeasure = PathMeasure()
private var mOutSizePathLength = 0f

//外圈和内圈的画笔
private val mOutSizePaint = Paint()
private val mInSizePaint = Paint()

constructor(context: Context) : super(context)

constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)

init {
    initPaint()
}

private fun initPaint() {
    mOutSizePaint.style = Paint.Style.STROKE
    mOutSizePaint.isAntiAlias = true
    mOutSizePaint.strokeWidth = STROKE_WIDTH
    mOutSizePaint.strokeCap = Paint.Cap.ROUND
    mOutSizePaint.color = Color.parseColor("#04B4E3")

    mInSizePaint.style = Paint.Style.FILL
    mInSizePaint.isAntiAlias = true
    mInSizePaint.color = Color.parseColor("#0B101F")
}

在onLayout回调中能拿到宽高，从而去初始化对应的外圈椭圆，主要是定义外圈椭圆的长度和Path

override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
    super.onLayout(changed, left, top, right, bottom)
    buildRectPath()
}

private fun buildRectPath() {
    //定一个矩形，四个顶点分别在自身大小(0,0,width,height)的范围内往内缩一个框框的大小
    mInSizeRectF.set(STROKE_WIDTH, STROKE_WIDTH, width - STROKE_WIDTH, height - STROKE_WIDTH)
    //定义一个Path来形容椭圆
    mOutSizeTempPath.addRoundRect(mInSizeRectF, ROUND, ROUND, Path.Direction.CW)
    //定义一个PathMeasure来加载Path
    mOutSizePathMeasure.setPath(mOutSizeTempPath, true)
    //获取Path的长度
    mOutSizePathLength = mOutSizePathMeasure.length
}

3、绘制内圈和外圈

通过复写onDraw方法，绘制内圈椭圆和外圈椭圆，这里就是让外圈椭圆的起点不断接近终点，就完成了倒计时

override fun onDraw(canvas: Canvas?) {
    drawRoundRect(canvas)
    drawRoundRectStroke(canvas)
    super.onDraw(canvas)
}

/**
 * 绘制椭圆内圈背景
 */
private fun drawRoundRect(canvas: Canvas?) {
    canvas?.drawRoundRect(mInSizeRectF, ROUND, ROUND, mInSizePaint)
}

/**
 * 绘制椭圆外圈条框
 */
private fun drawRoundRectStroke(canvas: Canvas?) {
    mOutSizePath.reset()
    //获取当前外圈椭圆的起点，终点是整个外圈椭圆的长度
    val start = mOutSizePathLength * mAnimatorValue
    //通过起点和终点的连线，绘制出外圈椭圆的路径
    mOutSizePathMeasure.getSegment(start, mOutSizePathLength, mOutSizePath, true)
    canvas?.drawPath(mOutSizePath, mOutSizePaint)
}

4、开始和结束动画

启动动画后，获取0->1的动画的动画值，从而刷新界面

/**
 * 开始动画
 *
 * 0->1 的动画
 */
fun startAnimation(time: Int, listener: AnimatorListenerAdapter) {
    mValueAnimator = ValueAnimator.ofFloat(0f, 1f)
    mValueAnimator?.interpolator = LinearInterpolator()
    mValueAnimator?.addUpdateListener { it ->
        mAnimatorValue = it.animatedValue as Float
        this.text = "${time - (time * mAnimatorValue).toInt()}s"
        invalidate()
    }
    mValueAnimator?.addListener(listener)
    mValueAnimator?.duration = (time * 1000).toLong()
    mValueAnimator?.start()
}

fun stopAnimation() {
    mValueAnimator?.cancel()
}

5、源码

package com.example.uitest.RoundRectCountDown

import android.animation.AnimatorListenerAdapter
import android.animation.ValueAnimator
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.animation.LinearInterpolator

class RoundRectCountDown : androidx.appcompat.widget.AppCompatTextView {

    //圆角
    private val ROUND = 20f
    //倒计时外框宽度
    private val STROKE_WIDTH = 4f

    //动画相关
    private var mValueAnimator: ValueAnimator? = null
    private var mAnimatorValue = 0f

    //内圈用Rect绘制椭圆，外圈用Path来绘制椭圆
    private var mInSizeRectF = RectF()
    private var mOutSizePath = Path()

    //相当于辅助外圈框用的工具类
    private val mOutSizeTempPath = Path()
    private val mOutSizePathMeasure = PathMeasure()
    private var mOutSizePathLength = 0f

    //外圈和内圈的画笔
    private val mOutSizePaint = Paint()
    private val mInSizePaint = Paint()

    constructor(context: Context) : super(context)

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)

    init {
        initPaint()
    }

    private fun initPaint() {
        mOutSizePaint.style = Paint.Style.STROKE
        mOutSizePaint.isAntiAlias = true
        mOutSizePaint.strokeWidth = STROKE_WIDTH
        mOutSizePaint.strokeCap = Paint.Cap.ROUND
        mOutSizePaint.color = Color.parseColor("#04B4E3")

        mInSizePaint.style = Paint.Style.FILL
        mInSizePaint.isAntiAlias = true
        mInSizePaint.color = Color.parseColor("#0B101F")
    }

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        super.onLayout(changed, left, top, right, bottom)
        buildRectPath()
    }

    private fun buildRectPath() {
        //定一个矩形，四个顶点分别在自身大小(0,0,width,height)的范围内往内缩一个框框的大小
        mInSizeRectF.set(STROKE_WIDTH, STROKE_WIDTH, width - STROKE_WIDTH, height - STROKE_WIDTH)
        //定义一个Path来形容椭圆
        mOutSizeTempPath.addRoundRect(mInSizeRectF, ROUND, ROUND, Path.Direction.CW)
        //定义一个PathMeasure来加载Path
        mOutSizePathMeasure.setPath(mOutSizeTempPath, true)
        //获取Path的长度
        mOutSizePathLength = mOutSizePathMeasure.length
    }

    override fun onDraw(canvas: Canvas?) {
        drawRoundRect(canvas)
        drawRoundRectStroke(canvas)
        super.onDraw(canvas)
    }

    /**
     * 绘制椭圆内圈背景
     */
    private fun drawRoundRect(canvas: Canvas?) {
        canvas?.drawRoundRect(mInSizeRectF, ROUND, ROUND, mInSizePaint)
    }

    /**
     * 绘制椭圆外圈条框
     */
    private fun drawRoundRectStroke(canvas: Canvas?) {
        mOutSizePath.reset()
        //获取当前外圈椭圆的起点，终点是整个外圈椭圆的长度
        val start = mOutSizePathLength * mAnimatorValue
        //通过起点和终点的连线，绘制出外圈椭圆的路径
        mOutSizePathMeasure.getSegment(start, mOutSizePathLength, mOutSizePath, true)
        canvas?.drawPath(mOutSizePath, mOutSizePaint)
    }

    /**
     * 开始动画
     *
     * 0->1 的动画
     */
    fun startAnimation(time: Int, listener: AnimatorListenerAdapter) {
        mValueAnimator = ValueAnimator.ofFloat(0f, 1f)
        mValueAnimator?.interpolator = LinearInterpolator()
        mValueAnimator?.addUpdateListener { it ->
            mAnimatorValue = it.animatedValue as Float
            this.text = "${time - (time * mAnimatorValue).toInt()}s"
            invalidate()
        }
        mValueAnimator?.addListener(listener)
        mValueAnimator?.duration = (time * 1000).toLong()
        mValueAnimator?.start()
    }

    fun stopAnimation() {
        mValueAnimator?.cancel()
    }
}