一、寫在前面

在參考了紅橙Darren的文章之后，將自己實現(xiàn)的做個筆記，并提供給大家參考，紅橙Darren 的 自定義View - 仿QQ運動步數(shù)進(jìn)度效果,同時還參考了 和小胖 的 Android自定義view之基礎(chǔ)canvas.drawXXX方法,并在此基礎(chǔ)上衍生了幾種效果。
沒有自定義View基礎(chǔ)的請看這自定義View簡介 - onMeasure,onDraw,自定義屬性

（1） 圖一，仿QQ步數(shù)運行效果

仿QQ運動步數(shù)進(jìn)度效果

（2）圖二，完整的圓效果

在這里插入圖片描述

還可以衍生為，倒計時效果，百分比效果，有興趣的可自行實現(xiàn)

完整代碼請看這

自定義View-仿QQ運動步數(shù)進(jìn)度效果(完整代碼)

二、正文開始

首先思考，實現(xiàn)的思路，仿QQ步數(shù)運行效果，主要有三個部分：
    一、中間文字
    二、外弧，內(nèi)弧
    三、動態(tài)效果
    四、控件大小，從效果圖上面可以看出我們的控件是正方形，所以我們要保證，用戶不管設(shè)置大小如何都能是正方形，或者提示用戶要保證寬高一致
有了思路之后就開始擼代碼了

（1）首先來個三部曲，自定義屬性，布局設(shè)置，屬性獲取

1）自定義屬性，新建attrs.xml

```java
<?xml version="1.0" encoding="utf-8"?>
<resources>
    </declare-styleable>
    <declare-styleable name="ProgressRunView">
    <!-- 步數(shù)文字大小-->
    <attr name="centerTextSize" format="dimension"/>
    <!-- 外圍圓弧大小-->
    <attr name="cirleSize" format="dimension"/>
    <!-- 步婁文字顏色大小-->
    <attr name="centerTextColor" format="color"/>
    <!-- 外圍圓弧顏色-->
    <attr name="cirleForeginColor" format="color"/>
    <!-- 內(nèi)圍圓弧顏色-->
    <attr name="centerInnerColor" format="color"/>
</declare-styleable>

</resources>

2）布局設(shè)置

    <com.example.myapplication.Widget.ProgressRunView
        android:id="@+id/progressRunView"
        android:layout_width="300dp"
        android:layout_height="400dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:background="@color/colorAccent"
        app:centerInnerColor="#FF0000"
        app:centerTextColor="#FF0000"
        app:centerTextSize="50sp"
        app:cirleForeginColor="#2196F3"
        app:cirleSize="2dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

3）屬性獲取

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ProgressRunView);
        centerTextSize = typedArray.getDimensionPixelSize(R.styleable.ProgressRunView_centerTextSize,Px2Sp(context,centerTextSize));
        cirleSize = typedArray.getDimension(R.styleable.ProgressRunView_cirleSize,cirleSize);
        centerTextColor = typedArray.getColor(R.styleable.ProgressRunView_centerTextColor,centerTextColor);
        cirleForeginColor = typedArray.getColor(R.styleable.ProgressRunView_cirleForeginColor,cirleForeginColor);
        centerInnerColor = typedArray.getColor(R.styleable.ProgressRunView_centerInnerColor,centerInnerColor);
        typedArray.recycle();

（2） 我們先來解決，寬高的問題，重寫onMeasure方法

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //獲取寬高的模式
         int widthMode = MeasureSpec.getMode(widthMeasureSpec);
         int heightMode = MeasureSpec.getMode(heightMeasureSpec);
         //指定寬高的大小
         int width = MeasureSpec.getSize(widthMeasureSpec);
         int height = MeasureSpec.getSize(heightMeasureSpec);
         //如果寬高設(shè)置為wrap_content時，剛默認(rèn)為500
         if(widthMode == MeasureSpec.AT_MOST || heightMode == MeasureSpec.AT_MOST){
             width = 500;
             height = width;
         }
        //如果寬高不一致時，則以寬為標(biāo)準(zhǔn)
         if(width != height){
             height = width;
         }

         setMeasuredDimension(width,height);
    }

(3) 現(xiàn)在就是各種繪制

1）繪制文本

    private void drawText(Canvas canvas) {
        Rect rect = new Rect();
        paintText.getTextBounds(runText,0,runText.length(),rect);
        Paint.FontMetrics fontMetrics =paintText.getFontMetrics();
        
        int dx = getWidth()/2 - rect.width()/2;
        //基線
        float baseline = getHeight()/2 + (fontMetrics.top-fontMetrics.bottom)/2-fontMetrics.top;
        canvas.drawText(runText,dx,baseline,paintText);
    }

2）繪制外弧

    private void drawCirle(Canvas canvas) {
        int radius = 200;
        RectF rectF = new RectF(x-radius,y-radius,x + radius,y+ radius);

        canvas.drawArc(rectF, 135, 270, false, paintCirle);
    }

3）繪制內(nèi)弧

    private void drawCirleInner(Canvas canvas) {
        int radius = 200;
        RectF rectF = new RectF(x-radius,y-radius,x + radius,y+ radius);
        float sweepAngle = (float) Integer.valueOf(runText)/maxStep;
        //動態(tài)設(shè)置掃過的面積（弧的動態(tài)效果）
        canvas.drawArc(rectF, 135, sweepAngle*270, false, paintCirleInner);
    }

4）文本的動態(tài)效果

        public void start(int start,int end){
        ValueAnimator valueAnimator = ValueAnimator.ofInt(start,end);
        //開始到結(jié)束的時間
        valueAnimator.setDuration(3000);
        valueAnimator.start();
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                int currentStep = (int) valueAnimator.getAnimatedValue();
                //設(shè)置當(dāng)前的步數(shù)并重新繪制
                setProgress(currentStep);
                Log.e("onAnimationUpdate: ", String.valueOf(currentStep));
            }
        });
    }

（4）最后在Activity中應(yīng)用

        progressRunView.setMaxStep(5000);
        progressRunView.start(0,3650);

CSDN地址：自定義View-仿QQ運動步數(shù)進(jìn)度效果