UIButton的文本與圖片的佈局

UIButton內部文本和圖片的佈局是咱們平常代碼中，不可缺乏的部分，按鈕默認左邊圖片右邊文本，那要實現左邊文本，右邊圖片，咱們該怎麼解決呢，上面圖片，下面文本又該怎麼辦呢

其實很簡單，今天總結下，目前主要用兩種方式，一種就是重寫按鈕，另外一種就是經過setTitleEdgeInsets和setImageEdgeInsets方法解決

下圖是按鈕默認狀況下的圖文佈局

左邊文本，右邊圖片
首先介紹重寫按鈕吧，新建一個按鈕繼承UIButton，

1 2 3 4 5 6 7 8 9 10 11 12

- ( 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;   }

效果以下：

上面圖片，下面文本
一樣用重寫按鈕的方法

1 2 3 4 5 6 7 8 9 10 11

- ( 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; }

效果以下：
![屏幕快照 2016-05-30 10.23.11.png](//upload-images.jianshu.io/upload_images/616981-34430e2f6f66b344.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

另外一種方法就是經過setTitleEdgeInsets和setImageEdgeInsets方法解決
這種方法的最大好處，就是不要在重寫UIButton，直接在新建的UIButton中改變上面兩個屬性的值就能夠達到咱們想要的結果
左邊文本右邊圖片
代碼以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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];

徹底顛倒的效果

上面圖片下面文本
代碼以下：

1 2 3 4 5 6 7 8 9 10

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這些參數時都是不停的嘗試獲得的結果。目前這是我理解後，代碼實現最後的答案，但願能夠幫到你們。