UIEdgeInsetsMake使用详解

2016-04-08 本文已影响19030人 MrFire_

示例
在创建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
大家可能注意到了我设置image偏移量的时候并不是设置的-button.titleLabel.bounds.size.width，而是-button.titleLabel.intrinsicContentSize.width，因为在iOS8之后-button.titleLabel.bounds.size.width的值为0，经多方搜索才找到一个替代的方法，这样设置的意义就是将image的偏移量距右边的距离减少了titleLabel的宽度，由于默认是向左便宜了这么多，我们这样设置之后相当于抵消了左移的偏移量，所以图片就居中了，对于title道理是一样的。这一点明白之后剩下的就没什么难题了，继续，title下移，image上移：

    [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

UIEdgeInsetsMake使用详解

猜你喜欢

热点阅读