1. 概述
我记得QQ之前是有一个，运动步数的进度效果，今天打开QQ一看发现没有了。具体效果我也不清楚了，我就按照自己大概的印象写一下，这一期我们主要是熟悉Paint画笔的使用：
2. 效果实现分析
2.1：画-背景圆弧 2.2：画-当前进度圆弧 2.3：画-步数文字 2.4：提供一些方法
至于什么onMeasure,onDraw,自定义属性等等我这里就不去介绍了，具体请看这里： 自定义View简介 - onMeasure,onDraw,自定义属性
2.1. 画-背景圆弧
@Overrideprotected void onDraw(Canvas canvas) {// 2.画背景大圆弧int centerX = mViewWidth / 2;int centerY = mViewHeight / 2;// 设置圆弧画笔的宽度mPaint.setStrokeWidth(mRoundWidth);// 设置为 ROUNDmPaint.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;// 获取画笔的FontMetricsPaint.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篇
视频讲解地址：/s/1bpb7zIn
