這次分享的代碼原型出自于兩年前自己為了應(yīng)聘而寫(xiě)的一個(gè)demo，今年趁著假期抽取成了可以復(fù)用的輪子供大家使用钥飞。目前是第一版百框，僅支持展示SQLite中存儲(chǔ)的數(shù)據(jù)琳要，往后會(huì)支持直接傳入HashMap<String, Integer>類(lèi)型的數(shù)據(jù)并更新到 github 上寡具。開(kāi)發(fā)者也可以根據(jù)現(xiàn)有代碼自行修改展示自己想要展示的數(shù)據(jù)類(lèi)型，難度已經(jīng)不是很大稚补。

一童叠、首先還是簡(jiǎn)單介紹一下實(shí)現(xiàn)邏輯，為了激發(fā)大家的學(xué)習(xí)欲望孔厉，首先pow兩張效果圖：

填充屏幕模式

支持左右滑動(dòng)模式

1）首先拯钻，實(shí)現(xiàn)波浪統(tǒng)計(jì)曲線(xiàn)最大的坑就是如何避免二階貝塞爾曲線(xiàn)在連接的時(shí)候出現(xiàn)彎折。我們都知道撰豺，二階貝塞爾曲線(xiàn)的實(shí)現(xiàn)原理是由兩個(gè)基礎(chǔ)點(diǎn)和一個(gè)控制點(diǎn)實(shí)現(xiàn)波浪連接的粪般，類(lèi)似下圖：

而統(tǒng)計(jì)圖的數(shù)據(jù)則是千變?nèi)f化，所有的點(diǎn)也是隨機(jī)分布污桦，如果我們直接將所有的統(tǒng)計(jì)數(shù)據(jù)描點(diǎn)亩歹，然后依次用二階貝塞爾曲線(xiàn)直接連接，則極有可能出現(xiàn)以下的曲線(xiàn)彎折現(xiàn)象：

因此直接用二階貝塞爾曲線(xiàn)連點(diǎn)的方式是不可取的凡橱，我們需要在已經(jīng)存在的數(shù)據(jù)點(diǎn)之間分別再取中點(diǎn)小作，然后把這些點(diǎn)加入到已經(jīng)存在的數(shù)據(jù)點(diǎn)中，最后依次用貝塞爾曲線(xiàn)連接稼钩，如下圖綠色粗線(xiàn)顾稀，這樣就可以避開(kāi)所有可能的彎折點(diǎn)，實(shí)現(xiàn)順滑的曲線(xiàn)連接：

因此坝撑，我們只需要將獲取到的所有數(shù)據(jù)點(diǎn)取出静秆，再分別求出其中兩點(diǎn)之間的中點(diǎn)坐標(biāo)，然后按順序放入隊(duì)列中巡李，除開(kāi)第一個(gè)和最后一個(gè)點(diǎn)采取lineTo的方式直線(xiàn)連接之外抚笔，其它全部依次用二階貝塞爾曲線(xiàn)相連，即可獲得一條完美的曲線(xiàn)侨拦。

2）繪制統(tǒng)計(jì)圖背景色漸變背景（主要關(guān)注 LinearGradient這個(gè)類(lèi)）：

3）繪制統(tǒng)計(jì)圖漸變背景色頂部遮蓋（上半部分保留純色遮蓋殊橙，曲線(xiàn)以下的部分露出第二步繪制的漸變色背景）：

以上代碼逐行理解也很簡(jiǎn)單，首先創(chuàng)建畫(huà)筆狱从，然后設(shè)置畫(huà)筆為填充模式膨蛮，設(shè)置填充顏色，然后先繪制出統(tǒng)計(jì)曲線(xiàn)的軌跡季研，繪制完成之后敞葛，采用lineTo的方法將統(tǒng)計(jì)曲線(xiàn)和自定義View頂部的兩個(gè)點(diǎn)連接起來(lái)，并調(diào)用close方法封閉训貌，這就行成了一個(gè)純色背景的頂部遮蓋，漸變色背景的統(tǒng)計(jì)圖效果就初步顯示出來(lái)了。

4）最后再用白色的畫(huà)筆在成圖上畫(huà)出白色的統(tǒng)計(jì)曲線(xiàn)递沪，整個(gè)自定義View的效果就算是完成了豺鼻。

二、以下介紹自定義View的使用方式和相關(guān)屬性款慨，著急開(kāi)發(fā)相關(guān)功能的開(kāi)發(fā)者可以直接從 github 上拷貝代碼儒飒，根據(jù)其中已經(jīng)封裝好的相關(guān)屬性迅速實(shí)現(xiàn)自己想要的效果，項(xiàng)目地址：https://github.com/liuchenguangqnm/statisticsView.git

1）屬性介紹：

????? android:background：安卓自帶的背景屬性檩奠，這里代表統(tǒng)計(jì)圖下方日期展示的背景顏色

????? app:path_view_theme_color：曲線(xiàn)統(tǒng)計(jì)圖背景主題顏色

????? app:is_width_match：統(tǒng)計(jì)圖寬度是否剛好填充屏幕桩了，如果設(shè)置為true，則曲線(xiàn)圖寬度和屏幕相等埠戳；如果設(shè)置為false井誉，則曲線(xiàn)圖的寬度會(huì)根據(jù)數(shù)據(jù)量的大小而變化，同時(shí)支持左右滑動(dòng)查看

????? app:is_big_interval_at_bottom_text：用于設(shè)置統(tǒng)計(jì)圖底部的日期是否五日顯示一次整胃。如果設(shè)置為true颗圣，則底部的日期每五天才會(huì)顯示一次，如果設(shè)置為false屁使，則統(tǒng)計(jì)圖底部的日期全部都會(huì)展示出來(lái)

????? app:istatistics_view_height：用于設(shè)置流線(xiàn)統(tǒng)計(jì)圖高度

????? app:date_text_view_height：用于設(shè)置底部日期文本展示的高度

????? app:per_date_width：用于設(shè)置每日數(shù)據(jù)展示所占據(jù)的dp寬度

????? app:date_text_size：用于設(shè)置日期文本的字體大小

2）使用方法：

????? 首先在布局 xml 中添加自定義視圖類(lèi) StatisticsViewGroup在岂，并用HorizontalScrollView包裹。代碼如下：

????? 其次在代碼中設(shè)置需要展示的數(shù)據(jù)（注意：開(kāi)發(fā)者在使用本自定義控件展示不同類(lèi)型的數(shù)據(jù)時(shí)蛮寂，只需改造setSaveDataBase方法里面的代碼就足夠適配所有類(lèi)型的數(shù)據(jù)展示了）：

以上蔽午，完結(jié)撒花，后期會(huì)針對(duì) setSaveDataBase 方法做更多的適配完善酬蹋，方便更多的人使用及老，轉(zhuǎn)載請(qǐng)注明出處 ~