首先，說一下需要考慮這個問題的場景
- UIButton ，同時設置圖片和文字，默認圖片在左，文字在右
- 需求經常可能是圖片上文字下？文字左圖片右？文字上圖片下？可能位置還需要動態變化或動態展示隱藏
查了很久，大致有以下三種做法：
- 1、簡單粗暴-直接寫個UIImageView，用相對布局蓋上去
好處是動態變動的，針對動態變化的需求操作起來比較靈活。但總覺得這么寫不大專業？ - 2、重寫UIButton的layoutSubview方法
好處是比較直觀，符合正常布局設計思維 - 3、利用UIButton里的setTitleEdgeInsets和setImageInsets方法，調整文字和圖片的位置及大小
好處是代碼量少，但是比較不好理解
下面詳細寫下后兩種寫法：
# 寫法二：重寫UIButton的layoutSubview方法
layoutSubviews是對subviews重新布局。比如，我們想更新子視圖的位置的時候，可以通過調用layoutSubviews方法，即可以實現對子視圖重新布局。
layoutSubviews默認是不做任何事情的，用到的時候，需要在子類進行重寫。
layoutSubviews調用場景
①、直接調用setLayoutSubviews。
②、addSubview的時候觸發layoutSubviews。
③、當view的frame發生改變的時候觸發layoutSubviews。
④、第一次滑動UIScrollView的時候觸發layoutSubviews。
⑤、旋轉Screen會觸發父UIView上的layoutSubviews事件。
⑥、改變一個UIView大小的時候也會觸發父UIView上的layoutSubviews事件。
注意：
init初始化不會觸發layoutSubviews，但是使用initWithFrame進行初始化時，當rect的值不為CGRectZero時，也會觸發。
引用自：iOS-layoutSubviews
結合工廠設計模式，再考慮選擇分類還是繼承的寫法？由于所寫類需要一個type屬性，來標志按鈕圖片及標題屬于哪一種位置關系；而分類一般不能添加屬性（可能會覆蓋原有類的屬性），同時分類中的方法都添加給了原有類，可能會影響原有類及其子類的使用。所以這里采用繼承的寫法比較合適 LQButton:UIButton
- 具體實現代碼如下：
// LQButton.h
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSInteger, LQButtonType){
LQButtonTypeCenterImageCenterTitle,//圖和文字都居中
LQButtonTypeLeftImageRightTitle,//左圖右文字
LQButtonTypeLeftTitleRightImage,//左文字右圖
LQButtonTypeTopImageBottomTitle,//上圖下文字 略
LQButtonTypeTopTitleBottomImage//上文字下圖 略
};
@interface LQButton : UIButton
@property (nonatomic, assign) LQButtonType type;
//初始化一個按鈕的同時設置其圖片文字位置關系
+ (instancetype)lqButtonWithType:(LQButtonType)buttonType;
//更改按鈕的圖片文字位置關系
- (void)updateButtonStyleWithType:(LQButtonType)buttonType;
@end
// LQButton.m
#import "LQButton.h"
@implementation LQButton
+ (instancetype)lqButtonWithType:(LQButtonType)buttonType {
LQButton *btn = [LQButton buttonWithType:UIButtonTypeCustom];
btn.type = buttonType;
return btn;
}
- (void)updateButtonStyleWithType:(LQButtonType)buttonType {
self.type = buttonType;
[self layoutSubviews];
}
- (void)layoutSubviews {
[super layoutSubviews];
if (self.type == LQButtonTypeCenterImageCenterTitle) {
[self resetBtnCenterImageCenterTitle];
}else if (self.type == LQButtonTypeLeftImageRightTitle) {
[self resetBtnLeftImageRightTitle];
}else if (self.type == LQButtonTypeLeftTitleRightImage) {
[self resetBtnLeftTitleRightImage];
}
}
- (void)resetBtnCenterImageCenterTitle {
self.imageView.frame = self.bounds;
[self.imageView setContentMode:UIViewContentModeCenter];
self.titleLabel.frame = self.bounds;
self.titleLabel.textAlignment = NSTextAlignmentCenter;
}
- (void)resetBtnLeftImageRightTitle {
CGRect frame = self.bounds;
frame.size.width *= 0.5;
self.imageView.frame = frame;
[self.imageView setContentMode:UIViewContentModeCenter];
frame.origin.x = (self.bounds.size.width - frame.size.width);
self.titleLabel.frame = frame;
self.titleLabel.textAlignment = NSTextAlignmentCenter;
}
- (void)resetBtnLeftTitleRightImage {
CGRect frame = self.bounds;
frame.size.width *= 0.5;
self.titleLabel.frame = frame;
self.titleLabel.textAlignment = NSTextAlignmentCenter;
frame.origin.x = (self.bounds.size.width - frame.size.width);
self.imageView.frame = frame;
[self.imageView setContentMode:UIViewContentModeCenter];
}
@end
以上是自定義LQButton的實現，具體引用如下：
// ViewController.m
// 先引入頭文件 #import "LQButton.h"
// 然后開始使用
- (void)viewDidLoad {
[super viewDidLoad];
UIImage *btnImg = [UIImage imageNamed:@"btnImg"];
//這種通過縮放圖片達到設置圖片大小的方法，會導致圖片清晰度下降，文章最后有進行分析
btnImg = [self imageWihtoutScale:btnImg size:CGSizeMake(50, 50)];
LQButton *btn3 = [LQButton lqButtonWithType:LQButtonTypeLeftTitleRightImage];
btn3.frame = CGRectMake(80, 590, 300, 80);
btn3.backgroundColor = [UIColor lightGrayColor];
[btn3 setImage:btnImg forState:UIControlStateNormal];
[btn3 setTitle:@"左文字右圖片" forState:UIControlStateNormal];
btn3.titleLabel.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.8];
[self.view addSubview:btn3];
LQButton *btn4 = [LQButton lqButtonWithType:LQButtonTypeLeftImageRightTitle];
btn4.frame = CGRectMake(80, 680, 300, 80);
btn4.backgroundColor = [UIColor lightGrayColor];
[btn4 setImage:btnImg forState:UIControlStateNormal];
[btn4 setTitle:@"左圖片右文字" forState:UIControlStateNormal];
btn4.titleLabel.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.8];
[self.view addSubview:btn4];
LQButton *btn5 = [LQButton lqButtonWithType:LQButtonTypeCenterImageCenterTitle];
btn5.frame = CGRectMake(80, 770, 300, 80);
btn5.backgroundColor = [UIColor lightGrayColor];
[btn5 setImage:btnImg forState:UIControlStateNormal];
[btn5 setTitle:@"圖片文字均居中" forState:UIControlStateNormal];
btn5.titleLabel.backgroundColor = [UIColor colorWithWhite:0.5 alpha:0.8];
//注意：用重寫layoutSubviews的方式，frame改變、及addSubviews的時候，均會觸發layoutSubviews。
//所以如果在此處再使用setTitleEdgeInsets/setImageEdgeInsets，將不會有效果。
//只能通過LQButton中的updateButtonStyleWithType方法來更新文字圖片的相對位置。
[self.view addSubview:btn5];
}
效果圖如下：
可以看出，通過frame設置位置，titleLabel的整體位置，包括文字背景所占位置，都可以靈活設置。
# 寫法三：利用UIButton里的setTitleEdgeInsets和setImageInsets方法，調整文字和圖片的位置及大小
其中最重要的是理解UIEdgeInsetsMake做了什么事？
先貼網上流傳最廣的一張圖：引用自一葉博客
// UIEdgeInsets定義
typedef struct UIEdgeInsets {
CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'
} UIEdgeInsets;
UIEdgeInsets是一個結構體，分別對控件top, left, bottom, right四個內邊距進行設置。
圖中，藍色標識為可變區域， 綠色標識為不變區域。UIEdgeInsets結構體的屬性top與bottom為一對，用來指定縱向可變區域（黑色虛線矩形），left與right為一對，用來指定橫向可變區域(白色虛線矩形)。當UIButton/UIImageView的size大于UIImage的size時（假設只有圖片），會調整圖片中可變區域大小以鋪滿整個控件,具體調整規則如下：
(1)控件寬度大于圖片寬度，拉伸白色虛線矩形
# 即白色虛線矩形變寬，拉寬圖片，以鋪滿整個控件
(2)控件高度大于圖片高度，拉伸黑色虛線矩形
# 即黑色虛線矩形變高，拉長圖片，以鋪滿整個控件
(3)控制寬度小于圖片寬度時，橫向整體縮小(可變區與不變區比例不變)
(4)控制高度小于圖片高度時，縱向整體縮小(可變區與不變區比例不變)
# 與UIViewContentMode有關，默認為UIViewContentModeScaleToFill：圖片拉伸填充至整個UIImageView(圖片可能會變形)
(標 # 的為個人理解)
【重點·理解】
-
因為單個空間的UIEdgeInsets，不設置時，默認內邊距都是0，即上圖中白色框與藍色框都與最外層邊緣線重合。
初始0內邊距 設置了UIEdgeInsets時，即給了上圖（內邊距示意圖）中top, left, bottom, right的紅線段一個長度，概括的來說，值為正的時候，對應紅色線條向里伸長，為負時，向外伸長。畢竟叫做“內邊距”～
# 更準確的來說，top和bottom為一對，用來控制縱向可變區域（黑色線框）；left和right為一對，用來控制橫向可變區域（白色線框）。
-
測試：
經過很多嘗試，得出以下結論偽代碼：
默認位置關系-
UIButton設置了圖片和標題時，默認圖片在左標題在右。且圖片緊貼文字，整體內容上下左右居中顯示，并重置了titleLabel和imageView的UIEdgeInsets均為 (0，0，0，0)，打印可得。
圖片文字均居中 - 圖片文字均居中：在默認左圖右字的基礎上，計算一下，圖片需要右移TitleWidth/2，即：
[btn setImageEdgeInsets:UIEdgeInsetsMake(0, TitleWidth/2, 0, -TitleWidth/2)];另一種思路，是右邊距直接-titleWidth，向右擴大一個標題的寬度，而圖片會自己居中顯示，所以可以達到一樣的居中效果
[btn setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -TitleWidth)];文字同理，需要左移imageWidth/2，或直接左邊距擴大一個圖片的寬度。
[btn setTitleEdgeInsets:UIEdgeInsetsMake(0, -imageWidth/2, 0, imageWidth/2)]; [btn setTitleEdgeInsets:UIEdgeInsetsMake(0, -imageWidth, 0, 0)];左文字右圖片- 左文字右圖片：在默認的基礎上，計算一下，圖片需要右移titleWidth，文字 需要左移imageWidth，從而達到圖片文字調換位置的效果（這種情況比較好理解，也可以借助用來理解上一個）
[btn setImageEdgeInsets:UIEdgeInsetsMake(0, TitleWidth, 0, -TitleWidth)]; [btn setTitleEdgeInsets:UIEdgeInsetsMake(0, -imageWidth, 0, imageWidth)];上圖片下文字- 上圖片下文字：在默認的基礎上，圖片需要先右移titleWidth/2，再上移titleHeight/2，文字先左移imageWidth/2，再下移imageHeight/2。即：
[btn setImageEdgeInsets:UIEdgeInsetsMake(-titleHeight/2, TitleWidth/2, titleHeight/2, -TitleWidth/2)]; [btn setTitleEdgeInsets:UIEdgeInsetsMake(imageHeight/2, -imageWidth/2, -imageHeight/2, imageWidth/2)];當然，也可以用第二種思路：
[btn setImageEdgeInsets:UIEdgeInsetsMake(0, TitleWidth, titleHeight, 0)]; [btn setTitleEdgeInsets:UIEdgeInsetsMake(imageHeight, 0, 0, imageWidth)];上文字下圖片- 上文字下圖片：在默認的基礎上，圖片需要先右移titleWidth/2，再下移titleHeight/2，文字先左移imageWidth/2，再上移imageHeight/2。
[btn setImageEdgeInsets:UIEdgeInsetsMake(titleHeight/2, TitleWidth/2, -titleHeight/2, -TitleWidth/2)]; [btn setTitleEdgeInsets:UIEdgeInsetsMake(-imageHeight/2, -imageWidth/2, imageHeight/2, imageWidth/2)];第二種思路的就省略了....
-
【注意!】以上所取的width, height，要使用button.titleLabel.intrinsicContentSize.width計算titleLabel的寬度（tips：使用button.titleLabel.bounds.size.width的在iOS8以上會得到寬度為0的結果，造成錯誤的結果）
網上說的最多的，理解為偏移量，不太準確。可以認為是在初始0邊距的基礎上，進行偏移。最好的驗證方法，就是寫兩次setTitleEdgeInsets/setImageInsets方法，驗證是在前一次的基礎上繼續偏移，還是以后一次的設置為準。親測為后者。
-
在以上實現的過程中，可能會遇到按鈕圖片大小不合適，需要調整（一般是需要縮小）
思路大致有兩個：
a. 圖片縮放后再設置為按鈕的image，但是這樣操作后圖片會變模糊！UIImage *btnImg = [UIImage imageNamed:@"btnImg"]; btnImg = [self imageWihtoutScale:btnImg size:CGSizeMake(50, 50)]; [btn setImage:btnImg forState:UIControlStateNormal];b. 還是利用UIEdgeInsetsMake，再加上setContentMode UIViewContentMode詳解
可以通過同時增加top-bottom/left-right，來縮小內邊距。
同時，之前提過，圖片默認ContentMode 為UIViewContentModeScaleToFill：圖片拉伸填充至整個UIImageView(圖片可能會變形)，所以在調整內邊距前，修改[btn.imageView setContentMode:UIViewContentModeScaleAspectFit];
UIViewContentModeScaleAspectFill
//圖片拉伸至圖片的的寬度或者高度等于UIImageView的寬度或者高度為止，看圖片的寬高哪一邊最接近UIImageView的寬高，一個屬性相等后另一個就停止拉伸。這樣就可以保證圖片不會變形
具體寫一個：
左文字右圖片UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom]; btn1.frame = CGRectMake(80, 300, 300, 180); btn1.backgroundColor = [UIColor lightGrayColor]; [btn1 setTitle:@"按鈕" forState:UIControlStateNormal]; btn1.titleLabel.backgroundColor = [UIColor grayColor]; UIImage *btnImg1 = [UIImage imageNamed:@"Image1"]; [btn1 setImage:btnImg1 forState:UIControlStateNormal]; CGFloat titleWidth = btn1.titleLabel.intrinsicContentSize.width; CGFloat imgWidth = btn1.imageView.intrinsicContentSize.width; [btn1 setTitleEdgeInsets:UIEdgeInsetsMake(0, -imgWidth, 0, imgWidth)]; [btn1 setImageEdgeInsets:UIEdgeInsetsMake(0, titleWidth, 0, -titleWidth)]; [self.view addSubview:btn1];只要改兩行代碼就可以縮小圖片，且圖片不會模糊。（注意，如果使用了a思路中的圖片縮放，再改變圖片內邊距將不起作用）
縮小圖片[btn1.imageView setContentMode:UIViewContentModeScaleAspectFit]; [btn1 setImageEdgeInsets:UIEdgeInsetsMake(50, titleWidth, 50, -titleWidth)];
以上。
