前言
之前对于那种上面是图片下面是文字的按钮都是通过一个ImageView、一个Label、一个Button实现的。ImageView和Label在同一层。然后Button覆盖在他们上面。实现以下效果。
WX20170411-145933.png
其实也一直知道Button有一个属性可以去控制这个布局。但是一直都懒得搞...今天看到了就写篇文章分享一下吧。
正文
UIButton中有两个属性分别是imageEdgeInsets与titleEdgeInsets用来控制文本与图片的布局。还有一个contentEdgeInsets用来控制内容的布局。
我们先来看看默认是什么样的。默认值为UIEdgeInsetsZero
WX20170412-144322.png
self.button.titleLabel.backgroundColor = [UIColor blueColor];
self.button.imageEdgeInsets = UIEdgeInsetsZero;
self.button.titleEdgeInsets = UIEdgeInsetsZero;
<p> </p> <p> </p> <p> </p> <p> </p> <p> </p>
我们先来看看如果修改titleEdgeInsets会怎么样。
1、Right为正数
WX20170412-144001.png
整个label往左边挪了一点点。但是已经挤压了。
self.button.titleLabel.backgroundColor = [UIColor blueColor];
self.button.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 30);
2、Left为正数
WX20170412-150709@2x.png
整个label往右边挪了一点点。同样被挤压。
self.button.titleLabel.backgroundColor = [UIColor blueColor];
self.button.titleEdgeInsets = UIEdgeInsetsMake(0, 30, 0, 0);
3、Right为负数
WX20170412-145040@2x.png
整个label往左边挪了一点点。没有被挤压。
self.button.titleLabel.backgroundColor = [UIColor blueColor];
self.button.titleEdgeInsets = UIEdgeInsetsMake(0, -30, 0, 0);
4、Left为负数
WX20170412-150248@2x.png
整个label往右边挪了一点点。没有被挤压。
self.button.titleLabel.backgroundColor = [UIColor blueColor];
self.button.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -30);
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;
这就是一个结构体。里面包含四个变量。分别是上下左右。代表控件距离四周的距离。我们可以看下图会有更清晰的认识。
1350207-5ea71c94e013a67f.png
所以我们在上面那部分的实验中。为正数的值往往都是被被挤压的。为负值都会被拉伸。
1、文字与图片都居中显示
好了。我们现在去实现让文字与图片都居中显示。
WX20170414-145631@2x.png
self.button.titleLabel.backgroundColor = [UIColor blueColor];
self.button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -self.button.titleLabel.intrinsicContentSize.width);
self.button.titleEdgeInsets = UIEdgeInsetsMake(0, -self.button.imageView.frame.size.width, 0, 0);
大家会看到这里有一个intrinsicContentSize。具体的等下会说。大家可以暂时理解为这是lable的实际大小。这里不能使用size。在iOS8之后titleLabel的size为0。是没什么意义的。如果想先理解intrinsicContentSize可以看看这篇文章。
那么我们现在来思考一下这两个值是为什么。相当于我们就是同时将两个控件都移动到了中间。所以文字与图片都居中显示。
