实现一个简单的计步器功能

废话不多说，直接上效果图

1.自定义步数效果图.gif

相信这个效果大家都不会陌生，作为自定义View的开篇章节，我们先牛刀小试一把。一般情况下，当我们拿到美工或者产品需要我们实现的效果图时，不要急于去写代码，而是应该好好去分析一下到底该如何去实现这个功能，就这个功能而言，我给它拆分为几个部分：

1.底部的总步数条（固定）

2.加载的步数条（变动）

3.对应显示的文字步数

接下来我们就一步一步来看到底怎么做：
（1）首先我们的底部的总步数条颜色不能写死，加载的步数条颜色也不能写死还有步数条宽度的大小也不能写死，除此之外显示的文字步数(字体大小、颜色)也不能写死，所以，我们需要通过自定义属性的方式让用户自己设定。

    <!-- 计步器的自定义样式 -->
    <declare-styleable name="StepView">
        <attr name="step_view_fix_progress_color" format="color"/>
        <attr name="step_view_current_progress_color" format="color"/>
        <attr name="step_view_progress_size" format="dimension"/>
        <attr name="step_view_text_color" format="color"/>
        <attr name="step_view_text_size" format="dimension"/>
    </declare-styleable>

（2）获取自定义样式之后就需要给我们的每个部分设置画笔了

    // 画文字的画笔
    private Paint mTextPaint;

    // 设置最大的步数
    private int mMaxStep;

    // 设置当前的步数
    private int mCurrentStep;


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

        // 省略代码

        // 设置画笔
        mFixProgressPaint = initPaint(mFixedProgressColor);
        mCurrentProgressPaint = initPaint(mCurrentProgressColor);

        mTextPaint = new Paint();
        // 抗锯齿
        mTextPaint.setAntiAlias(true);
        // 防抖动
        mTextPaint.setDither(true);
        // 设置画笔的颜色
        mTextPaint.setColor(mTextColor);
        // 设置画笔的大小
        mTextPaint.setTextSize(mTextSize);

    }

    private Paint initPaint(int color) {
        Paint paint = new Paint();
        // 抗锯齿
        paint.setAntiAlias(true);
        // 防抖动
        paint.setDither(true);
        // 设置画笔的颜色
        paint.setColor(color);
        // 设置画笔的大小
        paint.setStrokeWidth(mProgressSize);
        // 设置画笔的样式
        paint.setStyle(Paint.Style.STROKE);
        // 设置画笔的端的样式
        paint.setStrokeCap(Paint.Cap.ROUND);
        return paint;
    }

（3）在我们的onDraw()方法里面去画了

  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 1.画固定的圆弧
        RectF rectF = new RectF(mProgressSize / 2, mProgressSize / 2, getWidth() - mProgressSize / 2, getHeight() - mProgressSize / 2);
        canvas.drawArc(rectF, 135, 270, false, mFixProgressPaint);
        // 2.画非固定圆弧
        if (mCurrentStep < 1) {
            return;
        }
        canvas.drawArc(rectF, 135, (float) mCurrentStep / mMaxStep * 270, false, mCurrentProgressPaint);
        // 3.画文字
        String value = String.valueOf(mCurrentStep);
        // 3.1计算文字的宽度和高度
        Rect rect = new Rect();
        mTextPaint.getTextBounds(value, 0, value.length(), rect);
        float x = getWidth() / 2 - rect.width() / 2;
        // 计算基线
        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
        float y = getHeight() / 2 + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        canvas.drawText(value, x, y, mTextPaint);
    }

（4）配合我们的属性动画实现动态效果

private fun startStep(){
        step_view.setMaxStep(4000)
        val valueAnimation = ObjectAnimator.ofInt(0,3000)
        valueAnimation.duration = 1000
        valueAnimation.addUpdateListener {
            val value:Int = it.animatedValue as Int
            step_view.setCurrentStep(value)
        }
        valueAnimation.start()
    }

最后贴上完整代码如下：

public class StepView extends View {

    // 总步数对应的颜色
    private int mFixedProgressColor = Color.GRAY;

    // 当前步数对应的颜色
    private int mCurrentProgressColor = Color.YELLOW;

    // 进度条对应的大小
    private int mProgressSize = 5;

    // 字体对应的颜色
    private int mTextColor = Color.YELLOW;

    // 字体对应的大小(像素)
    private int mTextSize = 15;

    // 画总步数的画笔
    private Paint mFixProgressPaint;

    // 画变动步数的画笔
    private Paint mCurrentProgressPaint;

    // 画文字的画笔
    private Paint mTextPaint;

    // 设置最大的步数
    private int mMaxStep;

    // 设置当前的步数
    private int mCurrentStep;


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

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

    public StepView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 先理清一下思路，再来进行编码
        // 整个功能分为3个部分，底部的总步数条（固定）、加载的步数条（变动）、对应显示的文字步数
        // 1.获取自定义属性
        // <1> 底部的总步数条颜色
        // <2> 加载的步数条颜色
        // <3> 步数条宽度
        // <4> 显示的文字步数(字体大小、颜色)
        // 2.通过draw()方法绘制静态效果
        // 3.通过属性动画来实现动态加载

        // 1.获取自定义属性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.StepView);
        mFixedProgressColor = array.getColor(R.styleable.StepView_step_view_fix_progress_color, mFixedProgressColor);
        mCurrentProgressColor = array.getColor(R.styleable.StepView_step_view_current_progress_color, mCurrentProgressColor);
        mProgressSize = array.getDimensionPixelSize(R.styleable.StepView_step_view_progress_size, mProgressSize);
        mTextColor = array.getColor(R.styleable.StepView_step_view_text_color, mTextColor);
        mTextSize = array.getDimensionPixelSize(R.styleable.StepView_step_view_text_size, mTextSize);
        array.recycle();

        // 设置画笔
        mFixProgressPaint = initPaint(mFixedProgressColor);
        mCurrentProgressPaint = initPaint(mCurrentProgressColor);

        mTextPaint = new Paint();
        // 抗锯齿
        mTextPaint.setAntiAlias(true);
        // 防抖动
        mTextPaint.setDither(true);
        // 设置画笔的颜色
        mTextPaint.setColor(mTextColor);
        // 设置画笔的大小
        mTextPaint.setTextSize(mTextSize);

    }

    private Paint initPaint(int color) {
        Paint paint = new Paint();
        // 抗锯齿
        paint.setAntiAlias(true);
        // 防抖动
        paint.setDither(true);
        // 设置画笔的颜色
        paint.setColor(color);
        // 设置画笔的大小
        paint.setStrokeWidth(mProgressSize);
        // 设置画笔的样式
        paint.setStyle(Paint.Style.STROKE);
        // 设置画笔的端的样式
        paint.setStrokeCap(Paint.Cap.ROUND);
        return paint;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 1.画固定的圆弧
        RectF rectF = new RectF(mProgressSize / 2, mProgressSize / 2, getWidth() - mProgressSize / 2, getHeight() - mProgressSize / 2);
        canvas.drawArc(rectF, 135, 270, false, mFixProgressPaint);
        // 2.画非固定圆
        if (mCurrentStep < 1) {
            return;
        }
        canvas.drawArc(rectF, 135, (float) mCurrentStep / mMaxStep * 270, false, mCurrentProgressPaint);
        // 3.画文字
        String value = String.valueOf(mCurrentStep);
        // 3.1计算文字的宽度和高度
        Rect rect = new Rect();
        mTextPaint.getTextBounds(value, 0, value.length(), rect);
        float x = getWidth() / 2 - rect.width() / 2;
        // 计算基线
        Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
        float y = getHeight() / 2 + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        canvas.drawText(value, x, y, mTextPaint);
    }

    /**
     * 设置最大步数值
     *
     * @param maxStep 最大步数值
     */
    public void setMaxStep(int maxStep) {
        this.mMaxStep = maxStep;
    }

    /**
     * 设置当前步数值
     *
     * @param currentStep 当前步数值
     */
    public void setCurrentStep(int currentStep) {
        this.mCurrentStep = currentStep;
        invalidate();
    }
}