Android動(dòng)態(tài)顯示百分比的圓形

一、簡(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),而半徑又一樣,那么 綠色部分就突出了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,245評(píng)論 4 61
  • ¥開啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程,因...
    小菜c閱讀 6,524評(píng)論 0 17
  • 我是去年初才開始玩這個(gè)游戲的,本來(lái)一開始我是拒絕的,但幾個(gè)好朋友硬是拉著我玩,美其名曰:朋友一起開黑,這游戲才好玩...
    27b3b51cc2a0閱讀 1,089評(píng)論 5 1
  • 回來(lái)西安一年了,從最初的慌忙失措到現(xiàn)在的穩(wěn)步前進(jìn),原本以為自己的工作生活都已經(jīng)開始往著平靜卻又不乏激情的步調(diào)前行,...
    那片綠閱讀 175評(píng)論 0 1
  • 屋子很多,房子很大,等待拆遷,房子潮濕不堪,這樣真的很好嗎?我崇尚活在當(dāng)下!過(guò)好今天。這樣住的地方實(shí)在是難受,...
    一手王閱讀 432評(píng)論 0 0