级别：★★☆☆☆
标签：「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
来源：书繁简
繁简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

iOS UIButton之UIEdgeInsets详解

UIButtonEdgeInsets:

场景一：左图右字

场景二：左字右图

场景三：上图下字

猜你喜欢