導讀
按鈕是應用中最常見的,最基本的一個控制元件。
按鈕的樣式多種多樣，系統預設樣式為左右結構，圖片在左邊，文字在右邊。系統按鈕完全無法滿足開發的需求，我們只能自己定製出想要的樣式。在這裡分享一個自定義按鈕，文字圖片位置隨意定製的demo給大家。原始碼地址：https://github.com/HelloYeah/YLButton
歡迎Star，贈人玫瑰，手有餘香！！
酷我音樂中的部分按鈕
- 圖片文字,上下左右，C2 * C2 = 4,文字在圖片內部的按鈕，在酷我音樂中沒找到，但實際上也是有的，光佈局樣式至少有5種。每種佈局樣式，文字圖片大小尺寸位置也不盡相同。
實現方法
重寫下面兩個方法，返回正確的佈局即可。
|
1 2 |
- (CGRect)titleRectForContentRect:(CGRect)contentRect; - (CGRect)imageRectForContentRect:(CGRect)contentRect; |
雖然可以實現，每個按鈕都重寫一遍，一個專案中那需要自定義多個按鈕，每個都算一下佈局。這是有多無聊和痛苦，有什麼好的辦法可以一勞永逸，適用所有的樣式嗎？答案是肯定的！
先上效果圖
自定義按鈕.gif
外界呼叫
1.xib建立
2.純程式碼建立
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//左右結構，圖片在左邊，文字在右邊。 { YLButton * searchBtn = [YLButton buttonWithType:UIButtonTypeCustom]; [searchBtn setImage:[UIImage imageNamed:@"search"] forState:UIControlStateNormal]; [searchBtn setTitle:@"搜尋按鈕圖片在左邊" forState:UIControlStateNormal]; searchBtn.titleLabel.font = [UIFont systemFontOfSize:13]; [searchBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; [searchBtn setTitleColor:[UIColor orangeColor] forState:UIControlStateHighlighted]; searchBtn.imageRect = CGRectMake(10, 10, 20, 20); searchBtn.titleRect = CGRectMake(35, 10, 120, 20); [self.view addSubview:searchBtn]; searchBtn.frame = CGRectMake(SCREEN_WIDTH * 0.5 - 80, 250, 160, 40); searchBtn.backgroundColor = [UIColor colorWithRed:255/255.0 green:242/255.0 blue:210/255.0 alpha:1]; } |
實現原理
1.先看.h檔案
|
1 2 3 4 5 6 |
#import @interface YLButton : UIButton @property (nonatomic,assign) CGRect titleRect; @property (nonatomic,assign) CGRect imageRect; @end |
2.實現.m檔案
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@implementation YLButton - (CGRect)titleRectForContentRect:(CGRect)contentRect{ if (!CGRectIsEmpty(self.titleRect) && !CGRectEqualToRect(self.titleRect, CGRectZero)) { return self.titleRect; } return [super titleRectForContentRect:contentRect]; } - (CGRect)imageRectForContentRect:(CGRect)contentRect{ if (!CGRectIsEmpty(self.imageRect) && !CGRectEqualToRect(self.imageRect, CGRectZero)) { return self.imageRect; } return [super imageRectForContentRect:contentRect]; } @end |
總結
有沒有一種快刀斬亂麻的感覺，有沒有感覺很好用，歡迎Star。
原始碼地址：https://github.com/HelloYeah/YLButton
補充
評論裡很多人認為用分類來實現更好一些。
那我說說我的看法，分類和繼承在這裡沒有明顯的優劣差別。但分類的實現明顯要複雜一些，首先要給titleRect，imageRect設定屬性關聯，其次需要交換方法，把titleRectForContentRect：和 imageRectForContentRect：替換掉（runtime交換方法） 或者 直接覆蓋掉（覆蓋系統方法，隱患較大，不建議。）
那在使用的時候有什麼差別呢，毋庸置疑，分類和繼承都需要匯入標頭檔案，繼承，需要建立YLButton物件，而分類直接建立系統的UIButton即可。分類使用的時候可以直接拖到專案中去，繼承的話一般都會改下類的字首再使用。
有興趣的朋友可以自己用分類實現一下，難度不大。