1. 思路分析

自定义View步骤：
1>：values__attrs.xml，自定义属性；
2>：在自定义View的第三个构造方法中获取自定义属性；
3>：onMeasure【非必须】；
4>：onDraw：绘制代码全部在onDraw方法中写；

步骤分析：
1>：固定不动的蓝色大圆弧 颜色和圆弧宽度：color、borderWidth；
2>：可以变化的红色小圆弧 颜色和圆弧宽度：color、borderWidth；
3>：中间的步数文字 颜色和大小：color、textSize；

2. 效果如下

图片.png

3. 代码如下

1>：attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- 自定义qq计步器 -->
    <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>

2>：QQStepView

/**
 * ================================================
 * Email: 2185134304@qq.com
 * Created by Novate 2018/12/28 17:51
 * Version 1.0
 * Params:
 * Description:    仿qq运动计步器
 * ================================================
*/

public class QQStepView extends View {

    /**
     * 思路分析：
     * 1. 固定不动的蓝色大圆弧 颜色和宽度[color、borderWidth]
     * 2. 可以变化的红色小圆弧 颜色和宽度[color、borderWidth]
     * 3. 中间的步数文字 颜色和大小[color、textSize]
     */

    // 外圆默认颜色
    private int mOuterColor = Color.RED ;
    // 内圆默认颜色
    private int mInnerColor = Color.BLUE ;
    // 圆弧宽度 20sp
    private int mBorderWidth = 20 ;
    // 默认文字颜色
    private int mStepTextColor ;
    // 默认文字大小
    private int mStepTextSize ;

    // 设置3个画笔 外圆画笔、内圆画笔、文字画笔
    private Paint mOutPaint , mInnerPaint , mTextPaint ;

    // 总共步数
    private int mStepMax = 0 ;
    // 当前步数
    private int mCurrentStep = 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);

        // 步骤：
        // 1. values__attrs.xml中自定义属性
        // 2. 在布局文件中使用
        // 3. 在构造方法中获取自定义属性
        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 = typedArray.getDimensionPixelSize(R.styleable.QQStepView_borderWidth , mBorderWidth) ;
        mStepTextColor = typedArray.getColor(R.styleable.QQStepView_stepTextColor , mStepTextColor) ;
        mStepTextSize = typedArray.getDimensionPixelSize(R.styleable.QQStepView_stepTextSize , mStepTextSize) ;
        // 释放资源
        typedArray.recycle();


        // 4. 初始化画笔
        mOutPaint = new Paint() ;
        mOutPaint.setAntiAlias(true); //设置抗锯齿，为了文字能清晰显示不至于很模糊
        mOutPaint.setStrokeWidth(mBorderWidth); //设置画笔宽度，单位px
        mOutPaint.setColor(mOuterColor); //设置外圆画笔颜色
        mOutPaint.setStrokeCap(Paint.Cap.ROUND) ; //设置画笔笔刷类型 帽子 圆弧两边的小盖子 把圆弧封闭住
        mOutPaint.setStyle(Paint.Style.STROKE); //设置画笔空心



        //初始化内圆画笔
        mInnerPaint = new Paint() ;
        mInnerPaint.setAntiAlias(true); //设置内圆抗锯齿，为了文字能清晰显示不至于很模糊
        mInnerPaint.setStrokeWidth(mBorderWidth); //设置画笔宽度 ，单位px
        mInnerPaint.setColor(mInnerColor);
        mInnerPaint.setStrokeCap(Paint.Cap.ROUND); //设置画笔笔刷类型
        mInnerPaint.setStyle(Paint.Style.STROKE); //设置画笔空心  FILL：是实心


        //初始化文字画笔
        mTextPaint = new Paint() ;
        mTextPaint.setAntiAlias(true); //设置抗锯齿
        mTextPaint.setTextSize(mStepTextSize);
        mTextPaint.setColor(mStepTextColor);

        // 5. 重写onMeasure
        // 6. 画外圆弧、内圆弧、文字
        // 7. 其他
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        // 这里为了方便，直接在这里获取width和height，然后测量宽高；
        // 如果想要在布局文件中给QQStepView宽高属性设置wrap_content，
        // 就需要获取 widthMode和heightMode，通过这两个模式重新获取width和height，
        // 具体可以参照自定义MyTextView

        int width = MeasureSpec.getSize(widthMeasureSpec) ;
        int height = MeasureSpec.getSize(heightMeasureSpec) ;
        // 测量宽高：宽高不一致时，取最小值，确保是一个正方形
        setMeasuredDimension(width>height?height:width , width>height?height:width);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 6.1 画外圆
        RectF rectF = new RectF(mBorderWidth/2,mBorderWidth/2,getWidth()-mBorderWidth/2,getHeight()-mBorderWidth/2) ;
        // param1:区域 param2:开始的角度 param3:扫过的角度 
        // param4:圆弧里边是否都是充满颜色 false表示画圆弧时不需要把圆弧区域颜色全部填充 param5: 画笔
        canvas.drawArc(rectF,135,270,false,mOutPaint);
        if (mStepMax == 0) return;

        // 6.2 画内圆：不能写死，因为需要扫角度，使用百分比，让调用者可以从外边传递
        float sweepAngle = (float) mCurrentStep/mStepMax ;
        canvas.drawArc(rectF,135,sweepAngle*270,false,mInnerPaint);

        // 6.3 画文字
        String stepText = mCurrentStep+"" ;
        // 文字区域
        Rect rect = new Rect();
        // 获取文字大小和宽度
        mTextPaint.getTextBounds(stepText,0,stepText.length(),rect);
        // 控件的一半 - 文字区域的一半
        int dx = getWidth()/2-rect.width()/2;

        // 基线baseLine 计算方式
        Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
        int dy = (fontMetricsInt.bottom-fontMetricsInt.top)/2-fontMetricsInt.bottom;
        int baseLine = getHeight()/2+dy;
        canvas.drawText(stepText,dx,baseLine,mTextPaint);
    }


    /**
     * 下边这两个方法目的：让调用者可以在外边调用
     * synchronized：防止多个线程操作
     */
    public synchronized void setMaxStep(int stepMax){
        this.mStepMax = stepMax ;
    }

    /**
     * synchronized：防止多个线程操作
     */
    public synchronized void setCurrentStep(int currentStep){
        this.mCurrentStep = currentStep ;
        // 不断的重新绘制
        invalidate();
    }
}

3>：activity_myqqstepview

<?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"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">


    <com.novate.test.customview.QQStepView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:outerColor="@color/colorPrimary"
        app:innerColor="@color/colorAccent"
        app:borderWidth="20dp"
        app:stepTextSize="30sp"
        app:stepTextColor="@color/colorAccent"
        android:id="@+id/step_view"
        />
</LinearLayout>

4>：MyQQStepViewActivity

/**
 * ================================================
 * Email: 2185134304@qq.com
 * Created by Novate 2018/12/29 8:25
 * Version 1.0
 * Params:
 * Description:    让qq运动步数动起来
 * ================================================
*/

public class MyQQStepViewActivity extends AppCompatActivity {

    private QQStepView mStepView;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_myqqstepview);

        mStepView = (QQStepView) findViewById(R.id.step_view);
        // 设置最大步数
        mStepView.setMaxStep(4000);


        // 属性动画 从0到3000 让运动步数动起来
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0,3000);
        // 动画执行的时间
        valueAnimator.setDuration(1000);
        // 设置差值器
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 只要属性动画发生变化，不断的获取当前value值，然后设置给当前步数
                float animatedValue = (float) animation.getAnimatedValue();
                mStepView.setCurrentStep((int)animatedValue);
            }
        });
        // 开启属性动画
        valueAnimator.start();

    }
}