UIEdgeInsets 这个东西看起来很简单,但是很多人用起来都是靠蒙的,曾经的我也是如此。
这里特地结合两个列子讲解,真正的理解的用法是怎么样的。
先参考一个地方,用UIEdgeInsets非常多的地方:
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode NS_AVAILABLE_IOS(6_0); // the interior is resized according to the resizingMode
这里的端盖值就是靠insets来设置的,详细参考:
http://blog.csdn.net/chaoyuan899/article/details/19811889
上述的例子是,24x60 拉伸至 150x50 ,举这个例子的目的是要说明,我们拉伸的图片的尺寸!我们要先参考尺寸!
还有一个非常好的例子,我们在按钮的上下图片和文字的居中中也使用到UIEdgeInsets这个东东,我们这里给一个例子:
实际尺寸是51x41
如果我们需要一个按钮是,并且上下对齐,“用户中心”四个字
_personalCenterBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 61, 40)];
利用属性:
@property(nonatomic) UIEdgeInsets imageEdgeInsets; // default is UIEdgeInsetsZero
@property(nonatomic) UIEdgeInsets titleEdgeInsets; // default is UIEdgeInsetsZero
我们可以设置图片和title标题的上下居中对齐的效果。
所以需求就是:
将51x41的icon设置成尺寸为 61x40 UIButton的“用户中心”上下图片和标题的效果
我们先给出结果,再来分步骤讲解怎么计算:
字体大小:
[button.titleLabel setFont:[UIFont systemFontOfSize:9]];
imageview 和 title 的EdgeInsets 为:
[self adjustImageAndTitleEdgeInsetsToCenter:_personalCenterBtn
imageEdgeInsets:UIEdgeInsetsMake(4, 17, 16, 61 - 17 - 26)
titleEdgeInsets:UIEdgeInsetsMake(25, -_personalCenterBtn.titleLabel.bounds.size.width - 46, 0, 0)];
即:
image : 4, 17, 16 , 61 - 17 - 26
title : 25, -button.titleLabel.bounds.size.width - 46, 0 , 0
计算过程:
非常好办,因为我们所拥有的尺寸是一个给定的大小,我们只要确定一个尺寸就可以把整套关系和尺寸算出。
例如这里的icon我们尺寸给定 宽度为 26
根据缩放比公式:
51x41 宽高 缩放到 26x height
那么height算出来:20.9 约为21
即缩放比例的前后是: 51x41 到 26x21
这时候我们确定image icon 的的 上top 和 左left ,我们通过感觉约莫得到 top : 4 , left 17
那么第一个关系我们就可以得出:image : 4, 17, bottom , 61 - 17 - 26
那么bottom怎么算呢?也是根据上面几个关系。
40 - 4 - 21 分别是 button 的高度减去top的edge 再减去我们算出来的高度21,得到15,这里我们取16,因为下面还有个title
这样就得出:4, 17, 16 , 61 - 17 - 26
我们继续来计算title的尺寸:
要计算title的尺寸,我们先要知道image和title的关系,默认的临接关系如下:
先是填充好image再安排title的位置
知道了关系我们来计算:
首先根据imageview在上面的计算,top : 4 本身的高为 : 21 ,所以 4 + 21 为 25
我们就可以得到这样关系:
25, -button.titleLabel.bounds.size.width - 46, 0 , 0
将title向前移动呗
参考:
http://www.jianshu.com/p/62850b201049