實(shí)習(xí)一了段時(shí)間了椎木,終于有活干了……
然鵝……
我需要做一個(gè)折線(xiàn)圖控件,我tm之前從來(lái)沒(méi)做任何過(guò)復(fù)雜程度超過(guò)矩形的控件博烂,你現(xiàn)在讓我做一個(gè)折線(xiàn)圖O阕怠!G堇椤(手動(dòng)狗頭)
最后只能先去網(wǎng)上看看大神怎么寫(xiě)的畜伐,模仿著花了一天多終于把控件寫(xiě)出來(lái)了。
先上圖:
效果圖.jpg
其實(shí)完成之后想想也挺簡(jiǎn)單躺率,以下是思路:
首先設(shè)定初始化變量:
- 首先重寫(xiě)onMeasure()獲取控件大小width和height玛界,并且給出默認(rèn)大小悼吱;
- 確定繪制起點(diǎn)慎框,也就相當(dāng)于原點(diǎn)(startpointX,startpointY),圖中的所有線(xiàn)段后添、刻度包括文字的位置都是基于這個(gè)原點(diǎn)的笨枯;
- 通過(guò)控件width和height以及XY軸的刻度數(shù)量來(lái)設(shè)置X軸和Y軸的刻度單位長(zhǎng)度Xscale和Yscale,進(jìn)而獲得XY軸的總長(zhǎng)度xLength和yLength遇西;
- 初始化各種畫(huà)筆馅精,建議將畫(huà)坐標(biāo)軸的筆、畫(huà)數(shù)據(jù)線(xiàn)的筆粱檀、畫(huà)坐標(biāo)刻度的筆分開(kāi)
開(kāi)始繪制:
- 初始化這些變量后就可以開(kāi)始繪制:
1.繪制XY軸
2.繪制XY軸刻度
3.根據(jù)轉(zhuǎn)折點(diǎn)坐標(biāo)一段一段畫(huà)出折線(xiàn)
需要注意的點(diǎn):
- 可以用二維數(shù)組來(lái)存儲(chǔ)轉(zhuǎn)折點(diǎn)坐標(biāo)(當(dāng)然也可以用一維數(shù)組)
- 用rect和paint的getTextBounds()獲取字符串的寬高洲敢,便于定位刻度位置;
- 對(duì)于陰影可以用path來(lái)畫(huà),要用畫(huà)筆的FILL模式
- 對(duì)于點(diǎn)擊事件可重寫(xiě)onTouchEvent()來(lái)獲取觸摸位置touchX和touchY茄蚯,然后遍歷坐標(biāo)數(shù)組中的坐標(biāo)確定屬于哪個(gè)轉(zhuǎn)折點(diǎn)的點(diǎn)擊范圍压彭,觸發(fā)事件称近;
- 若想要繪制虛線(xiàn),可以用paint的pathEffect屬性需要線(xiàn)關(guān)閉配置文件中當(dāng)前activity的hardwareAccelerated屬性
總結(jié):再?gòu)?fù)雜的控件也都是一點(diǎn)一點(diǎn)畫(huà)出來(lái)的哮塞,有了思路之后,一點(diǎn)一點(diǎn)做就一定能做出來(lái)凳谦,剛開(kāi)始的時(shí)候肯定錯(cuò)誤會(huì)比較多忆畅,但是你把錯(cuò)誤都試完了自然就只剩下成功的辦法了!
以下是這個(gè)項(xiàng)目地址尸执,如果能幫到你家凯,一定賞我一個(gè)star啊23333333……
項(xiàng)目地址https://github.com/No-dust-in-heart/MyCustomChart.git