? 看了愛哥的博客有一段時間,終于開始嘗試自己寫一些自定義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就是立體轉動,好了,本篇博客到此畫上句點,下篇再見。