1、仿運(yùn)動(dòng)的步數(shù)條柬讨，效果圖如下

步數(shù)圖.gif

一崩瓤、自定義屬性：
1.1、內(nèi)圓弧踩官、外圓弧的顏色
1.2却桶、字體、圓弧的大小
二蔗牡、繼承View
2.1颖系、onMeasure（）方法測(cè)量設(shè)置view的大小
2.2畴嘶、onDraw() 繪制內(nèi)外圓弧、文字
三集晚、使用
3.1窗悯、布局中使用自定義的view，同時(shí)加上自定義的屬性
3.2偷拔、調(diào)用 View設(shè)置步數(shù)的方法,同時(shí)加上屬性動(dòng)畫(huà)

2蒋院、實(shí)現(xiàn)

2.1、自定義屬性：

沒(méi)有attrs.xml 文件就新建一個(gè)

image.png

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--步數(shù)圓環(huán)-->
    <declare-styleable name="stepView">
        <!--1莲绰、外圓弧顏色-->
        <attr name="outer" format="color" />
        <!--2欺旧、內(nèi)圓弧顏色-->
        <attr name="inside" format="color" />
        <!--3、字體大小-->
        <attr name="textSize" format="dimension" />
        <!--4蛤签、圓弧大小-->
        <attr name="radian" format="dimension" />

    </declare-styleable>
</resources>

2.2辞友、新建類(lèi)StepView_01，繼承View

public class StepView_01 extends View {

    private Paint mPaint = new Paint();
    private int outerColor = Color.WHITE;
    private int insideColor = Color.RED;
    private int textSize = 15;
    private int radianSize = 30;

    private int mCurrentStep = 0;//當(dāng)前步數(shù)
    private int mMaxSteps = 5000; //總步數(shù)

    public StepView_01(Context context) {
        super(context);
    }


    public StepView_01(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public StepView_01(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
      TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.stepView);
      outerColor = array.getColor(R.styleable.stepView_outer, outerColor);
       insideColor = array.getColor(R.styleable.stepView_inside, insideColor);
       textSize = array.getInteger(R.styleable.stepView_textSize, textSize);
       radianSize = array.getInteger(R.styleable.stepView_radian, radianSize);
        array.recycle();
    }

    @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int startAngle = 135; //起始弧度
        int angle = 270; //劃過(guò)的弧度

        // 設(shè)置圓弧畫(huà)筆的寬度
        mPaint.setStrokeWidth(30);
        // 設(shè)置為 線頭為 圓角
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        // 設(shè)置畫(huà)筆顏色
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.STROKE);

        mPaint.setAntiAlias(true);

        int centerX = getWidth() / 2;//中心點(diǎn)
        int centerY = getHeight() / 2;//中心點(diǎn)
        int radius = centerX / 2;    // 半徑

        // 1.畫(huà)背景大圓弧
        RectF outer = new RectF(radius, centerY - radius, centerX + radius, centerY + radius);
        canvas.drawArc(outer, startAngle, angle, false, mPaint);


//      2.畫(huà)內(nèi)圓弧
        mPaint.setColor(Color.BLUE);
        RectF inside = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
        if (mMaxSteps == 0) return;
        float sweepAngle = (float) mCurrentStep / mMaxSteps;

        canvas.drawArc(inside, startAngle, sweepAngle * 270, false, mPaint);

//        3.中心文字
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setTextSize(50);

        String stepText = mCurrentStep + "";
        Rect textBounds = new Rect();
        mPaint.getTextBounds(stepText, 0, stepText.length(), textBounds);
        int dx = getWidth() / 2 - textBounds.width() / 2 - radianSize/2;
        canvas.drawText(stepText, dx, centerY + 30, mPaint);
    }

/**
*測(cè)量View
**/
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);

        setMeasuredDimension(width, height);
    }

    //設(shè)置最大步數(shù)值
    public  void setStepMax(int stepMax){
        this.mMaxSteps=stepMax;
    };

    //設(shè)置當(dāng)前步數(shù)值
    public  void setCurrentStep(int step){
        this.mCurrentStep=step;
        //不斷繪制
        invalidate();
    };
}

2.3震肮、使用
view_setp_01.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="#CCCACA"
    android:layout_height="match_parent">

    <com.example.view_day01.View.StepView_01
        android:id="@+id/stepView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <EditText
        android:id="@+id/stepView_edit"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="55dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="55dp"
        android:layout_marginBottom="31dp"
        android:hint="當(dāng)前步數(shù)"
        app:layout_constraintBottom_toTopOf="@+id/stepView_btn"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/stepView"
        app:layout_constraintVertical_bias="0.978" />

    <Button
        android:id="@+id/stepView_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="72dp"
        android:text="啟動(dòng)"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

fragment :

public class StepFragment_01 extends Fragment {
    private EditText editText;
    private StepView_01 stepView;
    private static final String TAG = "StepFragment_01";
    private Button button;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.view_step_01, container, false);
        stepView = view.findViewById(R.id.stepView);
        editText = view.findViewById(R.id.stepView_edit);
        button = view.findViewById(R.id.stepView_btn);

        stepView.setStepMax(5000);//設(shè)置最大步數(shù)

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setAnimator();
            }
        });

        return view;
    }

    //通過(guò)屬性動(dòng)畫(huà)調(diào)用自定義view的方法称龙，1.5秒內(nèi)繪制出進(jìn)度條
    private void setAnimator() {
        Log.d(TAG, "setAnimator: " + Integer.parseInt(editText.getText().toString()));
        ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, Integer.parseInt(editText.getText().toString())); //0-**
        valueAnimator.setDuration(1500);//需要多少秒
        valueAnimator.setInterpolator(new DecelerateInterpolator());//插值器
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float step = (float) animation.getAnimatedValue();
                Log.d(TAG, "onAnimationUpdate: " + (int) step);
                stepView.setCurrentStep((int) step);
            }
        });
        valueAnimator.start();
    }