UIButton 上默認是圖片在左文字在右新蟆，而大多數(shù)情況這樣默認的的顯示形式都不能滿足我們的需求葛圃，接下來我就這個問題分享一下我的心得。
默認情況下阔拳，不設(shè)置的效果壶唤，都是居中實現(xiàn)
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);
上面的四個數(shù)值是基于原位置而改變的例如：
[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個數(shù)值的位移都是基于原來的位置進行移動的例如第 *
- 一個數(shù)就是基于原來上邊框的位置向下移動，正數(shù)向下移動負數(shù) *
- 向上移動；左右同理躲撰； *
但是這種設(shè)置方式是需要先確定Button的位置的针贬，對于我們很多控件都是使用Masnory來進行布局的，這種方式用起來效果非常有限（個人經(jīng)驗拢蛋，無科學(xué)根據(jù)）桦他，這時候采用自定義按鈕的方式來進行布局，效果明顯很多：
- (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;
//設(shè)置標題位置
self.titleLabel.y = self.height - self.titleLabel.height; //按鈕高度減去標題label高度就是label的y
//標題自適應(yīng)，系統(tǒng)計算文字寬度础锐，設(shè)置label寬度
[self.titleLabel sizeToFit]; //要先計算嗓节，再設(shè)置center
self.titleLabel.centerX = self.width * 0.5;
}
方案三（推薦）：注意需要button的frame確定以后再調(diào)用荧缘，否則會失效
//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;
