本文只是運用一些自定義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);

</pre>

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核心技術學習大綱，獲取相關內容來我的GitHub一起玩耍：

你把你的時間投資在學習上，就意味著你可以收穫技能，更有機會增加收入。

在這裡分享我的Android學習PDF大全來學習，這份Android學習PDF大全真的包含了方方面面了，內含Java基礎知識點、Android基礎、Android進階延伸、演算法合集等等

我的這份學習合集，可以有效的幫助大家掌握知識點。

總之也是在這裡幫助大家學習提升進階，也節省大家在網上搜尋資料的時間來學習，也可以分享給身邊好友一起學習

獲取方式：關注我看個人介紹，或直接  點選我免費領取