TitleEdgeInsets属性和 ImageEdgeInsets属性

在项目中我们经常遇见这种问题: 按钮的格式是这样排布的:上面是图片下面试文字,例如:


TitleEdgeInsets属性和 ImageEdgeInsets属性_第1张图片
Snip20161108_4.png

当然布局的方式有很多,可以给用UIImageView和UILabel都可以,给他们添加手势.在这里不废话,直接本主题!自定义UIButton,用UIButton的TitleEdgeInsets和ImageEdgeInsets属性来设置这种效果.

titleEdgeInsets是title相对于其上下左右的inset,如果只有title,那它上下左右都是相对于button的,image和他一样,如果同时有image和label,那这时候image的上左下是相对于button,右边是相对于label的;title的上右下是相对于button,左边是相对于image的。
其实titleEdgeInsets属性和 imageEdgeInsets属性只是在画这个button出来的时候用来调整image和label位置的属性,并不影响button本身的大小

不明白?上代码!

//首先拿到image和label的宽高 
CGFloat imageWith = self.imageView.frame.size.width;
CGFloat imageHeight = self.imageView.frame.size.height;
 CGFloat  labelWidth = self.titleLabel.intrinsicContentSize.width;
 CGFloat labelHeight = self.titleLabel.intrinsicContentSize.height;
//创建imageEdgeInsets 和labelEdgeInsets 也就是设置偏移量的(默认zero)
    UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
    UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;
//因为同时有title和image,所以image的上左下是相对于button,右边是相对于label的;title的上右下是相对于button,左边是相对于image的。space是文字和图片间距
image的中心位置向右移动了 CGFloat imageOffsetX = (imageWith + labelWidth) / 2 - imageWith / 2;
image上面向上移动了 CGFloat imageOffsetY = imageHeight / 2
  imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
 labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);

你可能感兴趣的:(TitleEdgeInsets属性和 ImageEdgeInsets属性)