級(jí)別：★★☆☆☆
標(biāo)簽：「UIButton內(nèi)偏移量」「titleEdgeInsets」「imageEdgeInsets」
作者： MrLiuQ
審校： QiShare團(tuán)隊(duì)
我們先看一下蘋(píng)果官方對(duì)UIEdgeInsets說(shuō)明：
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' . - 解釋：對(duì)每條邊向內(nèi)方向的偏移量，可以為正值（向內(nèi)偏移）也可以為負(fù)值（向外偏移）。
基本使用：
xxx.edgeInsets = UIEdgeInsetsMake(.0, .0, .0, .0);
//例如我們?cè)O(shè)置UICollectionView的edgeInset會(huì)使collectionView產(chǎn)生內(nèi)偏移
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.sectionInset = UIEdgeInsetsMake(20.0, .0, .0, .0);
引入正題：
然而，UIButton的內(nèi)偏移量與其他控件有些區(qū)別，
因?yàn)閁IButton內(nèi)部默認(rèn)有兩個(gè)子控件：UILabel和UIImageView
所以UIButton在內(nèi)偏移量的計(jì)算上會(huì)有差異。
為什么？先賣(mài)個(gè)關(guān)子，下文解釋。
UIButtonEdgeInsets:
需求：通過(guò)修改edgeInsets，改變Button內(nèi)部的imageView和titleLabel的相對(duì)位置。
思路：通過(guò)修改button的兩個(gè)屬性：titleEdgeInsets和imageEdgeInsets，從而達(dá)到最終的具體需求。
這里列出了三個(gè)比較常見(jiàn)的需求：
- image左 title右
- image右 title左
- image上 title下
小編做了一個(gè)demo，效果如下圖：
場(chǎng)景一：左圖右字
button.titleEdgeInsets = UIEdgeInsetsMake(0, 10.0, 0, 0);
語(yǔ)法解釋：設(shè)置了title的左邊線的內(nèi)偏移量為10.0，
但經(jīng)測(cè)試，
注意：實(shí)際上title和Image只有5.0的距離
注意：實(shí)際上title和Image只有5.0的距離
注意：實(shí)際上title和Image只有5.0的距離
圖解如下：
在這種場(chǎng)景下：
- title的 上邊線、右邊線、下邊線 內(nèi)偏移 是相對(duì)于contentView的
- image的 上邊線、左邊線、下邊線 內(nèi)偏移 是相對(duì)于contentView的
- title的 左邊線 內(nèi)偏移 相對(duì)于image
- image的 右邊線 內(nèi)偏移 相對(duì)于title
場(chǎng)景二：左字右圖
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);
語(yǔ)法解釋：
- title的 左邊線 內(nèi)偏移 - (imageView.width +10）<=> 等價(jià)于 title的左邊線 向 內(nèi)偏移的反方向 移動(dòng) (image.width +10)
- title的 右邊線 內(nèi)偏移 imageView.width <=> 等價(jià)于 title的右邊線 向 內(nèi)偏移的正方向 移動(dòng) imageView.width
- image的 左邊線 內(nèi)偏移 titleLabel.width <=> 等價(jià)于 image的左邊線 向 內(nèi)偏移的正方向 移動(dòng) titleLabel.width
- image的 右邊線 內(nèi)偏移 - titleLabel.width <=> 等價(jià)于 title的左邊線 向 內(nèi)偏移的反方向 移動(dòng) titleLabel.width
是不是有點(diǎn)繞人？哈哈，不要慌，請(qǐng)看圖解
場(chǎng)景三：上圖下字
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);
語(yǔ)法解釋：
- title的 上邊線 內(nèi)偏移 (imageView.height +10）<=> 等價(jià)于 title的上邊線 向 內(nèi)偏移的正方向 移動(dòng) (image.height +10)
- title的 左邊線 內(nèi)偏移 - imageView.width <=> 等價(jià)于 title的左邊線 向 內(nèi)偏移的反方向 移動(dòng) image.width
- image的 左邊線 內(nèi)偏移 titleLabel.width * 0.5 <=> 等價(jià)于 image的左邊線 向 內(nèi)偏移的正方向 移動(dòng) titleLabel.width 的一半
- image的 下邊線 內(nèi)偏移 titleLabel.height + 10 <=> 等價(jià)于 image的下邊線 向 內(nèi)偏移的正方向 移動(dòng) titleLabel.height + 10
- image的 右邊線 內(nèi)偏移 - titleLabel.width * 0.5 <=> 等價(jià)于 image的右邊線 向 內(nèi)偏移的反方向 移動(dòng) titleLabel.width 的一半
請(qǐng)看圖解：
最后，本文Demo鏈接：GitHub
關(guān)注我們的途徑有：
QiShare(簡(jiǎn)書(shū))
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號(hào))
