UIButton內有兩個控件titleLabel和imageView，可以用來顯示一個文本和圖片，這里的圖片區別于背景圖片。給UIButton設置了title和image后，它們會圖片在左邊，文本在圖片右邊顯示。它們兩個做為一個整體依賴于button的
contentHorizontalAlignment居左居右或居中顯示。(默認是居中)
當button.width < image.width時，只顯示被壓縮后的圖片，圖片是按fillXY的方式壓縮。
當button.width > image.width，且 button.width < (image.width + text.width)時，圖片正常顯示，文本被壓縮。
當button.width > (image.width + text.width),兩者并列默認居中顯示，可通過button的屬性contentHorizontalAlignment改變對齊方式。
想兩改變兩個子控件的顯示位置，可以分別通過setTitleEdgeInsets和setImageEdgeInsets來實現。 需要注意的是，對titleLabel和imageView設置偏移，是針對它當前的位置起作用的，并不是針對它距離button邊框的距離的。
首先，給大家推薦一個第三方，因為UI的東西其實都是比較簡單的，大家工作的用用到的時候，知道有這么個東西就行了。https://github.com/search?utf8=%E2%9C%93&q=CenterImageAndTitle
導入到工程，就只有兩個文件
屏幕快照 2016-12-20 下午1.31.54.png
直接上代碼，看看怎么用的吧。
@interface TestMasonryViewController ()
@property (nonatomic, strong) UIButton *btn;
@property (nonatomic, strong) UILabel *lab;
@property (nonatomic, strong) UIView *viewFunction;
@property (nonatomic, strong) UIButton *btn1;
@property (nonatomic, strong) UIButton *btn2;
@property (nonatomic, strong) UIButton *btn3;
@property (nonatomic, strong) UIButton *btn4;
@property (nonatomic, strong) UIButton *btn5;
@property (nonatomic, strong) UIButton *btn6;
@property (nonatomic, strong) UIButton *btn7;
@end
@implementation TestMasonryViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 樣式一：圖片在上，文字在下， 整體居中
self.viewFunction = [[UIView alloc] init];
[self.view addSubview:self.viewFunction];
self.viewFunction.backgroundColor = HEXCOLOR(0xffffff);
[self.viewFunction mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.mas_equalTo(0);
make.top.mas_equalTo(100);
make.height.mas_equalTo(80);
}];
self.btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
[self.btn1 setImage:[UIImage imageNamed:@"法國"] forState:UIControlStateNormal];
[self.btn1 setTitle:@"電影票" forState:UIControlStateNormal];
[self.btn1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.viewFunction addSubview:self.btn1];
self.btn2 = [UIButton buttonWithType:UIButtonTypeCustom];
[self.btn2 setImage:[UIImage imageNamed:@"法國"] forState:UIControlStateNormal];
[self.btn2 setTitle:@"演出票" forState:UIControlStateNormal];
[self.btn2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.viewFunction addSubview:self.btn2];
self.btn3 = [UIButton buttonWithType:UIButtonTypeCustom];
[self.btn3 setImage:[UIImage imageNamed:@"法國"] forState:UIControlStateNormal];
[self.btn3 setTitle:@"優惠券" forState:UIControlStateNormal];
[self.btn3 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.btn3 verticalCenterImageAndTitle:10];
[self.viewFunction addSubview:self.btn3];
self.btn4 = [UIButton buttonWithType:UIButtonTypeCustom];
[self.btn4 setImage:[UIImage imageNamed:@"法國"] forState:UIControlStateNormal];
[self.btn4 setTitle:@"影城卡" forState:UIControlStateNormal];
[self.btn4 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.btn4 verticalCenterImageAndTitle:10];
[self.viewFunction addSubview:self.btn4];
[self.btn1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(0);
make.top.mas_equalTo(0);
make.width.mas_equalTo(Screen_Width / 4);
make.height.mas_equalTo(self.viewFunction.mas_height);
}];
[self.btn2 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.btn1.mas_right);
make.top.mas_equalTo(0);
make.width.mas_equalTo(self.btn1.mas_width);
make.height.mas_equalTo(self.viewFunction.mas_height);
}];
[self.btn3 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.btn2.mas_right);
make.top.mas_equalTo(0);
make.width.mas_equalTo(self.btn1.mas_width);
make.height.mas_equalTo(self.viewFunction.mas_height);
}];
[self.btn4 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.btn3.mas_right);
make.top.mas_equalTo(0);
make.width.mas_equalTo(self.btn1.mas_width);
make.height.mas_equalTo(self.viewFunction.mas_height);
}];
// 注意一定要在 btn 設置完frame 之后再設置。 否者會出問題
[self.btn1 verticalCenterImageAndTitle:10];
[self.btn2 verticalCenterImageAndTitle:10];
[self.btn3 verticalCenterImageAndTitle:10];
[self.btn4 verticalCenterImageAndTitle:10];
self.btn1.backgroundColor = RandColor;
self.btn2.backgroundColor = RandColor;
self.btn3.backgroundColor = RandColor;
self.btn4.backgroundColor = RandColor;
// 樣式2 ： 圖片在左，文字在右
self.btn5 = [UIButton buttonWithType:UIButtonTypeCustom];
[self.btn5 setImage:[UIImage imageNamed:@"法國"] forState:UIControlStateNormal];
[self.btn5 setTitle:@"影城卡煩到死案發后愛的色放" forState:UIControlStateNormal];
[self.btn5 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.view addSubview:self.btn5];
[self.btn5 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(10);
make.top.mas_equalTo(self.viewFunction.mas_bottom).offset(10);
}];
self.btn6 = [UIButton buttonWithType:UIButtonTypeCustom];
[self.btn6 setImage:[UIImage imageNamed:@"法國"] forState:UIControlStateNormal];
[self.btn6 setTitle:@"影城卡煩" forState:UIControlStateNormal];
[self.btn6 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.view addSubview:self.btn6];
[self.btn6 mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(10);
make.top.mas_equalTo(self.btn5.mas_bottom).offset(10);
}];
[self.btn5 horizontalCenterImageAndTitle:10];
[self.btn6 horizontalCenterImageAndTitle:10];
// 子這里布局是為了得到self.btn5 的 frame
[self.view layoutIfNeeded];
// 為什么這里我又重新進行了更新約束，因為設置玩圖片和文字的間距之后，如果不重新布局，圖片或者文字會超出按鈕的范圍?？匆幌洛e誤的效果圖吧。但是我感覺這個地方大家不是特別的會注意到。
[self.btn5 mas_updateConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(self.btn5.frame.size.width + 10);
}];
[self.btn6 mas_updateConstraints:^(MASConstraintMaker *make) {
make.width.mas_equalTo(self.btn6.frame.size.width + 10);
}];
self.btn5.backgroundColor = RandColor;
self.btn6.backgroundColor = RandColor;
}
錯誤的圖片，大家看一下：
Simulator Screen Shot 2016年12月20日 下午1.41.32.png
附上正確的效果圖：
Simulator Screen Shot 2016年12月20日 下午1.35.21.png
