前言:本實例實現的是具有進度條的按鈕效果。當點擊按鈕后,將在按鈕上以扇形的方式顯示進度。在加載的過程中,單擊按鈕,就變為暫停狀態,進度條也停止。運行效果如下圖:
帶滾動條的按鈕.gif
實現過程
繪制一個圓形的進度條,在此進度條上放置一個環形的按鈕控件,當用戶點擊此按鈕控件時,圓形的進度條就會被加載。具體的實現步驟如下。
- (1) 創建一個項目,命名為"具有進度條的按鈕"
- (2) 添加圖片Pause.png和Play.png到創建項目的Images.xcassets文件夾中
- (3) 創建一個CALayer類的ProgressLayer類。
-
(4) 打開ProgressLayer.h文件,編寫代碼,實現屬性聲明。程序代碼如下:
- (5) 打開ProgressLayer.m文件,編寫代碼。對進度條的圖層進行初始化設置及繪制。添加 initWithLayer: 方法,實現進度條的圖層初始化。程序代碼如下:
添加 drawInContext: 方法,對進度條繪制。程序代碼如下:
- (6) 創建一個基于UIView類的ProgressView類。在此類中沒有任何繪圖,他的工作就是在可視界面中放置ProgressLayer圖層。
-
(7) 打開ProgressView.h文件,編寫代碼實現頭文件、屬性以及方法類的聲明。程序代碼如下:
- (8) 打開PressressView.m文件,編寫代碼。實現將繪制的進度條放到可視界面中,使用方法如下表:
initVars 方法,實現對進度條的屬性進行設置。程序代碼如下:
- (9) 創建一個基于NSObject類的ProgressPlay類。
-
(10) 打開ProgressPlay.h文件,編寫代碼,實現宏定義,協議及屬性,方法和對象聲明,程序代碼如下:
-
(11) 打開ProgressPlay.m 編寫代碼
-
(12) 打開ViewController.m編寫代碼
-
(13) 設計界面
- (14) 打開ViewController.m編寫代碼
Demo地址:https://github.com/RenZhengYang/progressBtn.git