Android 製作類似支付圓圈和打鉤介面ProgressWheel

標籤：導致   roo   中心   支付   技術   lin   設計   製作   oid   

首先要說明的是，製作圓圈旋轉的效果並不是博主做的，是參照了github上的一個代碼，只是在上面添加了修改，對其最佳化並增加了一個打鉤的動畫。

先來看下效果，1+的手機擷取root許可權真是難，沒法錄屏，只能使用這種截屏產生git的笨辦法，其實運行起來還是很流暢的。

這是代碼github的地址：

git clone https://github.com/LxxCaroline/ProgressWheelView.git

這是圓圈旋轉代碼的github地址：

git clone https://github.com/pnikosis/materialish-progress.git  

我對原作者代碼的修改是

 

1.原作者是在onDraw函數中直接調用invalidate，會導致介面平凡重新整理，特別是當你開啟這個開發人員選項中的設定，再回到應用程式的介面，發現他在頻繁重新整理。老闆給我的建議是每次延遲重新整理，使用handler.sendMessageDelay(Message, DelayMills)，在handler的handleMessage方法中調用invalidate方法，在onDraw函數中發送訊息給handler即可，只要在16ms內重新整理不掉幀不卡頓就好了。

2.打鉤的動畫是我主要的修改，分為兩條直線去畫。下面是我的設計稿，中間小的方框的邊長就是代碼中的tickSize，所以每次繪畫的時候會先去找圓心，然後以圓心為中心去繪製正方形，分別繪製勾的兩條線，先畫短的，畫完短的再開始畫長的。

代碼中都有注釋，大家自己看吧

Android 製作類似支付圓圈和打鉤介面ProgressWheel