在項目開發中,我們經常會遇到這么一種情況:App中某些原生控件滿足不了我們的需求,所以這時候我們需要自定義來讓控件具有自己公司產品的風格.在大公司中,有很多原生控件都是被封裝過的,這樣大家在用的時候直接用就好了.自定義控件其實是一件一勞永逸的事情,很好的體現了封裝思想.在做公司的項目中遇到一個經常遇到情況,用戶更換頭像彈出ActionSheet,但是設計效果和原生的又相差較大,所以我選擇自定義封裝,借這個需求,我簡述一下自定義控件的一個過程.首先看下效果圖:
樣式一:
樣式二:
樣式三:
系統自帶ActionSheet
其實個人感覺還是不錯的,無奈與設計師風格不同,所以咱就換唄...
1.實現actionSheet效果選用什么作為載體?
要實現ActionSheet樣式并不難,剛開始想來好幾種控件實現形式,比如可以用UIView結合UIButton來實現,也可以用TableView這個最常用的表視圖來實現.比較這兩者發現,UITableView可以根據其代理實現不同數量的Sheet單元格,而且還有cell的selecte方法,對于每個sheet單元格的復雜樣式,我們還可以通過自定義cell來實現,相比較Button不僅省去了動態創建Button數量的開銷,而且系統封裝性和可擴展性更好.所以選用tableView是一個比較好的選擇.
2.如何封裝提高復用性?
提高復用性這一步對于當前這個ActionSheet用TableView實現來說很簡單,因為UITableView系統本身就給我自帶了很多代理方法,通過代理方法我們可以控制創建Sheet的分區數量以及每個分區內sheet的單元格數量.
但是作為一個自定義控件,特別是github上好的一些第三方,不僅在功能上有很大的實用性,而且每個功能的使用上也是很簡便,對我們來說使用越簡單,說明封裝性越好,在這里我個人覺得復用性的東西就是在一些模塊高度封裝的基礎之上的多次代碼延伸,拿這個ActionSheet來說,我最終希望的是當別人看到我這個控件之后,只需要關心你自己的業務需求,比如需要創建什么樣式,需要創建多少個sheet單元格,關心這些就夠了,所以我暴露給你的就是對應的給你一個創建樣式,給你一個創建多少個的方法就可以了.當然這樣也有缺點,封裝性越好,別人再用的時候再去擴展性就越差,所以,在自定義一個控件的時候要盡可能多考慮到各種需求來提高你封裝的代碼適應性.
3.確定思路
使用UITableView+自定義Cell方式,根據TableView的不同代理方法控制ActionSheet的單元格數量以及頭部及尾部分區的樣式.
實現
創建TableView,在此我是將TableView添加在View上
實現TableView相關代理方法
自定義TableViewCell樣式,并實現不同ActionSheet風格
測試
這一步到不是有什么技術含量,我寫在這里也是為了還原實現這一個Demo的思路,但是這一步其實也很重要,因為測試之后才能知道自己的程序寫的怎么樣,是否可行,這一步直接會影響到后續的優化.我關注的點是:
對以上關注的點來看,我當時寫完之后記錄是這樣的:
優化
通過上述測試之后,我把遇到的問題都列出來,然后一一進行優化.
1.功能單一,擴展性不高
通過上面的截圖能看出來,我希望這個ActionSheet可以自定義不同的樣式,比如頭部和底部字體大小,顏色,高度;單元格字體大小,顏色,背景顏色以及行高,還有單元格不同的樣式,是只需要文字還是需要圖標加文字.這些應當提供給用戶做更多的選擇.但是這些樣式并不是剛需,所以可以作為額外代碼配置.可以單獨設置某一項,也可以一項都不設置,那就會以默認樣式來展示.通過屬性方式提供給用戶配置更多樣式:
2.使用起來不方便,初始化代碼復雜,實現功能點代碼過于分散.
對于一個基本控件的初始化,蘋果API給了我們很好的實例,創建時我們最好把這個控件最基本的需求放在初始化方法里,比如創建一個view 我們可以使用
UIView *view = [[UIView alloc] init];
也可以使用
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
這兩種方法都是可以的,但是像TableView創建時,我們使用的
UITableView *table = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 0, 0) style:(UITableViewStyle)]
這個方法會帶有一個style參數,這時我們就可以很方便快速的創建一個tableView的實例,但是像tableView的backgroundColor這樣的參數我們就不會放在初始化方法里.對于一個ActionSheet的控件,我將標題,單元格標題,取消按鈕標題以及代理作為初始化方法需要的參數,最終的初始化方法如下:
3.實現同樣的功能,是否有更好的方法?
這個問題可以通過實現過程中遇到的問題相結合說明,Demo中有一個設置圓角的屬性,通過設置圓角可以實現和蘋果官方提供的ActionSheet類似的風格,當時這個sheet單元格第一個和最后一個都是半邊圓角,但是中間沒有圓角的樣式,我想過要不要通過判斷樣式用背景圖片來實現,但是仔細一想這樣還需要借助美工切圖,在性能差不多的情況下盡量不依賴美工實現我覺得比較可取,所以我又采用了使用貝塞爾曲線定向切圓角的方法來實現.
總結
通過實現這一個ActionSheet,從剛開始想,到功能草草實現再到優化,基本上涵蓋了我們自定義控件的一個流程,雖然這只是一個很簡單的Demo,但是即使我們去開發自己的SDK,過程也是類似的,我們平時大部分情況下往往忽略了優化,其實優化這一步真的很重要,不單單是對你整個思路的一個整合提高,更是減少了我們后續改Bug的幾率.
尾巴
之前在簡書上看到了很多有關技術的文章,大家對技術文章的評論也都是褒貶不一,有的文章寫的很好,大家都大肆贊揚,有的文章寫的很初級,都覺得沒有什么價值.這都對,但是我覺得出發點是好的,希望能將自己的心得與大家分享,也希望能聽聽大家的高見,最重要的是希望自己能進步,能與大家一起進步,從一個菜鳥變成大神,希望大家都能成為一名開發工程師而不是單單的做一名碼農.
Demo鏈接:
https://github.com/iosweihui/WHActionSheetExample
新聞熱點
疑難解答
