UIButton內部文本和圖片的布局是我們日常代碼中，不可缺少的部分，按鈕默認左邊圖片右邊文本，那要實現左邊文本，右邊圖片，我們該怎么解決呢，上面圖片，下面文本又該怎么辦呢？
其實很簡單，今天總結下，目前主要用兩種方式，一種就是重寫按鈕，另一種就是通過setTitleEdgeInsets和setImageEdgeInsets方法解決
下圖是按鈕默認情況下的圖文布局
第一種方法：重寫layout
1.（左邊文本，右邊圖片）
- (void)layoutSubviews
{? ? [super layoutSubviews];
CGRect imageRect = self.imageView.frame;
imageRect.size = CGSizeMake(30, 30);
imageRect.origin.x = (self.frame.size.width - 30) ;
imageRect.origin.y = (self.frame.size.height? - 30)/2.0f;
CGRect titleRect = self.titleLabel.frame;
titleRect.origin.x = (self.frame.size.width - imageRect.size.width- titleRect.size.width);
titleRect.origin.y = (self.frame.size.height - titleRect.size.height)/2.0f;
self.imageView.frame = imageRect;? ? self.titleLabel.frame = titleRect;
}
效果圖如下：
2.上面圖片，下面文本
- (void)layoutSubviews{
[super layoutSubviews];? ? CGRect imageRect = self.imageView.frame;
imageRect.size = CGSizeMake(30, 30);
imageRect.origin.x = (self.frame.size.width - 30) * 0.5;
imageRect.origin.y = self.frame.size.height * 0.5 - 40;? ? CGRect titleRect = self.titleLabel.frame;
titleRect.origin.x = (self.frame.size.width - titleRect.size.width) * 0.5;
titleRect.origin.y = self.frame.size.height * 0.5 ;? ? self.imageView.frame = imageRect;? ? self.titleLabel.frame = titleRect;
}
第二種方法：通過setTitleEdgeInsets和setImageEdgeInsets方法解決
這種方法的最大好處，就是不要在重寫UIButton，直接在新建的UIButton中改變上面兩個屬性的值就可以達到我們想要的結果。
1.（左邊文本，右邊圖片）
UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
btn1.frame = CGRectMake(50, 100, 80, 40);
[btn1 setImage:[UIImage imageNamed:@"icon_shouye"] forState:UIControlStateNormal];
[btn1 setTitle:@"首頁" forState:UIControlStateNormal];
[btn1 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn1.backgroundColor = [UIColor redColor];? ? UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(50, 50, 80, 40);
[btn setImage:[UIImage imageNamed:@"icon_shouye"] forState:UIControlStateNormal];
[btn setTitle:@"首頁" forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor redColor];? ? //上左下右
btn.imageEdgeInsets = UIEdgeInsetsMake(0, btn.frame.size.width - btn.imageView.frame.origin.x - btn.imageView.frame.size.width, 0, 0);
btn.titleEdgeInsets = UIEdgeInsetsMake(0, -(btn.frame.size.width - btn.imageView.frame.size.width ), 0, 0);
[self.view addSubview:btn1];
[self.view addSubview:btn];
效果圖如下：
2.（上面圖片下面文本）
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(50, 50, 80, 60);
[btn setImage:[UIImage imageNamed:@"icon_shouye"] forState:UIControlStateNormal];
[btn setTitle:@"首頁的事" forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor redColor];
btn.imageEdgeInsets = UIEdgeInsetsMake(- (btn.frame.size.height - btn.titleLabel.frame.size.height- btn.titleLabel.frame.origin.y),(btn.frame.size.width -btn.titleLabel.frame.size.width)/2.0f -btn.imageView.frame.size.width, 0, 0);
btn.titleEdgeInsets = UIEdgeInsetsMake(btn.frame.size.height-btn.imageView.frame.size.height-btn.imageView.frame.origin.y, -btn.imageView.frame.size.width, 0, 0);
[self.view addSubview:btn];
效果圖如下：
關于setTitleEdgeInsets和setImageEdgeInsets下面進行一些解釋：
UIButton內有兩個控件titleLabel和imageView，可以用來顯示一個文本和圖片，這里的圖片區別于背景圖片。給UIButton設置了title和image后，它們會圖片在左邊，文本在圖片右邊顯示。它們兩個做為一個整體依賴于button的contentHorizontalAlignment居左居右或居中顯示。
顯示格式區分：
1.當button.width < image.width時，只顯示被壓縮后的圖片，圖片是按照fillXY的方式壓縮。
2.當button.width > image.width，且button.width < (image.width+text.width)時，圖片正常顯示，文本被壓縮。
3.當button.width > (image.width+text.width)時，兩者并列默認居中顯示，可通過button的屬性contentHorizontalAlignment改變對齊方式。
想改變兩個子控件的顯示位置，可以分別通過setTitleEdgeInsets和setImageEdgeInsets來實現。對titleLabel和imageView設置偏移是針對他當前的位置起作用的，并不是針對距離button邊框的距離的。
typedefNS_ENUM(NSInteger, UIControlContentHorizontalAlignment) {
UIControlContentHorizontalAlignmentCenter =0,//居中
UIControlContentHorizontalAlignmentLeft? =1,//居左
UIControlContentHorizontalAlignmentRight? =2,//居右
UIControlContentHorizontalAlignmentFill? =3,//
想兩改變兩個子控件的顯示位置，可以分別通過setTitleEdgeInsets和setImageEdgeInsets來實現。需要注意的是，對titleLabel和imageView設置偏移，是針對它當前的位置起作用的，并不是針對它距離button邊框的距離的。感覺設置不設置UIControlContentHorizontalAlignmentCenter居中都沒有影響，這個網上也找了些相關的信息，感覺都沒有說到重點，我這里也沒有完全理解透徹，之前都是在設置setTitleEdgeInsets和setImageEdgeInsets這些參數時都是不停的嘗試得到的結果。目前這是我理解后，代碼實現最后的答案，希望可以幫到大家。
