? ? ? 最近的項目里碰到一個六邊形的進度條控件,至于為什么說是神奇的,呵呵,因為以前真的沒碰到過這種進度條,有木有,github上三方也找不到,有木有,一臉懵逼感覺不會寫,有木有,就用一個圓不好嘛- -。對于自定義控件這一塊比較薄弱(onMeasure( ), onLayout( ), onDraw( )是什么? 可以吃么)的我來說。萬萬沒想到。。。。。。。。。。。。竟然大致實現了- -。不得不佩服下自己的智商(呵呵。。。。)。
? ? ?這里先給大家展示一下效果:
? ? ?怎么樣?是不是有種動漫里面畫魔法陣的感覺 ?
? ? ?首先先簡單的說下思路,該思路沒有語言限制,可同樣用于IOS,WEB等其他語言的界面開發中,First,你要對三角函數有一定的了解,至于沒有聽過三角函數這個名字的朋友們可以省略以下內容,直接翻到博客底部點擊最下方鏈接下載控件并在需要的時候直接應用到你們的項目中就好。簡要的思路如下圖所示(嘗試了下電腦繪圖,好麻煩- -,請各位讀者原諒我拙劣的畫工)
從上圖中我們可以看到,將六邊形的變成設為 L(這里可以通過控件的寬度來計算),然后我們可以根據這個變長分別算出六邊形六個頂點的坐標,如圖。具體的計算步驟已經寫在上圖。
轉換成代碼如下。這里的寬度可直接通過布局中的xml來設置。在onMeasure( )中實現
接下來就是畫進度條了,我們這里將進度條默認為百分之百的,然后分為六個區間(六邊形有六條邊,對應區間:{[0,100/6),[100/6,100/6 *2),[100/6*2,100/6*3),[100/6*3,100/6*4),[100/6*4,100/6*5),[100/6*5,100]},分別對相應的區間進行進度條的繪制。
我這里舉一個栗子,區間為[100/6*2,100/6*3)其他區間的繪制同理,具體可以參考下圖
然后接下來如何通過Paint在點與點之間畫線我這里就不多做介紹了。
具體的代碼實現如下:
怎么樣,看完本篇博客的你還有沒有表示一臉懵逼,如果懵逼也不要緊。點擊下方鏈接下載控件并在需要的時候直接應用到你們的項目中就好- -