看了幾個輕量級的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 非常非常小 而且實現了這么多動畫效果