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

前言

因爲項目須要使用到儀表盤圖表，因此就本着一向的操做流程就來github上面找，結果發現不少圖表或者不是我須要的或者擴展性不強，因此就本身動手寫了一個擴展性較強的，但願能幫助到有須要的人。（不過本人能力有限，有不足的地方還請見諒）

效果

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

先定個小目標

因爲每一個公司的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進行查看。