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篇
