UIButton是開(kāi)發(fā)過(guò)程中最常用的控件，可以設(shè)置各種樣式，也可以自定義添加圖片、標(biāo)題。

一個(gè)同時(shí)帶有圖片和標(biāo)題的button

但是，實(shí)際設(shè)計(jì)中往往與上圖的默認(rèn)樣式不一致。比如圖片和文字間距為10，圖片距離左邊的間距為10，標(biāo)題距離右邊為10，這就需要我們使用一些方法來(lái)實(shí)現(xiàn)效果。

1. 使用imageEdgeInsets和titleEdgeInsets

btn.imageEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
btn.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 10);

上述方式可以實(shí)現(xiàn)需求效果，但由于特殊的計(jì)算方式，使得代碼不太直觀。具體內(nèi)容可參考文章 iOS UIButton之UIEdgeInsets詳解

2.渲染時(shí)給出imageView和titleLabel的frame

重寫(xiě)以下兩個(gè)方法，返回需要的frame，使imageView和titleLabel分開(kāi)渲染。

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

所以我們創(chuàng)建一個(gè)QiShareButton繼承自UIButton，并定義兩個(gè)屬性

@interface QiShareButton : UIButton

@property (nonatomic, assign) CGRect imageRect;
@property (nonatomic, assign) CGRect titleRect;

@end

在.m中重寫(xiě)兩個(gè)方法

- (CGRect)titleRectForContentRect:(CGRect)contentRect {
    
    if (!CGRectIsEmpty(self.titleRect) && !CGRectEqualToRect(self.titleRect, CGRectZero)) {
        return self.titleRect;
    } else {
        return [super titleRectForContentRect:contentRect];
    }
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect {
    
    if (!CGRectIsEmpty(self.imageRect)&&!CGRectEqualToRect(self.imageRect, CGRectZero)) {
        return self.imageRect;
    } else {
        return [super imageRectForContentRect:contentRect];
    }
}

關(guān)于使用：

QiShareButton *btn = [[QiShareButton alloc]initWithFrame:CGRectZero];
btn.backgroundColor = [UIColor cyanColor];
[btn addTarget:self action:@selector(test) forControlEvents:UIControlEventTouchUpInside];
[btn setTitle:@"QiShareBtn" forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:@"icon_presonal_sign"] forState:UIControlStateNormal];
btn.titleRect = CGRectMake(60.0 , 10.0, 100.0, 40.0);
btn.imageRect = CGRectMake(10.0, 10.0, 40.0, 40.0);
[self.view addSubview:btn];

在上述代碼中，以CGRectZero初始化button，然后分別設(shè)置titleRect和imageRect屬性，觀察到雖然imageView和titleLabel正常繪制，但是button的frame依然是Zero，在橙色的大背景下看不到青色（cyanColor）的button。

button的父視圖背景橙色，顯示不出button

我們?cè)O(shè)置button的frame不足以顯示imageView和titleLabel

QiShareButton *btn =  [[QiShareButton alloc] initWithFrame:CGRectMake(100.0, 100.0, 20.0, 20.0)];

button的frame不足以顯示imageView和titleLabel

我們希望button能夠根據(jù)titleRect和imageRect屬性的值自動(dòng)適配合適的frame。即：設(shè)置titleRect和imageRect便可以算出button的大小。
所以重寫(xiě)UIButton的layoutSubViews方法：

- (void)layoutSubviews {
    
    [super layoutSubviews];
    
    BOOL hasSetTitleRect = !(CGRectIsEmpty(self.titleRect) || CGRectEqualToRect(self.titleRect, CGRectZero));
    BOOL hasSetImageRect = !(CGRectIsEmpty(self.imageRect) || CGRectEqualToRect(self.imageRect, CGRectZero));
    
    if (hasSetImageRect || hasSetTitleRect) {
        CGRect rect = self.frame;
        CGRect curentRect =  CGRectUnion(hasSetImageRect ? self.imageRect : CGRectZero, hasSetTitleRect  ? self.titleRect : CGRectZero);
        rect.size.width = curentRect.size.width + curentRect.origin.x * 2;
        rect.size.height = curentRect.size.height + curentRect.origin.y * 2;
        self.frame = rect;
    }
    
}

使用效果（未給定button的frame或者寬高不正確）

btn.titleRect = CGRectMake(60.0 , 10.0, 100.0, 40.0);
btn.imageRect = CGRectMake(10.0, 10.0, 40.0, 40.0);

左右分布 圖片在左

btn.imageRect = CGRectMake(110.0 , 10.0, 40.0, 40.0);
btn.titleRect = CGRectMake(10.0, 10.0, 100.0, 40.0);

左右分布 圖片在右邊

btn.titleRect = CGRectMake(10.0 , 10.0, 100, 40);
btn.imageRect = CGRectMake(40, 60, 40, 40);

上下分布 圖片在下

btn.titleRect = CGRectMake(10 , 60, 100, 40);
btn.imageRect = CGRectMake(40, 10, 40, 40);

上下分布 圖片在上