效果展示

思路分析

1、固定不動藍色的大圓弧 color borderWidth

2、可以變化的小圓弧（紅色） color borderWidth

3、中間的步數文字 color textSize

這里，因為內外圓弧寬度寬度一樣，所以，可統一命名為 borderWidth

開始碼字

第一步：自定義控制元件類的創建 繼承自 View

第二步：自定義屬性檔案的創建，及內容的撰寫

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="QQStepView">
        <attr name="outerColor" format="color"/>
        <attr name="innerColor" format="color"/>
        <attr name="borderWidth" format="dimension"/>
        <attr name="stepTextSize" format="dimension"/>
        <attr name="stepTextColor" format="color"/>
    </declare-styleable>
</resources>

如何創建自定義屬性檔案，我前面有講解 ，不懂得可自行復習

第三步：在布局檔案中應用

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

    <com.example.qqstepview.QQStepView
        android:id="@+id/step_view"
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:outerColor="@color/colorPrimaryDark"
        app:innerColor="#f00"
        app:borderWidth="20dp"
        app:stepTextColor="#f00"
        app:stepTextSize="50sp"/>

</RelativeLayout>

第四步：在自定義組件類 中 獲取自定義屬性 并撰寫相關方法

package com.example.qqstepview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

public class QQStepView extends View {

    private int mOuterColor = Color.parseColor("#3700B3");
    private int mInnerColor = Color.parseColor("#ff0000");
    private int mBorderWidth = 20; //20px
    private int mStepTextSize = 14; //14px
    private int mStepTextColor;
    private Paint mOutPaint,mInnerPaint,mTextPaint;
    private Context mContext;

    //總共的，當前的步數
    private int mStepMax = 100;
    private int mCurrentStep = 50;

    public QQStepView(Context context) {
        this(context,null);
    }

    public QQStepView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public QQStepView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.mContext = context;

        //1、分析效果 2、確定自定義屬性 撰寫attrs.xml 3、在布局中使用 4、在自定義View中獲取自定義屬性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.QQStepView);

        mOuterColor = typedArray.getColor(R.styleable.QQStepView_outerColor, mOuterColor);
        mInnerColor = typedArray.getColor(R.styleable.QQStepView_innerColor, mInnerColor);
        mBorderWidth = (int) typedArray.getDimension(R.styleable.QQStepView_borderWidth,mBorderWidth);
        mStepTextSize = typedArray.getDimensionPixelSize(R.styleable.QQStepView_stepTextSize,mStepTextSize);
        mStepTextColor = typedArray.getColor(R.styleable.QQStepView_stepTextColor,mStepTextColor);

        typedArray.recycle();

        //初始化資料
        initData();

        //5、onMeasure()

        //6、畫外圓弧 內圓弧 文字
        //7、其他
    }

    private void initData() {
        mOutPaint = new Paint();
        mOutPaint.setAntiAlias(true);
        mOutPaint.setStrokeWidth(mBorderWidth);
        mOutPaint.setColor(mOuterColor);
        mOutPaint.setStyle(Paint.Style.STROKE);
        mOutPaint.setStrokeCap(Paint.Cap.ROUND);

        mInnerPaint = new Paint();
        mInnerPaint.setAntiAlias(true);
        mInnerPaint.setStrokeWidth(mBorderWidth);
        mInnerPaint.setColor(mInnerColor);
        mInnerPaint.setStyle(Paint.Style.STROKE);
        mInnerPaint.setStrokeCap(Paint.Cap.ROUND);

        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(mStepTextSize);
        mTextPaint.setColor(mStepTextColor);
    }

    //5、onMeasure()
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //呼叫者在布局檔案中可能  wrap_content 寬度高度不一致

        int width = MeasureSpec.getSize(widthMeasureSpec) + getPaddingLeft() + getPaddingRight();
        int height = MeasureSpec.getSize(heightMeasureSpec) + getPaddingTop() +getPaddingBottom();

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        if (widthMode == MeasureSpec.AT_MOST){

        }

        if (heightMode == MeasureSpec.AT_MOST){

        }

        setMeasuredDimension(width>height?height:width,width>height?height:width);
    }

    //6、畫外圓弧 內圓弧 文字
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int center = getWidth()/2;
        int radius = getWidth()/2 - mBorderWidth/2;
        //6.1 畫外圓弧
        RectF rectF = new RectF(center - radius ,
                center - radius ,
                center + radius ,
                center + radius ); //第一種寫法
        //RectF rectF = new RectF(mBorderWidth/2,mBorderWidth/2,getWidth() - mBorderWidth/2,getWidth() - mBorderWidth/2); //第二種寫法

        canvas.drawArc(rectF,135,270,false,mOutPaint);

        //6.2 畫內圓弧 怎么畫肯定不能寫死  百分比 是使用者設定的 從外面傳

        System.out.println("mCurrentStep:"+mCurrentStep+"mStepMax:"+mStepMax);
        if (mStepMax == 0)return;
        float sweepAngle = (float)mCurrentStep/mStepMax;
        canvas.drawArc(rectF,135,sweepAngle*270,false,mInnerPaint);

        //6.3 畫文字
        String stepText = mCurrentStep + "";
        //基線
        Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
        int dy = (fontMetricsInt.bottom - fontMetricsInt.top)/2 - fontMetricsInt.bottom;
        int baseLine = getHeight()/2 + dy;
        //文字起始位置
        Rect textBounds = new Rect();
        mTextPaint.getTextBounds(stepText,0,stepText.length(),textBounds);
        int dx = textBounds.width();
        float x = getWidth()/2 - dx/2; //dx表示文字寬度
        canvas.drawText(stepText,x,baseLine,mTextPaint);
    }

    //7,其他，寫幾個方法動起來
    public synchronized void  setStepMax (int stepMax){
        this.mStepMax = stepMax;
    }

    public synchronized void  setCurrentStep (int currentStep){
        this.mCurrentStep = currentStep;
        //不斷繪制
        invalidate();
    }
}

里面有一些冗余代碼，比如初始化畫筆可以封裝，我就不在此優化了

第五步：在使用了自定義組件的 類中 呼叫

package com.example.qqstepview;

import androidx.appcompat.app.AppCompatActivity;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.BounceInterpolator;
import android.view.animation.DecelerateInterpolator;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final QQStepView step_view = findViewById(R.id.step_view);
        step_view.setStepMax(4000);

        //值影片
        ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, 3000);
        valueAnimator.setDuration(1000);
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float currentStep = (float) animation.getAnimatedValue();
                step_view.setCurrentStep((int) currentStep);
            }
        });
        valueAnimator.start();
    }
}

原始碼連接：QQStepView