源碼有更新：加入動畫，動畫由簡書網(wǎng)友xsfelvis提供
我們都知道自定義View一般有三種直接繼承View、繼承原有的控件對控件的進(jìn)行修改、重新拼裝組合，最后一種主要針對于ViewGroup。具體的怎么做不是本文的所涉及的內(nèi)容（本文是基于第一種方式實現(xiàn)的），還不太了解的請自行查詢相關(guān)資料。這次這篇文章主要給大家?guī)硪粋€高仿QQ健康的自定義View的實現(xiàn)，在介紹的過程中會對涉及到的自定義View相關(guān)知識點進(jìn)行簡單的說明，著重點還是在怎么是實現(xiàn)這個自定義View上。
好了，話不多說。我們來看看QQ健康頁面的這個View吧。下面就是給大家講解這個View怎么去實現(xiàn)。
來分析下這個View，最上面有一個圓弧，圓弧里面包含了一些文字，在圓弧的下面有幾根豎條，很容易會想到這些豎條的長度是根據(jù)每天的步數(shù)來計算的。左下方是自己的頭像，右下方可以點擊查看。
我是使用的第一種方式，了解自定義View的同學(xué)肯定知道，第一種方式一般就是重寫OnDraw方法利用Paint在Canvas中一筆一筆的畫。
這個View的寬和高是有一定比例的。如果我們隨意的給寬高，然后又沒有一定的比例最后渲染出來的View肯定是很混亂的。所以我首先重寫了下onMeasure方法
在初始化方法中有個mRatio是寬高的比例，是我根據(jù)截圖用像素尺亮出來的，這個因人而異，可能每個人都會有不一樣的度量結(jié)果，只要記住這個的作用是用來按照一定的比例繪制這個View的就OK了，這樣做的好處就是不管這個View多大多小里面的內(nèi)容都能夠自適應(yīng)，包括后面可能會會出現(xiàn)的一大堆數(shù)字，看到可能會有點暈，不用去管他。
知識點掃盲之MeasureSpec：他代表一個32位的int值，前兩位代表SpecMode，后30位代表SpecSize。一個MeasureSpec封裝了父布局傳遞給子布局的布局要求，每個MeasureSpec代表了一組寬度和高度的要求。
從代碼中可以看到如果widthMode 是EXACTLY 或者AT_MOST，我們就將父布局傳遞過來的測量寬度作為View的寬度。如果不是這兩種就將前面定義的默認(rèn)的寬度來作為View寬度（這個一般不會用到）。寬度測量完了之后，就按照一定的比例計算出高度，然后就將這個高度作為我們View的高度，這樣做，View的高度都是按照寬度來計算的，這樣做的好處是我們在使用這個View的時候不會導(dǎo)致變形。
值得注意的是測量完了之后一定要調(diào)用 setMeasuredDimension這個方法。
下面我們再來看看onSizeChanged方法，這里是自適應(yīng)的關(guān)鍵
mArcCenterX 和mArcCenterY 是最上面那個圓弧的中心。我們都知道在Android中畫一個圓弧需要一個這個圓弧的外接矩形，mArcRect就是這個外接矩形，mArcWidth和mBarWidth是對應(yīng)畫筆的寬度，在這個方法中我們對這些值作了初始化的工作。如果在構(gòu)造函數(shù)里面取調(diào)用這個方法，寬和高是未知的。
到這里我們的初始化工作做得差不多了。下面來看看最重要的onDraw方法中都干了些什么，下面代碼都是onDraw方法里面的（代碼較長一次性截不完）
我注釋的還是比較詳細(xì)了，步驟也已經(jīng)標(biāo)明了，我相信仔細(xì)看肯定能看懂。對于繪制背景那里我多說兩句，繪制背景的圓角我用的是貝塞爾曲線畫的，當(dāng)然你也可以直接使用canvas.drawRoundRect去畫，但是對于這樣一種需求：一個矩形上面兩個角是圓角，下面的就是正常的方角，canvas.drawRoundRect顯然辦不到，然而貝塞爾曲線可以很容易辦到，當(dāng)然貝塞爾曲線的作用不僅僅是這個，它是非常強大的，只要是你能想到的他基本上都是能辦到。這里有一篇關(guān)于貝塞爾曲線比較好的文章，感興趣的可以去看看。
Android 自定義View高級特效，神奇的貝塞爾曲線
最后我們來看看怎么對右下角的那個查看添加點擊事件吧
其實還是很簡單，我們找到右下角對應(yīng)的一個矩形區(qū)域，然后判斷當(dāng)前點擊的坐標(biāo)在不在這個矩形區(qū)域內(nèi)就可以了。
值得注意的是要記得在初始化方法中加上這句代碼
<code>setLayerType(View.LAYER_TYPE_SOFTWARE, null);</code>
這句是關(guān)閉硬件加速，防止某些4.0的設(shè)備虛線顯示為實線的問題，可以在AndroidManifest.xml時的Application標(biāo)簽加上android:hardwareAccelerated=”false”,這樣整件應(yīng)用都關(guān)閉了硬件加速，虛線可以正常顯示，但是關(guān)閉硬件加速對性能有些影響，所以這里我們只對當(dāng)前這個View關(guān)閉硬件加速就行了。
我們來看看最后我們實現(xiàn)的效果吧。
是不是還是挺不錯的，并且還能自適應(yīng)大小，和QQ的基本上一模一樣。
由于代碼量還是比較大，完整的貼出來比較 ，就不貼到這篇文章中了，需要完整版代碼的請點擊：
完整代碼
