UIEdgeInsetsMake学习

1,662 阅读2分钟

参考链接 参考链接

在平常我们使用button的时候,需求可能是需要我们满足button的Image和Label的各种体位,这个使用我们就需要使用UIEdgeInsetsMake来满足下需求,通过设置button的image和label的insetEdge来满足。

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;

是一个结构体,里面有四个属性,上左下右,看注释大概意思是说 为每条边指定插入量。正值的话是距离边多多少,负值的话是距离边少多少

image.png

引用: 图中,蓝色标识为可变区域, 绿色标识为不变区域。UIEdgeInsets结构体的属性top与bottom为一对,用来指定纵向可变区域(黑色虚线矩形),left与right为一对,用来指定横向可变区域(白色虚线矩形)。当UIButton/UIImageView的size大于UIImage的size时,会调整图片中可变区域大小以铺满整个控件,具体调整规则如下: (1)控件宽度大于图片宽度,拉伸白色虚线矩形 (2)控件高度大于图片高度,拉伸黑色虚线矩形 (3)控件宽度小于图片宽度时,横向整体缩小(可变区与不变区比例不变) (4)控件高度小于图片高度时,纵向整体缩小(可变区与不变区比例不变)

实战

其实很简单,目标实现这样的一个button

image.png

我们现在的样子是这样的

image.png

  • 第一步我们先将image和label都居中放置

    我们让label向左便宜-imageWidth (意思就是让他往左走了imageView的宽度)
     [button setTitleEdgeInsets:UIEdgeInsetsMake(0, -imageWidth, 0, 0)];
     让image向右走-titleLabeWidth (意思是让他向右左了titleLabel的宽度)
     [button setImageEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -titleLabelWidth)]; 
    

    设置完这些后我们看下当前的效果 我们发现现在image和label都是处在居中的状态下

image.png

  • 第二步我们在设置下上下的间距
    让titleLabel向下偏移- imageHeight - space (意思是向下走了图片的高度+偏移)
     [button setTitleEdgeInsets:UIEdgeInsetsMake(0, -imageWidth, -imageHeight - space, 0)];
     同理设置imageView的偏移
    [button setImageEdgeInsets:UIEdgeInsetsMake(-titleLabelHeigt - space, 0, 0, -titleLabelWidth)];
    

最后就实现了我们需要的效果

image.png

其实设置很简单,想清楚我们要怎么移动我们的内部空间,比如向上移动就是设置top属性同时设置一个负值这样的话对应的控件就会上移,按照这种思路设置的EdgeInset的属性都是负值