Android-儀表盤控制元件仿芝麻信用

apin發表於2018-07-17
Android控制元件

前言

由於專案需要使用到儀表盤圖表，所以就本著一貫的操作流程就來github上面找，結果發現很多圖表或者不是我需要的或者擴充套件性不強，所以就自己動手寫了一個擴充套件性較強的，希望能幫助到有需要的人。（不過本人能力有限，有不足的地方還請見諒）

效果

詳細的使用請點選：Github傳送門

Android-儀表盤控制元件仿芝麻信用

先定個小目標

由於每個公司的UI肯定都有不同的想法，設計出來的效果圖也千奇百怪。所以我一開始的想法是能寫一個基類的儀表盤圖表，不需要懂得太多的自定義View知識也能做出UI所需要的效果。

我就想嘗試著能不能自己寫一個，萬一能幫助到其他人呢。（夢想還是要有的）

所以我就抽取了一個BaseDashboardView類，並實現了三個Style的儀表盤圖表。而這三個儀表盤除去一些畫筆的初始化和引數的設定，繪製的程式碼都在70行內。下面就來看一下如何定義一個自己的儀表盤圖表吧。

然後去做吧

建立一個View然後去繼承 BaseDashboardView 這時需要實現以下方法：


    protected abstract void initView();

    protected abstract void initArcRect(float left, float top, float right, float bottom);

    protected abstract void drawArc(Canvas canvas, float arcStartAngle, float arcSweepAngle);

    protected abstract void drawProgressArc(Canvas canvas, float arcStartAngle, float progressSweepAngle);

    protected abstract void drawText(Canvas canvas, int value, String valueLevel, String currentTime);
    
複製程式碼

然後讓我們來看看每個方法都是什麼用的。

initView() 就是初始化設定，如建立畫筆等。

initArcRect(float left, float top, float right, float bottom) 在我們繪製圓弧的時候可以傳入Rect物件來確定圓弧的繪製範圍，需要這裡就是給我們初始化圓弧的區域的。 如:mRectArc = new RectF(left, top, right, bottom);

drawArc(Canvas canvas, float arcStartAngle, float arcSweepAngle)這是就是開始正式的繪製背景圓弧了，arcStartAngle表示圓弧的起始角度，arcSweepAngle表示圓環一共多少度。我們通過剛才的Rect就可以繪製出一個圓弧如：canvas.drawArc(mRectOuterArc, arcStartAngle, arcSweepAngle, false, mPaintArc);但是要主要畫筆的樣式要設定為Paint.Style.STROKE

drawProgressArc(Canvas canvas, float arcStartAngle, float progressSweepAngle)而這裡是繪製進度圓弧的地方，progressSweepAngle進度的幅度已經在BaseDashboardView中計算好，只需要通過drawArc中的一樣繪製個圓弧就行。

drawText(Canvas canvas, int value, String valueLevel, String currentTime)在這裡可以把文字繪製到你想要他出現的地方就OK拉。資料已經在BaseDashboardView中處理過，直接繪製就可以。

由於很多邏輯的計算和動畫都是在BaseDashboardView中去實現，所以我們只需要實現這幾個方法，然後實現一些繪製的邏輯就可以咯。如果在繪製方面有什麼問題的可以檢視一下3個樣式的DashboardView，如果是對底層的計算有興趣的可以看一下BaseDashboardView。

接下來就去擴充套件

這裡主要說一個方法setCalibration(int[] calibrationNumberText, String[] calibrationBetweenText,int largeCalibrationBetweenNumber)

然後主要說一下calibrationNumberText和calibrationBetweenText引數，他們的初始預設值是 int[]{350, 550, 600, 650, 700, 950}和String[]{"較差", "中等", "良好", "優秀", "極好"} 那這樣其實組成了一個區間 350 較差 550 中等 600 良好 650 優秀 700 極好 950 他的意思為350-550的為較差，其他依次類推，但是每個區間的大小是不一樣的，較差的區間為550-350=200，而中等區間為650-550=50。但是每個區間在圖表上顯示的區域大小確實相同的。那麼在計算進度幅度的時候需要區別計算。

而我的實現方式是首先判斷當前value在第幾個區間中，如當前value=575。那麼通過迴圈的方式可以知道當前value處在550和600之間。然後通過 (575 - 550) / (600 - 550)公式計算出當前值在這個區間內佔的百分比。然後通過每個區間的角度算出當前進度條的幅度。

而除了刻度的擴充套件其實還有很多其他的可配置項，可以通過github進行檢視。

相關文章