旋轉圓形進度View

? 看了愛哥的博客有一段時間,終于開始嘗試自己寫一些自定義View,雖然現在的還很菜,但希望有一天能成為愛哥這樣的大神。

? 今天要實現的效果可能比較簡單,首先給出效果圖以及代碼地址,畢竟以實戰為主。代碼地址https://github.com/xueweiyang/DefineView,本篇博客效果圖,有理解錯誤的地方希望各位大神不吝賜教

參考大神博客如下

http://blog.csdn.net/column/details/androidcustomview.html

http://blog.csdn.net/column/details/wingscustomview.html

效果圖

首先,需要至少實現如下構造器


如果不實現帶參數AttributeSet的構造器,當使用此view時,可能會出現無法解析的錯誤

接下來我們觀察view,發現由四周的圓弧和中間的文字構成,繪制圓弧,需要用到canvas的drawArc方法,


文檔截圖

如上圖第一種方法,最低需要api 21,兩種方法之間其他的區別暫時沒有研究,我采用了第二種,它有5個參數,含義分別為:1、繪制的矩形區域,2、初始角度,3、偏移角度,4、不知道怎么解釋,現象是,為true時會畫出中心點到兩邊的直線,為false時則只有圓弧,5、畫筆

這里,有人可能不理解初始角度在哪,以及偏移角度的正負方向。以二維坐標系來說,x軸正軸是0,y軸正軸是-90。然后,看一下畫筆的設置


圓弧除了有顏色的區域,還有中間的間隔,我的實現思路是,繪制一段區域后,跳過一定角度,然后再繪制下一段區域,這里,我們預先定義繪制區域和不繪制區域的比例,以及繪制區域的個數


并簡單計算一下各自的角度


到這里,繪制view的初始狀態,全部是白色的圓弧應該不難。但我們發現,隨著底部seekbar的拖動,百分比改變后,圓弧的顏色會出現好幾種,首先,我們看有兩種顏色該如何實現,這里我們定義一個參數float mCurPer代表當前進度,代碼如下


這里,startDegree代表初始角度,compareDegree表示當前進度所對應的角度,進行startDegree <270的判斷是為了避免重復繪制。同時,在完成進度的區域內繪制一種顏色,未完成區域則繪制白色。這里一共繪制兩種顏色,那么多種顏色該如何實現呢,如下


這里代碼注釋的挺清楚,邏輯也應該不難理解,其中mColors是一組自己定義的顏色,如果想展示的顏色過多會循環使用


至于中間文字的繪制則比較簡單


到這里,基本的頁面實現完成,最后,加上旋轉的功能,旋轉的功能,主要利用Matrix實現,關于矩陣的理解,可以參照愛哥的分析

首先添加觸摸事件


然后根據觸摸點離圓圈中心點的距離計算x,y的旋轉距離


這里mRotateMax是最大距離,自行定義,接著根據計算的xy設置矩陣


最后就是在繪制之前應用矩陣了

此時,在屏幕上移動手指,view就是立體轉動,好了,本篇博客到此畫上句點,下篇再見。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,739評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,634評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,653評論 0 377
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,063評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,835評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,235評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,315評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,459評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,000評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,819評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,004評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,560評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,257評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,676評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,937評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,717評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,003評論 2 374

推薦閱讀更多精彩內容