iOS開發之自己封裝一個progressHUD控件


看了幾個輕量級的progress view

我覺得KVNProgress做的最漂亮吧

突然我想為什么我自己不封裝一個控件

然后我研究了一下KVNProgress

KVN簡單的界面是由storyboard搭建的

調用了最簡單的showWithStatus,然后用Reveal查看了一下

然后看了Xcode的結構才發現,Loading View 本來是UIView,但是繼承自UIImageView,所以在Reveal中顯示UIImageView

再來看一下分層結構

父視圖本來是UIView

 

然后我就開始模仿寫一個

我是想用純代碼搭建界面,到時候調用的時候只需要使用一個類文件

 

我們先來看動畫實現部分

剛開始看KVNProgress的時候我還以為他是使用圖片搭建的界面

成功

 

失敗

進度

 

查看了他的代碼才發現,根本沒有圖片,全是用純代碼做的動畫

用的是 貝塞爾曲線 做的。 又學到東西了。

/*其實剛開始我的思路是用圖形上下文畫個圈,然后用一個圓圈動畫的遮罩那部分缺掉的部分

最后可以實現這個動畫 但是封裝起來效果達不到 所以實現我還是用貝塞爾曲線做 */

思路是用貝塞爾曲線畫一個有缺口的圓,然后讓這個有缺口的圓轉動起來

 

創建一個帶缺口的圓

創建一個路徑 Center是中心,radius是半徑,startAngle是開始的角度,endAngle是結束的角度,clockwise的順時針

再把創建好的貝塞爾路徑設置屬性

設置顏色,strokeColor邊緣的顏色,fillColor是中間填充的顏色,lineWidth是線段的粗細

參數我用的都是KVN的參數

然后再添加進去

這時候就創建了一個有缺口的圓了

這時候我們要讓他開始轉動

用CABasicAnimation

animationWithKeyPath:@"transform.rotation.z" 意思是讓Z軸轉動,即X和Y軸不轉

rotationAniamtionDuration是動畫的速度

toValue是變成什么值,repeatCount是重復的次數

 然后把動畫添加到圓圈視圖的layer

還有 我是用代碼創建的界面 所以要記得把圓圈視圖add到父視圖

這樣動畫就做好了

剩下的幾個動畫也是用貝塞爾曲線做到,這里就不詳細說了

 

說下封裝

我覺得一個progress view的基本功能就是 要顯示loading的時候 當然不能少文字說明

還有就是成功和失敗的時候

所以我封裝了這幾種方法

 

然后創建單例

再創建一個方法

讓所有類方法 通過單例調用這個實例方法

這個實例方法的作用就是判斷需要哪一種動畫

接下來就在每個方法里實現動畫就行了

還有KVN沒有提供視圖的一些自定義方法

我這里也舉一些例子

例如我要改變圓圈的線的粗細,或者顏色,控制動畫的速度

這時候我定義類方法

再通過單例賦值就行了

這樣就封裝完了

我看了一下 這一個類才22KB 非常非常小 而且實現了這么多動畫效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM