一、簡(jiǎn)介。
繼續(xù)Android自定義控件之旅。這次要實(shí)現(xiàn)的一個(gè)組合的圓,即兩部分扇形加起來(lái)就是一個(gè)圓。效果如下:
Paste_Image.png
Paste_Image.png
所謂的動(dòng)態(tài)是指在開始的時(shí)候它可以不斷地顯示它的內(nèi)容,先顯示一部分到全部顯示完,圓的顯示添加了動(dòng)畫的效果,而不是一個(gè)靜態(tài)的圓形。
二、思路和主要的代碼。
1、計(jì)算藍(lán)色扇形和綠色扇形的角度。
根據(jù)傳進(jìn)來(lái)的數(shù)值計(jì)算所占的比例,然后確定它們的角度,這部分比較簡(jiǎn)單就跳過(guò)。
2、根據(jù)扇形的角度來(lái)畫文本。
我就分別取它們的一半角度的來(lái)計(jì)算里面文本的位置。
Paste_Image.png
Paste_Image.png
Paste_Image.png
這部分是畫已使用流量的文本的代碼。根據(jù)它角度的大小來(lái)確定(x,y)坐標(biāo),比較繁瑣。
Paste_Image.png
圓心為坐標(biāo)系的原點(diǎn)。上面要畫的就是“已使用流量、250.0M”這部分。用同樣的方法畫其余的文本。
3、設(shè)置畫圓形的屬性動(dòng)畫。開始值是0,結(jié)束值是360,在onAnimationUpdate回調(diào)方法里可以獲取到當(dāng)前的值,然后重新繪制。
Paste_Image.png
4、把扇形畫出來(lái)。當(dāng)當(dāng)前的角度達(dá)到扇形的角度的時(shí)候就改變畫筆的顏色,這樣兩部分扇形就畫出來(lái)了。
Paste_Image.png
Paste_Image.png
5、封裝并對(duì)外提供接口。
1、提供一個(gè)builder
Paste_Image.png
2、提供設(shè)置控件屬性的方法。
Paste_Image.png
3、用動(dòng)畫來(lái)顯示控件。
Paste_Image.png
4、外部的調(diào)用。傳的參數(shù)就是這個(gè)控件類。
Paste_Image.png
三、總結(jié)。
(1)我覺得這個(gè)控件的難點(diǎn)在于如何讓扇形動(dòng)起來(lái),其實(shí)就是不斷地畫當(dāng)前的角度的扇形,當(dāng)它達(dá)到當(dāng)前扇形的角度時(shí)就變換畫筆的顏色,然后繼續(xù)畫另外一個(gè)扇形。
(2)讓小的扇形突出。我是通過(guò)在要畫綠色部分的扇形時(shí)候,根據(jù)它所占的角度計(jì)算它的圓心坐標(biāo),然后把之前的圓心坐標(biāo)移動(dòng)一下,這樣當(dāng)綠色扇形部分角度比藍(lán)色部分角度小的時(shí)候,因?yàn)樗膱A心比之前的要遠(yuǎn)了一點(diǎn),而半徑又一樣,那么 綠色部分就突出了。