自定义View-计步器

QQStepView

package com.fangju.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;

/**
 * 仿QQ计步器的自定义View
 * Created by FangJu on 2020/4/1.
 */
public class QQStepView extends View {
    // 外圆颜色
    private int mOuterCircleColor;
    // 内圆颜色
    private int mInnerCircleColor;
    // 步数字体颜色
    private int mStepTextColor;
    // 步数字体大小
    private int mStepTextSize;
    // 圆的宽度
    private int mCircleBorderWidth;

    private Paint mOuterCirclePaint;
    private Paint mInnerCirclePaint;
    private Paint mTextPaint;

    // 最大步数
    private int mMaxStepNumber = 0;
    // 当前步数
    private int mCurrentStepNumber = 0;

    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);
        // 获取自定义属性的值
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.QQStepView);
        mOuterCircleColor = a.getColor(R.styleable.QQStepView_outerCircleColor, Color.BLUE);
        mInnerCircleColor = a.getColor(R.styleable.QQStepView_innerCircleColor, Color.RED);
        mStepTextColor = a.getColor(R.styleable.QQStepView_stepTextColor, Color.RED);
        mStepTextSize = a.getDimensionPixelSize(R.styleable.QQStepView_stepTextSize, 18);
        mCircleBorderWidth = a.getDimensionPixelSize(R.styleable.QQStepView_circleBorderWidth, 3);
        a.recycle();

        // 初始化画笔
        mOuterCirclePaint = new Paint();
        mOuterCirclePaint.setAntiAlias(true);
        mOuterCirclePaint.setColor(mOuterCircleColor);
        mOuterCirclePaint.setStrokeWidth(mCircleBorderWidth);
        mOuterCirclePaint.setStrokeCap(Paint.Cap.ROUND);
        mOuterCirclePaint.setStyle(Paint.Style.STROKE);

        mInnerCirclePaint = new Paint();
        mInnerCirclePaint.setAntiAlias(true);
        mInnerCirclePaint.setColor(mInnerCircleColor);
        mInnerCirclePaint.setStrokeWidth(mCircleBorderWidth);
        mInnerCirclePaint.setStrokeCap(Paint.Cap.ROUND);
        mInnerCirclePaint.setStyle(Paint.Style.STROKE);

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if (widthMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.AT_MOST) {
            throw new RuntimeException("必须指定宽度");
        }

        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        int minNum = Math.min(width, height);
        setMeasuredDimension(minNum, minNum);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int center = getWidth() / 2;
        // 画外圆
        RectF rectF = new RectF(mCircleBorderWidth / 2, mCircleBorderWidth / 2, 2 * center - mCircleBorderWidth / 2, 2 * center - mCircleBorderWidth / 2);
        canvas.drawArc(rectF, 135, 270, false, mOuterCirclePaint);

        // 画内圆
        if (mMaxStepNumber == 0 || mCurrentStepNumber > mMaxStepNumber)
            return;
        int sweepAngle = (int) ((mCurrentStepNumber * 1.0 / mMaxStepNumber) * 270);
        canvas.drawArc(rectF, 135, sweepAngle, false, mInnerCirclePaint);

        // 画文字
        String stepStr = String.valueOf(mCurrentStepNumber);
        Rect textBounds = new Rect();
        mTextPaint.getTextBounds(stepStr, 0, stepStr.length(), textBounds);
        int dx = getWidth() / 2 - textBounds.width() / 2;

        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
        int dy = (int) ((fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom);
        int baseLine = getHeight() / 2 - dy;
        canvas.drawText(stepStr, dx, baseLine, mTextPaint);
    }

    /**
     * 设置最大步数
     */
    public void setStepMax(int stepMax) {
        this.mMaxStepNumber = stepMax;
    }

    /**
     * 设置当前的步数
     */
    public void setCurrentStep(int stepCurrent){
        this.mCurrentStepNumber = stepCurrent;
        invalidate();
    }
}

MainActivity

package com.fangju.qqstepview;

import androidx.appcompat.app.AppCompatActivity;

import android.animation.ValueAnimator;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {

    private QQStepView mStepView;
    private EditText mInput;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mStepView = findViewById(R.id.setpview);
        mStepView.setStepMax(2000);

        mInput = findViewById(R.id.input_et);
    }

    public void start(View view) {
        String trim = mInput.getText().toString().trim();
        startAnim(Integer.valueOf(trim));
    }

    private void startAnim(int number) {
        ValueAnimator animator = ValueAnimator.ofFloat(0, number);
        animator.setDuration(2000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float animatedValue = (float) animation.getAnimatedValue();
                mStepView.setCurrentStep((int) animatedValue);
            }
        });
        animator.start();
    }
}

activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.fangju.qqstepview.QQStepView
        android:id="@+id/setpview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        app:circleBorderWidth="8dp"
        app:innerCircleColor="@color/colorAccent"
        app:outerCircleColor="@color/colorPrimary"
        app:stepTextColor="@color/colorAccent"
        app:stepTextSize="20dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <EditText
            android:id="@+id/input_et"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <Button
            android:onClick="start"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>


</LinearLayout>