本文共 4839 字，大约阅读时间需要 16 分钟。

本文只是运用一些自定义View的基础知识，大家如果没有兴趣跟着步骤一步一步来

如果你想对这部分知识进行下复习和梳理，也可以跟着步骤来看下，文中内容若有疏漏，还望不吝赐教。

效果图

分析

自定义View最主要的是梳理清楚绘制的逻辑。弄明白逻辑了，一步一步来，复杂的View也就没有那么复杂了。

绘制步骤整理如下：

1. 绘制一个发光的弧形
2. 绘制刻度和数字
3. 绘制指针阴影
4. 绘制中间黑色圆形背景
5. 绘制表针
6. 绘制深蓝色发光圆形
7. 绘制表盘文字
8. 添加底部控件

实现

View 需要用到发光的效果，我们采用 shader 来实现，那么我们需要首先关闭硬件加速。

// 关闭硬件加速  setLayerType(LAYER_TYPE_SOFTWARE, null);

1. 绘制一个发光的弧形

canvas.translate(getPaddingLeft() + radiusDial, getPaddingTop() + radiusDia  arcPaint.setShader(null);  arcPaint.setStyle(Paint.Style.STROKE);  arcPaint.setAntiAlias(true);  arcPaint.setAlpha(70);  arcPaint.setStyle(Paint.Style.STROKE);  arcPaint.setStrokeWidth(strokeWidthDial);  arcPaint.setShadowLayer(10, 0, 0, Color.parseColor("#FFFFFF"));  arcPaint.setColor(Color.parseColor("#38F9FD"));  canvas.drawArc(mRect, 150, (360 - openAngle), false, arcPaint);

2. 绘制刻度和数字

canvas.rotate(150);  for (int i = 0; i < clockPointNum + 1; i++) {      pointerPaint.setColor(colorDialMiddle);      if (i % 10 == 0) {     //长表针          pointerPaint.setStrokeWidth(3);          canvas.drawLine(radiusDial - DEFAULT_border - strokeWidthDial, 0, radiusDial - strokeWidthDial - dp2px(15), 0, pointerPaint);          drawPointerText(canvas, i);      } else if (i % 5 == 0f) {    //短表针          pointerPaint.setStrokeWidth(2);          canvas.drawLine(radiusDial - DEFAULT_border - strokeWidthDial, 0, radiusDial - strokeWidthDial - dp2px(9), 0, pointerPaint);      }      canvas.rotate((360 - openAngle) / clockPointNum);  }  canvas.rotate(-((180 - openAngle) / 2 + ((360 - openAngle) / clockPointNum)));

/**   * 绘制刻度数字   */    private void drawPointerText(Canvas canvas, int i) {        canvas.save();        pointerPaint.setColor(getResources().getColor(R.color.white));        int currentCenterX = (int) (radiusDial - strokeWidthDial - dp2px(21) - pointerPaint.measureText(String.valueOf(i)) / 2);        canvas.translate(currentCenterX, 0);        canvas.rotate(360 - 150 - ((360 - openAngle) / clockPointNum) * i);        //坐标系总旋转角度为360度        int textBaseLine = (int) (0 + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom);        canvas.drawText(String.valueOf(i + clockMinValue), 0, textBaseLine, pointerPaint);    }

3. 绘制指针阴影

int currentDegree = (int) ((currentValue - clockMinValue) * ((360 - openAngle) / clockPointNum) + 150);  canvas.rotate(currentDegree);  int[] colorSweep = {0xAAFFE9EC, 0x0028E9EC, 0xAA28E9EC};  float[] position = {0f, 0.9f, 1f};  SweepGradient mShader = new SweepGradient(0, 0, colorSweep, position);  arcPaint.setShader(mShader);  arcPaint.setStyle(Paint.Style.STROKE);  arcPaint.setStrokeWidth((float) (radiusDial * 0.4));  arcPaint.clearShadowLayer();  RectF mRect = new RectF((float) (-mRealRadius - DEFAULT_border + radiusDial * 0.2), (float) (-mRealRadius -   DEFAULT_border + radiusDial * 0.2),          (float) (mRealRadius + DEFAULT_border - radiusDial * 0.2), (float) (mRealRadius + DEFAULT_border - radiusDial * 0.2));  canvas.drawArc(mRect, 360 - (currentDegree - 150), (currentDegree - 150), false, arcPaint);

4. 绘制中间黑色圆形背景

canvas.restore();  canvas.translate(getPaddingLeft() + radiusDial, getPaddingTop() + radiusDial);  Paint pointerPaint = new Paint();  pointerPaint.setAntiAlias(true);  pointerPaint.setStyle(Paint.Style.FILL);  pointerPaint.setColor(Color.parseColor("#05002D"));  canvas.drawCircle(0, 0, (float) (radiusDial * 0.6), pointerPaint);

5. 绘制表针

canvas.save();  int currentDegree = (int) ((currentValue - clockMinValue) * ((360 - openAngle) / clockPointNum) + 150);  canvas.rotate(currentDegree);  titlePaint.setColor(Color.WHITE);  titlePaint.setAntiAlias(true);  pointerPath.moveTo(radiusDial - dp2px(12), 0);  pointerPath.lineTo(0, -dp2px(5));  pointerPath.lineTo(-12, 0);  pointerPath.lineTo(0, dp2px(5));  pointerPath.close();  canvas.drawPath(pointerPath, titlePaint);  canvas.save();  canvas.restore();

6. 绘制深蓝色发光圆形

canvas.rotate(0);  canvas.restore();  Paint pointerPaint = new Paint();  pointerPaint.setAntiAlias(true);  pointerPaint.setStyle(Paint.Style.FILL);  pointerPaint.setColor(Color.parseColor("#050D3D"));  pointerPaint.setShadowLayer(15, 0, 0, Color.parseColor("#006EC6"));  canvas.drawCircle(0, 0, (float) (radiusDial * 0.4), pointerPaint);

7. 绘制表盘文字

titlePaint.setColor(Color.WHITE);  titlePaint.setColor(titleDialColor);  titlePaint.setTextSize(titleDialSize);  canvas.drawText(formatData(currentValue), 0, 0, titlePaint);  titlePaint.setColor(Color.parseColor("#38F9FD"));  titlePaint.setTextSize(sp2px(14));  canvas.drawText("(" + dataUnit + ")", 0, dp2px(18), titlePaint);

8. 添加底部控件

这部分代码就比较灵活了，仪表盘主体绘制出来以后，可以在布局文件中增加其它底部控件。并设置相应点击事件等。在此略过不表

#最后

你把你的时间投资在学习上，就意味着你可以收获技能，更有机会增加收入。

在这里分享我的Android学习PDF大全来学习，这份Android学习PDF大全真的包含了方方面面了，内含Java基础知识点、Android基础、Android进阶延伸、算法合集等等

获取方式：关注我看个人介绍，或直接 免费领取

我的这份学习合集，可以有效的帮助大家掌握知识点。

总之也是在这里帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习

转载地址：http://jfibb.baihongyu.com/