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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/207189.html

標籤：其他

上一篇：Android NDK 開發實戰 - 微信公眾號二維碼檢測

下一篇：Android 復選框以及回顯