級別：★★☆☆☆
標籤：「UIButton內偏移量」「titleEdgeInsets」「imageEdgeInsets」
作者： MrLiuQ
審校： QiShare團隊

我們先看一下蘋果官方對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;
 

• 官方：specify amount to inset (positive) for each of the edges. values can be negative to 'outset' .
• 解釋：對每條邊向內方向的偏移量，可以為正值（向內偏移）也可以為負值（向外偏移）。

基本使用：

xxx.edgeInsets = UIEdgeInsetsMake(.0, .0, .0, .0);

//例如我們設定UICollectionView的edgeInset會使collectionView產生內偏移
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.sectionInset = UIEdgeInsetsMake(20.0, .0, .0, .0);
 

引入正題：
然而，UIButton的內偏移量與其他控制元件有些區別，
因為UIButton內部預設有兩個子控制元件：UILabel和UIImageView
所以UIButton在內偏移量的計算上會有差異。
為什麼？先賣個關子，下文解釋。

UIButton預設子控制元件位置

UIButtonEdgeInsets:

需求：通過修改edgeInsets，改變Button內部的imageView和titleLabel的相對位置。

思路：通過修改button的兩個屬性：titleEdgeInsets和imageEdgeInsets，從而達到最終的具體需求。

這裡列出了三個比較常見的需求：

• image左 title右
• image右 title左
• image上 title下

小編做了一個demo，效果如下圖：

Demo效果圖

場景一：左圖右字

button.titleEdgeInsets = UIEdgeInsetsMake(0, 10.0, 0, 0);

語法解釋：設定了title的左邊線的內偏移量為10.0，

但經測試，
注意：實際上title和Image只有5.0的距離
注意：實際上title和Image只有5.0的距離
注意：實際上title和Image只有5.0的距離

圖解如下：

在這種場景下：

• title的 上邊線、右邊線、下邊線 內偏移 是相對於contentView的
• image的 上邊線、左邊線、下邊線 內偏移 是相對於contentView的
• title的 左邊線 內偏移 相對於image
• image的 右邊線 內偏移 相對於title

場景二：左字右圖

button.titleEdgeInsets = UIEdgeInsetsMake(.0, - button.imageView.bounds.size.width - 10.0, .0, button.imageView.bounds.size.width);
button.imageEdgeInsets = UIEdgeInsetsMake(.0, button.titleLabel.bounds.size.width, .0, - button.titleLabel.bounds.size.width);

語法解釋：

• title的 左邊線 內偏移 - (imageView.width +10）<=> 等價於 title的左邊線 向 內偏移的反方向 移動 (image.width +10)
• title的 右邊線 內偏移 imageView.width <=> 等價於 title的右邊線 向 內偏移的正方向 移動 imageView.width
• image的 左邊線 內偏移 titleLabel.width <=> 等價於 image的左邊線 向 內偏移的正方向 移動 titleLabel.width
• image的 右邊線 內偏移 - titleLabel.width <=> 等價於 title的左邊線 向 內偏移的反方向 移動 titleLabel.width

是不是有點繞人？哈哈，不要慌，請看圖解

場景三：上圖下字

button.titleEdgeInsets = UIEdgeInsetsMake(button.imageView.frame.size.height + 10.0, - button.imageView.bounds.size.width, .0, .0);
button.imageEdgeInsets = UIEdgeInsetsMake(.0, button.titleLabel.bounds.size.width / 2, button.titleLabel.frame.size.height + 10.0, - button.titleLabel.bounds.size.width / 2);

語法解釋：

• 標題的上邊線內偏移（imageView.height 10）<=>等價於標題上的邊線向內偏移的正方向移動（image.height 10）
• 標題的左邊線內偏移- imageView.width <=>等價於標題左邊的線向內偏移的反方向移動image.width
• 影象的左邊線內偏移titleLabel.width * 0.5 <=>等價於影象左邊的線向內偏移的正方向移動titleLabel.width的一半
• 影象的下邊線內偏移titleLabel.height + 10 <=>等價於影象下的邊線向內偏移的正方向移動titleLabel.height + 10
• 影象的右邊線內偏移- titleLabel.width * 0.5 <=>等價於影象右邊的線向內偏移的反方向移動titleLabel.width的一半

請看圖解：

最後，本文Demo連結：GitHub

關注我們的途徑有：
QiShare（簡書）
QiShare（掘金）
QiShare（知乎）
QiShare（GitHub）
QiShare（CocoaChina）
QiShare（StackOverflow）
QiShare（微信公眾號）

推薦文章：iOS UISlider數值與滑塊聯動

作者：QiShare
連結：HTTPS：//www.jianshu.com/p/b4cb35c41bf0
來源：書繁簡
繁簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。