介紹兩種管理UIButton中的Image和Title的方法
1栅屏、自定義UIButton
#import "BBImageButton.h"
@implementation BBImageButton
- (instancetype)initWithTitle:(NSString *)title
{
self = [super initWithFrame:CGRectZero];
if (self) {
[self setTitle:title forState:UIControlStateNormal];
[self setImage:[UIImage imageNamed:@"navigationbar_arrow_down"] forState:UIControlStateNormal];
[self setImage:[UIImage imageNamed:@"navigationbar_arrow_up"] forState:UIControlStateSelected];
// 設(shè)置button為Selected狀態(tài)時(shí)，點(diǎn)擊button時(shí)蝴光，圖片不出現(xiàn)閃動(dòng)
[self setImage:[UIImage imageNamed:@"navigationbar_arrow_up"] forState:(UIControlStateSelected | UIControlStateHighlighted)];
}
return self;
}
- (void)layoutSubviews
{
[super layoutSubviews];
self.imageView.frame = CGRectMake(0, 0, CGRectGetWidth(self.imageView.frame), CGRectGetHeight(self.imageView.frame));
self.imageView.center = CGPointMake(CGRectGetWidth(self.frame) / 2, self.imageView.center.y);
self.titleLabel.frame = CGRectMake(0, CGRectGetMaxY(self.imageView.frame) + 10, CGRectGetWidth(self.titleLabel.frame), CGRectGetHeight(self.titleLabel.frame));
self.titleLabel.center = CGPointMake(self.imageView.center.x, self.titleLabel.center.y);
}
@end
如下圖所示：
6.png
左右布局
- (void)layoutSubviews
{
[super layoutSubviews];
CGFloat x = CGRectGetWidth(self.frame) * 0.5 - (CGRectGetWidth(self.titleLabel.frame) - CGRectGetWidth(self.imageView.frame));
self.titleLabel.frame = CGRectMake(x, self.titleLabel.frame.origin.y, CGRectGetWidth(self.titleLabel.frame), CGRectGetHeight(self.titleLabel.frame));
self.imageView.frame = CGRectMake(CGRectGetMaxX(self.titleLabel.frame), self.imageView.frame.origin.y, CGRectGetWidth(self.imageView.frame), CGRectGetHeight(self.imageView.frame));
}
7.png
在這里面有個(gè)小技巧俊嗽，如果想要文字跟圖片有一定間距的話(huà)墨辛，不一定非得改變它的坐標(biāo)瘪吏，可以在title賦值的時(shí)候這樣處理帅戒，“加一個(gè)空格”寞埠，作為程序猿,我們不應(yīng)該放棄任何一個(gè)偷懶的機(jī)會(huì)驶悟。
title = [NSString stringWithFormat:@"%@ ", title];
8.png
2寥闪、UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局。
默認(rèn)情況下,是圖片在左,文字在右,垂直居中顯示,如下圖:
button.titleEdgeInsets = UIEdgeInsetsZero;
button.imageEdgeInsets = UIEdgeInsetsZero;
1.png
設(shè)置如下布局后,圖片和文字都居中顯示蓝丙。
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, 0);
// button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, button.titleLabel.frame.size.width);
// 由于iOS8中titleLabel的size為0级遭，用上面這樣設(shè)置有問(wèn)題，修改一下即可
button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.intrinsicContentSize.width);
2.png
如果想圖片在上,文字在下,水平居中顯示,則按下面設(shè)置即可:
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, -button.imageView.frame.size.height, 0);
// button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.frame.size.height, 0, 0, -button.titleLabel.frame.size.width);
// 由于iOS8中titleLabel的size為0渺尘，用上面這樣設(shè)置有問(wèn)題挫鸽，修改一下即可
button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height, 0, 0, -button.titleLabel.intrinsicContentSize.width);
3.png
如果覺(jué)得圖片和文字離的太近了，稍微分開(kāi)一點(diǎn)：
CGFloat offset = 40.0f;
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, -button.imageView.frame.size.height-offset/2, 0);
// button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.frame.size.height-offset/2, 0, 0, -button.titleLabel.frame.size.width);
// 由于iOS8中titleLabel的size為0鸥跟，用上面這樣設(shè)置有問(wèn)題丢郊，修改一下即可
button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height-offset/2, 0, 0, -button.titleLabel.intrinsicContentSize.width);
4.png
文字左對(duì)齊，圖片右對(duì)齊
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width - button.frame.size.width + button.titleLabel.intrinsicContentSize.width, 0, 0);
button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.frame.size.width - button.frame.size.width + button.imageView.frame.size.width);
5.png
