前言:本實(shí)例實(shí)現(xiàn)的是具有進(jìn)度條的按鈕效果巩割。當(dāng)點(diǎn)擊按鈕后裙顽，將在按鈕上以扇形的方式顯示進(jìn)度。在加載的過(guò)程中宣谈，單擊按鈕愈犹，就變?yōu)闀和顟B(tài)，進(jìn)度條也停止闻丑。運(yùn)行效果如下圖:
帶滾動(dòng)條的按鈕.gif
實(shí)現(xiàn)過(guò)程
繪制一個(gè)圓形的進(jìn)度條漩怎，在此進(jìn)度條上放置一個(gè)環(huán)形的按鈕控件，當(dāng)用戶點(diǎn)擊此按鈕控件時(shí)嗦嗡，圓形的進(jìn)度條就會(huì)被加載。具體的實(shí)現(xiàn)步驟如下。
- (1) 創(chuàng)建一個(gè)項(xiàng)目卫袒，命名為"具有進(jìn)度條的按鈕"
- (2) 添加圖片Pause.png和Play.png到創(chuàng)建項(xiàng)目的Images.xcassets文件夾中
- (3) 創(chuàng)建一個(gè)CALayer類的ProgressLayer類齐婴。
-
(4) 打開(kāi)ProgressLayer.h文件，編寫(xiě)代碼矮冬，實(shí)現(xiàn)屬性聲明谈宛。程序代碼如下:
- (5) 打開(kāi)ProgressLayer.m文件，編寫(xiě)代碼欢伏。對(duì)進(jìn)度條的圖層進(jìn)行初始化設(shè)置及繪制入挣。添加 initWithLayer: 方法，實(shí)現(xiàn)進(jìn)度條的圖層初始化硝拧。程序代碼如下:
添加 drawInContext: 方法径筏，對(duì)進(jìn)度條繪制。程序代碼如下:
- (6) 創(chuàng)建一個(gè)基于UIView類的ProgressView類障陶。在此類中沒(méi)有任何繪圖滋恬，他的工作就是在可視界面中放置ProgressLayer圖層。
-
(7) 打開(kāi)ProgressView.h文件抱究，編寫(xiě)代碼實(shí)現(xiàn)頭文件恢氯、屬性以及方法類的聲明。程序代碼如下:
- (8) 打開(kāi)PressressView.m文件，編寫(xiě)代碼勋拟。實(shí)現(xiàn)將繪制的進(jìn)度條放到可視界面中勋磕，使用方法如下表:
initVars 方法，實(shí)現(xiàn)對(duì)進(jìn)度條的屬性進(jìn)行設(shè)置敢靡。程序代碼如下:
- (9) 創(chuàng)建一個(gè)基于NSObject類的ProgressPlay類挂滓。
-
(10) 打開(kāi)ProgressPlay.h文件，編寫(xiě)代碼啸胧，實(shí)現(xiàn)宏定義赶站，協(xié)議及屬性，方法和對(duì)象聲明纺念，程序代碼如下:
-
(11) 打開(kāi)ProgressPlay.m 編寫(xiě)代碼
-
(12) 打開(kāi)ViewController.m編寫(xiě)代碼
-
(13) 設(shè)計(jì)界面
- (14) 打開(kāi)ViewController.m編寫(xiě)代碼
Demo地址:https://github.com/RenZhengYang/progressBtn.git
