• 示例
  在創建button的時候經常需要在button上添加圖片和按鈕，而且一般情況下我們需要的都是圖片在上、標題在下的效果（灰色的為button）：

屏幕快照 2016-04-08 下午4.38.33.png

而當我們設置好title和image后發現是圖片居左，標題居右的：

屏幕快照 2016-04-08 下午4.40.19.png

當然這不是我們想要的效果，于是通過設置UIEdgeInsetsMake屬性來達到我們想要的效果，但具體是要設置多少，每次做的時候我總是在嘗試，一點一點的去試，直達到想要的效果，這樣做事非常讓人頭疼的，而且對原理什么的完全不清楚，更讓人頭疼的是萬一修改需求，例如字體的多少或者大小發生了變化，那么又要一頓狂試，瘋了的感覺，有木有！于是有一天（也就是今天）我終于受不了了，開始研究UIEdgeInsetsMake到底是個什么鬼東西。

• 先看定義

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實際就是一個結構體（之前在這寫的是枚舉，感謝無刃之刃提出的錯誤），UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>)要設置的就是四個邊距，先看一張圖：

image_2.png

圖中，藍色標識為可變區域， 綠色標識為不變區域。UIEdgeInsets結構體的屬性top與bottom為一對，用來指定縱向可變區域（黑色虛線矩形），left與right為一對，用來指定橫向可變區域(白色虛線矩形)。當UIButton/UIImageView的size大于UIImage的size時，會調整圖片中可變區域大小以鋪滿整個控件,具體調整規則如下：
(1)控件寬度大于圖片寬度，拉伸白色虛線矩形
(2)控件高度大于圖片高度，拉伸黑色虛線矩形
(3)控制寬度小于圖片寬度時，橫向整體縮小(可變區與不變區比例不變)
(4)控制高度小于圖片高度時，縱向整體縮小(可變區與不變區比例不變)

上面的圖片和解釋來自于一葉博客，按照我的理解可以這樣解釋：top就是距離頂部的距離在默認的基礎上又加上設置的距離，拿開頭的button來說，在button僅設置image的時候（如果同時設置了image和title效果又是不一樣的，下面會詳解，稍安勿躁），image默認是居中的，相當于進行了這樣的設置：

[button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

如果我們在這個時候設置了：

[button setImageEdgeInsets:UIEdgeInsetsMake(20, 0, 0, 0)];

就相當于在圖片居中的基礎上，將圖片又下移了20，如果是-20則是在原有的基礎上向上移20，其他幾個參數同理，正數就是距相應的邊的距離增加，負數就是距相應的距離減少。關于這一點大家若想真正弄清楚，單純的去看我寫的或者其他任何一個人寫的文章搜幾乎是不可能的，最好的辦法就是去實踐，自己動手寫一段代碼，一個變量一個變量的去試驗，每改變一個變量的值會出現什么樣的效果，這樣才能理解的更加透徹。在這之前我在網上搜了很多這方面的資料，大都是一個人寫的，被別人拿去粘貼復制，千篇一律，或許不是別人講的不透徹，只是自己缺少實踐而已。扯遠了，回到主題，接下來說一下同時設置圖片和標題的情況:

• 為button同時設置圖片和標題
  文章開頭就說了，當我們給button設置圖片和title的時候默認是圖片居左，標題距右并排排列的：

    [button setImage:[UIImage imageNamed:@"ffw_32"] forState:UIControlStateNormal];
    [button setTitle:@"按鈕" forState:UIControlStateNormal];

我們回到文章開頭的第二章圖片，發生這樣變化的根源是什么呢？那就是當我們同時添加圖片和標題時，圖片默認會向左偏移button的titleLabel的寬度，而標題會向右偏移圖片的寬度，既然如此，我們就可以設置偏移量來達到我們想要的任何效果，一步一步來，先居中（大家可以先想一下這幾個參數應該怎么設置）：

    [button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.intrinsicContentSize.width)];
    [button setTitleEdgeInsets:UIEdgeInsetsMake(0, -button.currentImage.size.width, 0, 0)];

效果：

屏幕快照 2016-04-08 下午5.45.58.png

    [button setImageEdgeInsets:UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height, 0, 0, -button.titleLabel.intrinsicContentSize.width)];
    [button setTitleEdgeInsets:UIEdgeInsetsMake(button.currentImage.size.height, -button.currentImage.size.width, 0, 0)];

效果：

屏幕快照 2016-04-08 下午5.55.24.png

圖片和標題好像有點近，好辦，再加一點：

[button setTitleEdgeInsets:UIEdgeInsetsMake(button.currentImage.size.height + 20, -button.currentImage.size.width, 0, 0)];

分開了：

屏幕快照 2016-04-08 下午5.57.56.png

附上我的測試demo,有需要的可以直接修改參數：

    UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 160, 160)];
    [button setImage:[UIImage imageNamed:@"ffw_32"] forState:UIControlStateNormal];
    [button setTitle:@"按鈕" forState:UIControlStateNormal];
    button.titleLabel.font = [UIFont systemFontOfSize:14];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    button.center = self.view.center;
    button.backgroundColor = [UIColor grayColor];
    [self.view addSubview:button];
    NSLog(@"%f",-button.titleLabel.bounds.size.width);
    
    [button setImageEdgeInsets:UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height, 0, 0, -button.titleLabel.intrinsicContentSize.width)];
    [button setTitleEdgeInsets:UIEdgeInsetsMake(button.currentImage.size.height + 20, -button.currentImage.size.width, 0, 0)];

• 后記
  作為iOS新人，我在找這方面的資料時著實費了不少勁，希望這篇文章能幫助同我一樣迷茫的盆友，另外非常感謝一葉博客和Learning Notes的文章，受益匪淺！

• 參考：
  1、一葉博客
  2、Learning Notes

• End