級別： ★☆☆☆☆
標簽：「iOS」「UIButton」「自動布局」
作者： 沐靈洛
審校： QiShare團隊

---

UIButton是開發過程中最常用的控件，可以設置各種樣式，也可以自定義添加圖片、標題。

但是，實際設計中往往與上圖的默認樣式不一致。比如圖片和文字間距為10，圖片距離左邊的間距為10，標題距離右邊為10，這就需要我們使用一些方法來實現效果。

1. 使用imageEdgeInsets和titleEdgeInsets

btn.imageEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0); btn.titleEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 10); 復制代碼

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

2.渲染時給出imageView和titleLabel的frame

重寫以下兩個方法，返回需要的frame，使imageView和titleLabel分開渲染。

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

所以我們創建一個QiShareButton繼承自UIButton，并定義兩個屬性

@interface QiShareButton : UIButton@property (nonatomic, assign) CGRect imageRect; @property (nonatomic, assign) CGRect titleRect;@end 復制代碼

在.m中重寫兩個方法

- (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];} } 復制代碼

關于使用：

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，然后分別設置titleRect和imageRect屬性，觀察到雖然imageView和titleLabel正常繪制，但是button的frame依然是Zero，在橙色的大背景下看不到青色（cyanColor）的button。

我們設置button的frame不足以顯示imageView和titleLabel

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

我們希望button能夠根據titleRect和imageRect屬性的值自動適配合適的frame。即：設置titleRect和imageRect便可以算出button的大小。 所以重寫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); 復制代碼

源碼：Demo源碼

---

小編微信：可加并拉入《QiShare技術交流群》。

關注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)

推薦文章：
iOS 指定初始化方法
UIView中的hitTest方法
iOS關于tabBar的幾處筆記
A的女兒是B的女兒的媽媽，A是B的誰？
算法小專欄：選擇排序
iOS Runloop（一）
奇舞周刊

轉載于:https://juejin.im/post/5cdd2e8fe51d45475b17e3b4

總結

以上是生活随笔為你收集整理的iOS UIButton根据内容自动布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。