- 示例
在创建button的时候经常需要在button上添加图片和按钮,而且一般情况下我们需要的都是图片在上、标题在下的效果(灰色的为button):
而当我们设置好title和image后发现是图片居左,标题居右的:
当然这不是我们想要的效果,于是通过设置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#>)要设置的就是四个边距,先看一张图:
图中,蓝色标识为可变区域, 绿色标识为不变区域。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)];
效果:
大家可能注意到了我设置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)];
效果:
图片和标题好像有点近,好办,再加一点:
[button setTitleEdgeInsets:UIEdgeInsetsMake(button.currentImage.size.height + 20, -button.currentImage.size.width, 0, 0)];
分开了:
附上我的测试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
- End