UIEdgeInsets - 1

来源：互联网发布：java string byte数组编辑：程序博客网时间：2024/05/16 13:55

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

0 0