Android自定義View之高仿QQ健康

我們都知道自定義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關閉硬體加速就行了。

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

是不是還是挺不錯的，並且還能自適應大小，和QQ的基本上一模一樣。

由於程式碼量還是比較大，完整的貼出來比較 ，就不貼到這篇文章中了，需要完整版程式碼的請點選：
完整程式碼