Android自定義View之高仿QQ健康

Selina92S 8年前發布 | 14K 次閱讀 Android開發移動開發

我們都知道自定義View一般有三種直接繼承View、繼承原有的控件對控件的進行修改、重新拼裝組合，最后一種主要針對于ViewGroup。具體的怎么做不是本文的所涉及的內容（本文是基于第一種方式實現的），還不太了解的請自行查詢相關資料。這次這篇文章主要給大家帶來一個高仿QQ健康的自定義View的實現，在介紹的過程中會對涉及到的自定義View相關知識點進行簡單的說明，著重點還是在怎么是實現這個自定義View上。

好了，話不多說。我們來看看QQ健康頁面的這個View吧。下面就是給大家講解這個View怎么去實現。

QQ健康

來分析下這個View，最上面有一個圓弧，圓弧里面包含了一些文字，在圓弧的下面有幾根豎條，很容易會想到這些豎條的長度是根據每天的步數來計算的。左下方是自己的頭像，右下方可以點擊查看。
我是使用的第一種方式，了解自定義View的同學肯定知道，第一種方式一般就是重寫OnDraw方法利用Paint在Canvas中一筆一筆的畫。

這個View的寬和高是有一定比例的。如果我們隨意的給寬高，然后又沒有一定的比例最后渲染出來的View肯定是很混亂的。所以我首先重寫了下onMeasure方法

在初始化方法中有個mRatio是寬高的比例，是我根據截圖用像素尺亮出來的，這個因人而異，可能每個人都會有不一樣的度量結果，只要記住這個的作用是用來按照一定的比例繪制這個View的就OK了，這樣做的好處就是不管這個View多大多小里面的內容都能夠自適應，包括后面可能會會出現的一大堆數字，看到可能會有點暈，不用去管他。

知識點掃盲之MeasureSpec：他代表一個32位的int值，前兩位代表SpecMode，后30位代表SpecSize。一個MeasureSpec封裝了父布局傳遞給子布局的布局要求，每個MeasureSpec代表了一組寬度和高度的要求。

從代碼中可以看到如果widthMode 是EXACTLY 或者AT_MOST，我們就將父布局傳遞過來的測量寬度作為View的寬度。如果不是這兩種就將前面定義的默認的寬度來作為View寬度（這個一般不會用到）。寬度測量完了之后，就按照一定的比例計算出高度，然后就將這個高度作為我們View的高度，這樣做，View的高度都是按照寬度來計算的，這樣做的好處是我們在使用這個View的時候不會導致變形。
值得注意的是測量完了之后一定要調用 setMeasuredDimension這個方法。

下面我們再來看看onSizeChanged方法，這里是自適應的關鍵

mArcCenterX 和mArcCenterY 是最上面那個圓弧的中心。我們都知道在Android中畫一個圓弧需要一個這個圓弧的外接矩形，mArcRect就是這個外接矩形，mArcWidth和mBarWidth是對應畫筆的寬度，在這個方法中我們對這些值作了初始化的工作。如果在構造函數里面取調用這個方法，寬和高是未知的。

到這里我們的初始化工作做得差不多了。下面來看看最重要的onDraw方法中都干了些什么，下面代碼都是onDraw方法里面的（代碼較長一次性截不完）

我注釋的還是比較詳細了，步驟也已經標明了，我相信仔細看肯定能看懂。對于繪制背景那里我多說兩句，繪制背景的圓角我用的是貝塞爾曲線畫的，當然你也可以直接使用canvas.drawRoundRect去畫，但是對于這樣一種需求：一個矩形上面兩個角是圓角，下面的就是正常的方角，canvas.drawRoundRect顯然辦不到，然而貝塞爾曲線可以很容易辦到，當然貝塞爾曲線的作用不僅僅是這個，它是非常強大的，只要是你能想到的他基本上都是能辦到。這里有一篇關于貝塞爾曲線比較好的文章，感興趣的可以去看看。
Android 自定義View高級特效，神奇的貝塞爾曲線

最后我們來看看怎么對右下角的那個查看添加點擊事件吧

其實還是很簡單，我們找到右下角對應的一個矩形區域，然后判斷當前點擊的坐標在不在這個矩形區域內就可以了。

值得注意的是要記得在初始化方法中加上這句代碼
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
這句是關閉硬件加速，防止某些4.0的設備虛線顯示為實線的問題，可以在AndroidManifest.xml時的Application標簽加上android:hardwareAccelerated=”false”,這樣整件應用都關閉了硬件加速，虛線可以正常顯示，但是關閉硬件加速對性能有些影響，所以這里我們只對當前這個View關閉硬件加速就行了。

我們來看看最后我們實現的效果吧。