iOS_按鈕文字圖片任意布局，隨意定制

導讀

按鈕是應用中最常見的,最基本的一個控件。

按鈕的樣式多種多樣，系統默認樣式為左右結構，圖片在左邊，文字在右邊。系統按鈕完全無法滿足開發的需求，我們只能自己定制出想要的樣式。

在這里分享一個自定義按鈕，文字圖片位置隨意定制的demo給大家。

酷我音樂中的部分按鈕

• 圖片文字,上下左右，C2 * C2 = 4,文字在圖片內部的按鈕，在酷我音樂中沒找到，但實際上也是有的，光布局樣式至少有5種。每種布局樣式，文字圖片大小尺寸位置也不盡相同。

實現方法

重寫下面兩個方法，返回正確的布局即可。

- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;

雖然可以實現，每個按鈕都重寫一遍，一個項目中那需要自定義多個按鈕，每個都算一下布局。這是有多無聊和痛苦，有什么好的辦法可以一勞永逸，適用所有的樣式嗎？答案是肯定的！

先上效果圖

自定義按鈕.gif

外界調用

1.xib創建

2.純代碼創建

    //左右結構，圖片在左邊，文字在右邊。
    {
        YLButton * searchBtn = [YLButtonbuttonWithType:UIButtonTypeCustom];
        [searchBtnsetImage:[UIImageimageNamed:@"search"] forState:UIControlStateNormal];
        [searchBtnsetTitle:@"搜索按鈕圖片在左邊" forState:UIControlStateNormal];
        searchBtn.titleLabel.font = [UIFontsystemFontOfSize:13];
        [searchBtnsetTitleColor:[UIColorredColor] forState:UIControlStateNormal];
        [searchBtnsetTitleColor:[UIColororangeColor] forState:UIControlStateHighlighted];
        searchBtn.imageRect = CGRectMake(10, 10, 20, 20);
        searchBtn.titleRect = CGRectMake(35, 10, 120, 20);
        [self.viewaddSubview:searchBtn];
        searchBtn.frame = CGRectMake(SCREEN_WIDTH * 0.5 - 80, 250, 160, 40);
        searchBtn.backgroundColor = [UIColorcolorWithRed:255/255.0 green:242/255.0 blue:210/255.0 alpha:1];
    }

實現原理

1.先看.h文件

#import
 
@interface YLButton : UIButton
@property (nonatomic,assign) CGRecttitleRect;
@property (nonatomic,assign) CGRectimageRect;
@end

2.實現.m文件

@implementationYLButton
 
- (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。

補充

評論里很多人認為用分類來實現更好一些。

那我說說我的看法，分類和繼承在這里沒有明顯的優劣差別。但分類的實現明顯要復雜一些，首先要給titleRect，imageRect設置屬性關聯，其次需要交換方法，把titleRectForContentRect：和 imageRectForContentRect：替換掉（runtime交換方法） 或者 直接覆蓋掉（覆蓋系統方法，隱患較大，不建議。）

那在使用的時候有什么差別呢，毋庸置疑，分類和繼承都需要導入頭文件，繼承，需要創建YLButton對象，而分類直接創建系統的UIButton即可。分類使用的時候可以直接拖到項目中去，繼承的話一般都會改下類的前綴再使用。

有興趣的朋友可以自己用分類實現一下，難度不大。

 

來自：http://ios.jobbole.com/91082/