本文只是運用一些自定義View的基礎知識，大家如果沒有興趣跟著步驟一步一步來

效果圖

分析

自定義View最主要的是梳理清楚繪製的邏輯。弄明白邏輯了，一步一步來，複雜的View也就沒有那麼複雜了。

繪製步驟整理如下：

1. 繪製一個發光的弧形
2. 繪製刻度和數字
3. 繪製指針陰影
4. 繪製中間黑色圓形背景
5. 繪製錶針
6. 繪製深藍色發光圓形
7. 繪製錶盤文字
8. 添加底部控件

實現

View 需要用到發光的效果，我們採用 shader 來實現，那麼我們需要首先關閉硬件加速。

<code>// 關閉硬件加速
setLayerType(LAYER_TYPE_SOFTWARE, null);/<code>

1. 繪製一個發光的弧形

<code>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);/<code>

2. 繪製刻度和數字

<code>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)));/<code>

<code>/** 

 * 繪製刻度數字
 */
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);
}
/<code>

3. 繪製指針陰影

<code>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);/<code>

4. 繪製中間黑色圓形背景

<code>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);/<code>

5. 繪製錶針

<code>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();/<code>

6. 繪製深藍色發光圓形

<code>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);/<code>

7. 繪製錶盤文字

<code>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);/<code>

8. 添加底部控件

這部分代碼就比較靈活了，儀表盤主體繪製出來以後，可以在佈局文件中增加其它底部控件。並設置相應點擊事件等。在此略過不表

.最後

附上我的Android核心技術學習大綱

最近不是面試季嘛，再給大家一個福利：【2017-2019字節跳動面試真題解析&簡歷製作PDF模板】

針對字節跳動的面試題整理的，進行了分類，循序漸進，由基礎到深入，由易到簡。

將內容整理成了五個章節、計算機基礎面試題、數據結構和算法面試題、Java面試題、Android面試題、其他擴展面試題、非技術面試題總共五個章節354頁。

每個問題都附上1個標準參考答案，都是反覆摸索消化（真心花了很多時間），覺得寫的比較好的文章作為答案。

來節省大家自己去搜索的時間，把時間用在正確的東西上。。

還整理了全套簡歷製作、春招困惑、HR面試等問題解析參考建議，都是福利分享給大家。

獲取方式：關注+轉發，私信我【字節跳動】領取

閱讀更多 Android01 的文章

關鍵字: 圓形 setColor arcPaint