UIButton 上默认是图片在左文字在右，而大多数情况这样默认的的显示形式都不能满足我们的需求，接下来我就这个问题分享一下我的心得。
默认情况下，不设置的效果，都是居中实现
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(50, 50, 150, 100);
button.backgroundColor = [UIColor yellowColor];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitle:@"title" forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"tab5"] forState:UIControlStateNormal];
[self.view addSubview:button];
UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right);
上面的四个数值是基于原位置而改变的例如：
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, 0, 0, 60)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, 60, 0, 0)];
title 的CGFloat right改变的60 是基于原位置的titleLabel的右边框向左平移60也就是到右边框的距离。
image也是一样，距离原来imageView的左边框向右平移了60。
[button setTitleEdgeInsets:UIEdgeInsetsMake(30, 0, 0, 30)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, 30, 30, 0)];
上下移动的原理同左右；
- 注意：这4个数值的位移都是基于原来的位置进行移动的例如第 *
- 一个数就是基于原来上边框的位置向下移动，正数向下移动负数 *
- 向上移动；左右同理； *
但是这种设置方式是需要先确定Button的位置的，对于我们很多控件都是使用Masnory来进行布局的，这种方式用起来效果非常有限（个人经验，无科学根据），这时候采用自定义按钮的方式来进行布局，效果明显很多：
- (instancetype)init{
if (self = [super init]) {
}
return self;
}
- (void)layoutSubviews{
[super layoutSubviews];
CGFloat h = self.frame.size.height-6;
CGFloat w = self.frame.size.width;
if (h>0 && w > 0) {
UIImageView * imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"main_arrow_right"]];
imageView.backgroundColor = [UIColor clearColor];
[self addSubview:imageView];
imageView.frame = CGRectMake(w-16, 3, 13, h);
CGFloat h = self.frame.size.height;
CGFloat w = self.frame.size.width - 20;
self.titleLabel.frame = CGRectMake(0, 0, w, h);
}
}
附三种图片在上，标题在下的解决方案：
方案一：
//自定义类继承UIButton，然后
-(void)layoutSubviews {
[super layoutSubviews];
CGFloat midX = self.frame.size.width / 2;
CGFloat midY = self.frame.size.height/ 2 ;
self.titleLabel.center = CGPointMake(midX, midY + 15);
self.imageView.center = CGPointMake(midX, midY - 10);
}
方案二：
//自定义UIButton
-(void)layoutSubviews {
[super layoutSubviews];
//图片布局
self.imageView.y = 0;
self.imageView.centerX = self.width * 0.5;
//设置标题位置
self.titleLabel.y = self.height - self.titleLabel.height; //按钮高度减去标题label高度就是label的y
//标题自适应，系统计算文字宽度，设置label宽度
[self.titleLabel sizeToFit]; //要先计算，再设置center
self.titleLabel.centerX = self.width * 0.5;
}
方案三（推荐）：注意需要button的frame确定以后再调用，否则会失效
//UIButton添加扩展
- (void)verticalImageAndTitle:(CGFloat)spacing {
self.titleLabel.backgroundColor = [UIColor greenColor];
CGSize imageSize = self.imageView.frame.size;
CGSize titleSize = self.titleLabel.frame.size;
CGSize textSize = [self.titleLabel.text sizeWithFont:self.titleLabel.font];
CGSize frameSize = CGSizeMake(ceilf(textSize.width), ceilf(textSize.height));
if (titleSize.width + 0.5 < frameSize.width) {
titleSize.width = frameSize.width;
}
CGFloat totalHeight = (imageSize.height + titleSize.height + spacing);
self.imageEdgeInsets = UIEdgeInsetsMake(- (totalHeight - imageSize.height), 0.0, 0.0, - titleSize.width);
self.titleEdgeInsets = UIEdgeInsetsMake(0, - imageSize.width, - (totalHeight - titleSize.height), 0);
}
计算textSize的方法是过时，我们可以替换掉：
CGSize constrainedSize = CGSizeMake(0, MAXFLOAT);
CGRect textRect = [self.titleLabel.text boundingRectWithSize:constrainedSize options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:self.titleLabel.font} context:nil];
CGSize textSize = textRect.size;