先上個(gè)效果圖（畫塊餅）嘹屯，讓你有耐心看完下面內(nèi)容。
網(wǎng)上已經(jīng)有不少人，把類似的效果做出來(lái)了衣迷。我就把自己做出這個(gè)效果的思路寫出來(lái)，希望對(duì)想對(duì)自定義 View 有更深理解的朋友有幫助酱酬。
先作一個(gè)草圖壶谒，打開(kāi) Windows 自帶的“畫圖”軟件，OS X 系統(tǒng)的就找個(gè)類似的軟件吧膳沽。先想好汗菜，再來(lái)畫個(gè)草圖。我畫的草圖如下：
看到這挑社，可能有人有疑問(wèn)了陨界，寫自定義 View 怎么不寫代碼啊，我是來(lái)看代碼的滔灶，最好把完整代碼貼出來(lái)普碎，畫這些圖有 * 用啊。有的高手能夠在腦海里把很復(fù)雜的自定義 View 想象出來(lái)录平。為了說(shuō)服你最好畫一畫圖麻车，我在這里簡(jiǎn)單說(shuō)幾句，個(gè)人認(rèn)為畫圖是個(gè)重要的步驟斗这，能事半功倍动猬。想法是代碼的靈魂，先想好想法表箭，再去寫代碼就容易了赁咙，類似于“胸中有文章，下筆如涌泉”免钻。假如你是新手階段彼水，對(duì)著別人的代碼敲可以有進(jìn)步，但如果你一直都是對(duì)著別人的代碼敲然后敲成一個(gè)項(xiàng)目的极舔，你自己深想一下凤覆，有沒(méi)有前途？畫了圖之后拆魏，你的思維就被解放了盯桦，不會(huì)深陷于文字之中，還可能激發(fā)出新的想法渤刃，你就會(huì)想辦法實(shí)現(xiàn)它拥峦。如果你沒(méi)嘗試過(guò)的話，可以試一試卖子，頂多就是半個(gè)小時(shí)的時(shí)間略号，如果你有特別深刻的體驗(yàn)，那恭喜你學(xué)會(huì)了一種新方式；如果沒(méi)有玄柠，你只是進(jìn)行了一次風(fēng)險(xiǎn)不大的嘗試氛琢，人生的驚喜就在于新的嘗試。
看著你畫的草圖随闪，我們可以看到屏幕寬度是已知的，設(shè)置大格子的數(shù)目后骚勘，大格子的寬度也就確定了铐伴。這個(gè)時(shí)候有思緒了，需要橫縱兩個(gè)方向的格子數(shù)量俏讹。來(lái)設(shè)置兩個(gè)全局變量：
horizontalBigGirdNum 為橫向的線当宴，即縱向大格子的數(shù)量。verticalBigGirdNum 為縱向的線泽疆，即橫向大格子的數(shù)量户矢。
在 XML 文件中使用：
在 xml 中寬 360 dp( match_parent )，高 270 dp殉疼，也就是 3 : 4 的關(guān)系梯浪。
horizontalBigGirdNum = 6，verticalBigGirdNum = 8瓢娜，橫向八個(gè)格子挂洛，縱向六個(gè)格子，這樣劃分比較科學(xué)眠砾。
正式開(kāi)始寫代碼虏劲。首先初始化畫筆。
在 onSizeChanged() 方法調(diào)用后褒颈，View 的寬高也就確定了柒巫。我們可以在這個(gè)方法里面來(lái)確定每個(gè)大格子的寬度。
在 onDraw() 方法中進(jìn)行繪畫谷丸。
將畫網(wǎng)格寫在一個(gè)方法中堡掏，并設(shè)置標(biāo)志位，這樣可以設(shè)置一個(gè) public 方法來(lái)設(shè)置是否畫網(wǎng)格淤井。
畫網(wǎng)格的方法：
到這里布疼，網(wǎng)格就出來(lái)了。
接下來(lái)就是重點(diǎn)币狠，畫心電圖了游两。
畫草圖。
分析：一條這樣的線我們可以用 Path 類來(lái)畫漩绵，畫筆 Paint的類型記得設(shè)為 Paint.Style.STROKE（不然會(huì)很難看）贱案。
沒(méi)有數(shù)據(jù)是出不了效果的，我們來(lái)生成一些模擬的數(shù)據(jù)。
如果你需要將真實(shí)的心電圖數(shù)據(jù)（比如說(shuō)從傳感器通過(guò)藍(lán)牙傳送過(guò)來(lái)的）放進(jìn)來(lái)的話宝踪，只要設(shè)置一個(gè) public 方法從外面?zhèn)鲄?shù)進(jìn)來(lái)就好了侨糟。
到了這里，軌跡就能畫出來(lái)了瘩燥。但是秕重，它不能像真實(shí)心電圖那樣將心電軌跡慢慢呈現(xiàn)出來(lái)，而是一下子就顯示出來(lái)了厉膀。
我們可以加個(gè)延時(shí)溶耘，將心電圖的點(diǎn)一個(gè)一個(gè)慢慢地連接起來(lái)。讓我來(lái)做個(gè)比喻服鹅。我們都玩過(guò)貪吃蛇的游戲凳兵，每個(gè)蛇要吃的點(diǎn)就是數(shù)據(jù)源的坐標(biāo)，沒(méi)加延時(shí)情況下企软，貪吃蛇的速度很快庐扫，我們一眨眼的瞬間它就吃完了，我們就馬上看到了整體曲線仗哨，而加了延時(shí)后形庭，貪吃蛇的速度就慢了，它慢慢地經(jīng)過(guò)點(diǎn)然后吃掉變長(zhǎng)藻治，我們也就看到了軌跡形成的過(guò)程碘勉。
代碼實(shí)現(xiàn)如下：
增加延時(shí)，并且使上面的代碼持續(xù)地執(zhí)行桩卵。
項(xiàng)目代碼：
完整代碼
(用 AS 的話太大了验靡，還是用 Eclipse 的項(xiàng)目吧)
到此，心電圖就基本完成了雏节。這只是一個(gè)簡(jiǎn)單的繪畫胜嗓，要想做的更好，還有許多事情要做钩乍，比如說(shuō)封裝入庫(kù)等辞州。如果你是一個(gè)想練習(xí)自定義 View 的初學(xué)者，我想這篇文章會(huì)對(duì)你有所啟發(fā)寥粹。
