自定义View - 仿QQ运动步数进度效果

1. 概述

我记得QQ之前是有一个，运动步数的进度效果，今天打开QQ一看发现没有了。具体效果我也不清楚了，我就按照自己大概的印象写一下，这一期我们主要是熟悉Paint画笔的使用：

2. 效果实现分析

2.1：画-背景圆弧
2.2：画-当前进度圆弧
2.3：画-步数文字
2.4：提供一些方法

至于什么onMeasure,onDraw,自定义属性等等我这里就不去介绍了，具体请看这里：
自定义View简介 - onMeasure,onDraw,自定义属性

2.1. 画-背景圆弧

    @Override
    protected void onDraw(Canvas canvas) {
        // 2.画背景大圆弧
        int centerX = mViewWidth / 2;
        int centerY = mViewHeight / 2;
        // 设置圆弧画笔的宽度
        mPaint.setStrokeWidth(mRoundWidth);
        // 设置为 ROUND
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        // 设置画笔颜色
        mPaint.setColor(mRoundColor);
        mPaint.setStyle(Paint.Style.STROKE);
        // 半径
        int radius = (int) (centerX - mRoundWidth);
        RectF oval = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
        // 画背景圆弧
        canvas.drawArc(oval, mStartAngle, mSweepAngle, false, mPaint);
     }    

2.2：画-当前进度圆弧

        // 画进度圆弧
        mPaint.setColor(mProgressColor);
        // 计算当前百分比
        float percent = (float) mProgressStep/mMaxStep;
        // 根据当前百分比计算圆弧扫描的角度
        canvas.drawArc(oval, mStartAngle, percent*mSweepAngle, false, mPaint);

2.3：画-步数文字

        // 重置画笔
        mPaint.reset();
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(mTextSize);
        mPaint.setColor(mTextColor);
        String mStep = ((int)(percent*mMaxStep)) + "";
        // 测量文字的宽高
        Rect textBounds = new Rect();
        mPaint.getTextBounds(mStep, 0, mStep.length(), textBounds);
        int dx = (getWidth() - textBounds.width()) / 2;
        // 获取画笔的FontMetrics
        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
        // 计算文字的基线
        int baseLine = (int) (getHeight() / 2 + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom);
        // 绘制步数文字
        canvas.drawText(mStep, dx, baseLine, mPaint);

2.4. 提供一些方法

    // 设置当前最大步数
    public synchronized void setMaxStep(int maxStep) {
        if (max < 0) {
            throw new IllegalArgumentException("max 不能小于0!");
        }
        this.mMaxStep = maxStep;
    }

    public synchronized int getMaxStep() {
        return mMaxStep;
    }
    // 设置进度
    public synchronized void setProgress(int progress) {
        if (progress < 0) {
            throw new IllegalArgumentException("progress 不能小于0!");
        }
        this.progress = progress;
        // 重新刷新绘制 -> onDraw()
        invalidate();
    }

    public synchronized int getProgress() {
        return progress;
    }

invalidate()为什么会重新调用onDraw()方法？为什么我们不能在子线程更新UI ? 为何不去看看源码

3. 请思考

我记得Hongyang写过一篇打造炫酷的进度条，在慕课网上也有视频讲解，大家可以去看一下，如果你不是很熟悉自定义View，可以自己尝试去实现，效果如下：

58同城数据加载效果，有一部分也是Paint画笔的使用，可以先实现如下效果（一秒钟切换一次造型，不能用图片）：

所有分享大纲：Android进阶之旅 - 自定义View篇

视频讲解地址：http://pan.baidu.com/s/1bpb7zIn