自定义View系列（六） 进度条实现

自定义进度条，其实实现并不难，和运动步数的实现差不多。

1.自定义属性先上

<declare-styleable name="ProgressBar">
    <attr name="innerBackground" format="color"/>
    <attr name="outerBackground" format="color"/>
    <attr name="roundWidth" format="dimension"/>
    <attr name="progressTextSize" format="dimension"/>
    <attr name="progressTextColor" format="color"/>
</declare-styleable>

public class ProgressBar extends View {

private int mInnerBackground = Color.RED;
private int mOuterBackground = Color.RED;
private int mRoundWidth = 10;// 10px
private float mProgressTextSize = 15;
private int mProgressTextColor = Color.RED;

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

public ProgressBar(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public ProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    // 获取自定义属性
    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ProgressBar);
    mInnerBackground = array.getColor(R.styleable.ProgressBar_innerBackground, mInnerBackground);
    mOuterBackground = array.getColor(R.styleable.ProgressBar_outerBackground, mOuterBackground);
    mRoundWidth = (int) array.getDimension(R.styleable.ProgressBar_roundWidth, dip2px(10));
    mProgressTextSize = array.getDimensionPixelSize(R.styleable.ProgressBar_progressTextSize,
            sp2px(mProgressTextSize));
    mProgressTextColor = array.getColor(R.styleable.ProgressBar_progressTextColor, mProgressTextColor);

    array.recycle();
}

2.画笔紧跟其后

  private Paint mInnerPaint, mOuterPaint, mTextPaint;

    mInnerPaint = new Paint();
    mInnerPaint.setAntiAlias(true);
    mInnerPaint.setColor(mInnerBackground);
    mInnerPaint.setStrokeWidth(mRoundWidth);
    mInnerPaint.setStyle(Paint.Style.STROKE);

    mOuterPaint = new Paint();
    mOuterPaint.setAntiAlias(true);
    mOuterPaint.setColor(mOuterBackground);
    mOuterPaint.setStrokeWidth(mRoundWidth);
    mOuterPaint.setStyle(Paint.Style.STROKE);

    mTextPaint = new Paint();
    mTextPaint.setAntiAlias(true);
    mTextPaint.setColor(mProgressTextColor);
    mTextPaint.setTextSize(mProgressTextSize);

3.测量

   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    // 只保证是正方形
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
    setMeasuredDimension(Math.min(width, height), Math.min(width, height));
}

4. 先画内圆

    int center = getWidth() / 2;
    canvas.drawCircle(center, center, center - mRoundWidth / 2, mInnerPaint);

5.再画外圆

    RectF rect = new RectF(0 + mRoundWidth / 2, 0 + mRoundWidth / 2,
            getWidth() - mRoundWidth / 2, getHeight() - mRoundWidth / 2);

    if (mProgress == 0) {
        return;
    }
    float percent = (float) mProgress / mMax;
    canvas.drawArc(rect, 0, percent * 360, false, mOuterPaint);

6.画文字

    String text = ((int) (percent * 100)) + "%";
    Rect textBounds = new Rect();
    mTextPaint.getTextBounds(text, 0, text.length(), textBounds);
    int x = getWidth() / 2 - textBounds.width() / 2;

    Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
    int dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
    int baseLineY = getHeight() / 2 + dy;
    canvas.drawText(text, x, baseLineY, mTextPaint);

7.提供方法

public synchronized void setMax(int max) {
    if (max < 0) {

    }
    this.mMax = max;
}

public synchronized void setProgress(int progress) {
    if (progress < 0) {
    }
    this.mProgress = progress;
    // 刷新 invalidate
    invalidate();
}