Android開發Kotlin實現圓弧計步器範例詳解

<!-- 自定義View的名字 StepView -->
        <!-- name 屬性名稱  format 格式
        string 文字    color 顏色    dimension 字型大小
        integer 數位   reference 資源或者顏色
        -->
<declare-styleable name="StepView">
        <attr name="borderWidth" format="dimension" />
        <attr name="outColor" format="color" />
        <attr name="innerColor" format="color" />
        <attr name="unit" format="string" />
        <attr name="currentStep" format="integer" />
        <attr name="maxStep" format="integer" />
    </declare-styleable>

package cn.wwj.customview.widget
import android.animation.ValueAnimator
import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.graphics.Rect
import android.graphics.RectF
import android.util.AttributeSet
import android.util.Log
import android.util.TypedValue
import android.view.animation.AccelerateInterpolator
import androidx.appcompat.widget.AppCompatTextView
import cn.wwj.customview.R
class StepView : AppCompatTextView {
    /**
     * 當前走了多少步
     */
    private var mCurrentStep: Int = 0
    /**
     * 最大走多少步,比如兩萬步 20000步
     * 預設100步,有個成語50步笑100步
     */
    private var mMaxStep: Int = 100
    /**
     * 單位：步 %等
     */
    private var mUnit: String?
    /**
     * 設定圓弧的邊框線寬度
     */
    private var mBorderWidth: Float = dp2px(6F)
    /**
     * 設定外部圓弧的顏色
     */
    private var mOuterColor: Int = resources.getColor(android.R.color.holo_blue_light)
    /**
     * 設定內部圓弧的顏色
     */
    private var mInnerColor: Int = resources.getColor(android.R.color.holo_red_light)
    /**
     * 圓弧畫筆
     */
    private var mArcPaint: Paint = Paint()
    /**
     * 文字畫筆，用於繪畫走了多少步
     */
    private var mTextPaint: Paint = Paint()
    /**
     * 紀錄檔過濾標籤
     */
    private val TAG = javaClass.simpleName
    /**
     * 圓弧起始角度
     */
    private var mStartAngle = 135F
    /**
     * 圓弧從起始角度開始，掃描過的角度
     */
    private var mSweepAngle = mStartAngle * 2
    /**
     *  比如用於獲取一個圓弧的矩形,onDraw()方法會呼叫多次,不必每次都建立Rect()物件
     */
    private val mArcRect = RectF()
    /**
     *  比如用於獲取文字的大小,onDraw()方法會呼叫多次,不必每次都建立Rect()物件
     *  用同一個物件即可
     */
    private val mTextRect = Rect()
    /**
     * 值動畫師
     */
    private var valueAnimator: ValueAnimator? = null
    /**
     * 最大進度
     */
    private val MAX_PROGRESS = 100F
    constructor(context: Context)
            : this(context, null)
    constructor(context: Context, attrs: AttributeSet?)
            : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int)
            : super(context, attrs, defStyleAttr) {
        val appearance = context.obtainStyledAttributes(attrs, R.styleable.StepView)
        mBorderWidth = appearance.getDimension(R.styleable.StepView_borderWidth, mBorderWidth)
        mOuterColor = appearance.getColor(R.styleable.StepView_outColor, mOuterColor)
        mInnerColor = appearance.getColor(R.styleable.StepView_innerColor, mInnerColor)
        mUnit = appearance.getString(R.styleable.StepView_unit)
        mCurrentStep = appearance.getInt(R.styleable.StepView_currentStep, 0)
        mMaxStep = appearance.getInt(R.styleable.StepView_maxStep, mMaxStep)
        appearance.recycle()
        setPaint()
    }
    /**
     * 設定 圓弧畫筆用於繪製圓弧 和 文字畫筆，用於繪畫走了多少步
     */
    private fun setPaint() {
        // 畫筆的顏色
        mArcPaint.color = mOuterColor
        // 抗抖動
        mArcPaint.isDither = true
        // 抗鋸齒
        mArcPaint.isAntiAlias = true
        // 畫筆的樣式描邊,筆劃突出為半圓
        mArcPaint.style = Paint.Style.STROKE
        // 設定描邊的線帽樣式
        mArcPaint.strokeCap = Paint.Cap.ROUND
        // 設定描邊的寬度
        mArcPaint.strokeWidth = mBorderWidth
        // 畫筆的顏色
        mTextPaint.color = currentTextColor
        // 抗抖動
        mTextPaint.isDither = true
        // 抗鋸齒
        mTextPaint.isAntiAlias = true
        // 畫筆的樣式描邊,筆劃突出為半圓
        mTextPaint.style = Paint.Style.FILL
        // 設定描邊的線帽樣式
        mTextPaint.strokeCap = Paint.Cap.ROUND
        // 設定文字大小
        mTextPaint.textSize = textSize
    }
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        /**
         * 獲取控制元件的寬高
         */
        val widthSize = MeasureSpec.getSize(widthMeasureSpec)
        val heightSize = MeasureSpec.getSize(heightMeasureSpec)
        /**
         * 如果寬度大於高度,取高度
         * 否則取寬度
         */
        val result = if (widthSize > heightSize) {
            heightSize
        } else {
            widthSize
        }
        /**
         * 設定控制元件的寬高
         */
        setMeasuredDimension(result, result)
    }
    override fun onDraw(canvas: Canvas?) {
        // 將矩形設定為 (0,0,0,0)
        mArcRect.setEmpty()
        mTextRect.setEmpty()
        // 圓弧矩形左邊距,頂邊距,右邊距,底邊距
        val left = mBorderWidth / 2
        val top = mBorderWidth / 2
        val right = width - mBorderWidth / 2
        val bottom = height - mBorderWidth / 2
        mArcRect.set(left, top, right, bottom)
        // 繪製外部圓弧
        mArcPaint.color = mOuterColor
        canvas?.drawArc(mArcRect, mStartAngle, mSweepAngle, false, mArcPaint)
        // 繪製內部部圓弧
        mArcPaint.color = mInnerColor
        val sweepAngle = mCurrentStep * 1F / mMaxStep * mSweepAngle
        canvas?.drawArc(mArcRect, mStartAngle, sweepAngle, false, mArcPaint)
        val stepText = if (mUnit != null) {
            "$mCurrentStep $mUnit"
        } else {
            mCurrentStep.toString()
        }
        // 獲取文字的寬高
        mTextPaint.getTextBounds(stepText, 0, stepText.length, mTextRect)
        val textX = width / 2F - mTextRect.width() / 2
        val textY = height / 2F + getBaseline(mTextPaint)
        // 繪製文字,第二個引數文字的起始索引,第三個引數要繪製的文字長度
        // 開始繪製文字的x 座標 y 座標
        canvas?.drawText(stepText, 0, stepText.length, textX, textY, mTextPaint)
    }
    /**
     * @param progress 進入0-100 之間
     * @param duration 動畫時長,預設 350毫秒
     */
    fun setProgress(progress: Int, duration: Long = 350) {
        valueAnimator?.cancel()
        valueAnimator = null
        val step = (progress / MAX_PROGRESS * mMaxStep).toInt()
        valueAnimator = ValueAnimator.ofInt(mCurrentStep, step.coerceAtMost(mMaxStep))
        valueAnimator?.duration = duration
        valueAnimator?.interpolator = AccelerateInterpolator()
        valueAnimator?.addUpdateListener {
            mCurrentStep = it.animatedValue as Int
            Log.d(TAG, "------$mCurrentStep")
            invalidate()
        }
        valueAnimator?.startDelay = 10
        valueAnimator?.start()
    }
    /**
     * @param maxStep  最多走多少步，比如2000步
     * @param duration 預設動畫時長200
     */
    fun setMaxStep(maxStep: Int, duration: Long = 0) {
        mMaxStep = maxStep
        val progress = (mCurrentStep * 1F / mMaxStep * 100).toInt()
        setProgress(progress, duration)
    }
    /**
     * @param currentStep 當前走了多少步
     * @param duration 預設動畫時長200
     */
    fun setCurrentStep(currentStep: Int, duration: Long = 200) {
        mCurrentStep = currentStep
        val progress = (mCurrentStep * 1F / mMaxStep * 100).toInt()
        setProgress(progress, duration)
    }
    /**
     * 檢視從視窗分離時
     */
    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        valueAnimator?.cancel()
        valueAnimator = null
    }
    private fun dp2px(value: Float): Float {
        return TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, value, resources.displayMetrics
        )
    }
    /**
     * 計算繪製文字時的基線到中軸線的距離
     * @param paint 畫筆
     * @return 返回基線的距離
     */
    private fun getBaseline(paint: Paint): Float {
        val fontMetrics: Paint.FontMetrics = paint.fontMetrics
        return (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom
    }
}

/**
     * 計算繪製文字時的基線到中軸線的距離
     * @param paint 畫筆
     * @return 返回基線的距離
     */
    private fun getBaseline(paint: Paint): Float {
        val fontMetrics: Paint.FontMetrics = paint.fontMetrics
        return (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom
    }