自定义View（1）--QQ运动计步器

无图无真像:

弧度为270
弧度为360
在我们画一个图形之前，我们需要思考，我们先要解析他的步骤，然后根据步骤一步一步来完成。
思考：我们绘制View的一般基本流程为:

1.根据我们的需要，是需要new出来还是在布局文件里面添加，从而得到相应的构造方法。
2.我们需要什么属性？
3.我们是否需要测量？
4.如果是viewGroup我们需要是否要通过onLayout方法来摆放childView的位置？
5.调用onDraw()的时候先画什么，在画什么?然后调用相应的API完成相应的步骤即可。
6.性能优化。

我们从这个基本流程出发

1. 我们希望这个view能够new出来，也能够在布局文件里面添加使用,所以构造函数如下:

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

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

    public QQSportStepView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        
    }

2.我们需要什么属性？在这个view里面，我想实现的是希望其他人可以自己设置文字颜色，线条宽度，弧度大小等等，所以我们在att里面定义:
<declare-styleable name="QQSportStep">
<attr name="bottomColor" format="color" />
<attr name="topColor" format="color" />
<attr name="textColor" format="color" />
<attr name="maxStepNum" format="integer" />
<attr name="currentStepNum" format="integer" />
<attr name="textSize" format="dimension" />
<attr name="circleRadio" format="dimension" />
<attr name="circleStrokeWidth" format="dimension" />
<attr name="arcAngle" format="float" />
</declare-styleable>

并且在初始化的时候解析出来：

    private int mBottomColor;//底层圆的颜色
    private int mTopColor;//顶层圆的颜色
    private int mTextColor;//文字颜色

    private int mMaxStepNum;//最大步数
    private int mCurrentStepNum;//当前步数

    private int mTextSize;//文字大小
    private int mCircleRadio;//圆的半径
    private int mCircleStrokeWidth;//圆线条的宽度

    private float mArcAngle;//弧度大小
    private float mStartAngle;//通过幅度计算出开始的角度位置

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.QQSportStep);
        mBottomColor = ta.getColor(R.styleable.QQSportStep_bottomColor, Color.BLUE);
        mTopColor = ta.getColor(R.styleable.QQSportStep_topColor, Color.RED);
        mTextColor = ta.getColor(R.styleable.QQSportStep_textColor, Color.RED);
        mMaxStepNum = ta.getInteger(R.styleable.QQSportStep_maxStepNum, 0);
        mCurrentStepNum = ta.getInteger(R.styleable.QQSportStep_currentStepNum, 0);
        mTextSize = ta.getDimensionPixelSize(R.styleable.QQSportStep_textSize, DisplayUtil.sp2px(context, 17));
        mCircleRadio = ta.getDimensionPixelSize(R.styleable.QQSportStep_circleRadio, DisplayUtil.dip2px(context, 100));
        mArcAngle = ta.getFloat(R.styleable.QQSportStep_arcAngle, 270.0f);
        if (mArcAngle > 360.0f || mArcAngle < -360.0f)
            mArcAngle = 360.0f;

        mCircleStrokeWidth = ta.getDimensionPixelOffset(R.styleable.QQSportStep_circleStrokeWidth, DisplayUtil.dip2px(context, 5));
        ta.recycle();
    }

3.我们是否需要测量？因为这个view使用的时候一般是写好的固定的大小，所以不必要测量，所以我就没重写onMeasure方法
4.因为这是个view，没有childView，所以不用重写onLayout方法
5.解析步骤：我将这个view解析为三个步骤

1.画底部的圆弧
2.画顶部的圆弧
3.画文字

然后重写onDraw
画底部的圆弧：

       if (mRectF == null) {
            int centerX = getWidth() / 2;
            int centerY = getHeight() / 2;
            mRectF = new RectF(centerX - mCircleRadio, centerY   mCircleRadio, centerX + mCircleRadio, centerY + mCircleRadio);
        }

        //1.画底部的圆
        float gapAngle = mArcAngle - 180.0f;
        if (mArcAngle >= 0) {//大于0表示在上方
            mStartAngle = 180.0f - gapAngle / 2;
        } else {//小于0表示在下方
            mStartAngle = -gapAngle / 2;
        }
        canvas.drawArc(mRectF, mStartAngle, mArcAngle, false, mBottomPaint);

画顶部的圆弧

      //2.画顶部的圆弧
        float currentAngle = (float) mCurrentStepNum / mMaxStepNum * mArcAngle;
        canvas.drawArc(mRectF, mStartAngle, currentAngle, false, mTopPaint);

        if (mMaxStepNum <= 0)
            return;

画文字

String step = String.valueOf(mCurrentStepNum);
        int dx = (getWidth() - DisplayUtil.getTextWidth(step, mTextPaint)) / 2;
        int baseLine = getHeight() / 2 + DisplayUtil.getTextBaseLine(mTextPaint);
        // 绘制步数文字
        canvas.drawText(step, dx, baseLine, mTextPaint);

5.性能优化(这一步很重要，请不要忽略它)
我们现在已经可以在手机屏幕上呈现一个静态的view了，但是我们要让他动起来，这里有两种方式，一种是在view内部写实现，一种是在view外部实现，为了降低耦合，我们最好是将动画实现的效果从外部实现。在动画的时候，一定是View不停的调用onDraw方法重绘，所以我们将重复的操作提取出来，一次就行了，不用每一次都在执行，比如：画笔初始化、一些计算等,这样能够降低gpu的消耗，当然如果实现的效果比较复杂的画，可以使用双缓冲的绘图方式来牺牲内存来换取时间，这样gpu就不会起伏太大。

最后我们在外部使用ValueAnimator来实现动画:

        int maxStepNun = 100000;
        qqSportStepView.setMaxStepNum(maxStepNun);
        ValueAnimator valueAnimator = new ValueAnimator();
        valueAnimator.setDuration(2000);
        valueAnimator.setIntValues(0, maxStepNun);
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int value = (int) animation.getAnimatedValue();
                qqSportStepView.setCurrentStepNum(value);
            }
        });
        valueAnimator.start();

总结：我们在做自定义一个view的时候，一定要先理清楚思路，我们要实现什么效果？我们要达到什么目的？然后在解析相应的步骤，最后调用相关的api一步步完成即可。
参考:自定义View - 仿QQ运动步数进度效果

本文源码下载地址:
https://github.com/ChinaZeng/CustomView