如何布局包含Image和Title的UIButton

介绍两种管理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];
        // 设置button为Selected状态时，点击button时，图片不出现闪动
        [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

在这里面有个小技巧，如果想要文字跟图片有一定间距的话，不一定非得改变它的坐标，可以在title赋值的时候这样处理，“加一个空格”，作为程序猿,我们不应该放弃任何一个偷懒的机会。

title = [NSString stringWithFormat:@"%@ ", title];

8.png

2、UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局。

默认情况下,是图片在左,文字在右,垂直居中显示,如下图:

button.titleEdgeInsets = UIEdgeInsetsZero;
button.imageEdgeInsets = UIEdgeInsetsZero;

1.png

设置如下布局后,图片和文字都居中显示。

 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，用上面这样设置有问题，修改一下即可
 button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -button.titleLabel.intrinsicContentSize.width);

2.png

如果想图片在上,文字在下,水平居中显示,则按下面设置即可:

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，用上面这样设置有问题，修改一下即可
button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height, 0, 0, -button.titleLabel.intrinsicContentSize.width);

3.png

如果觉得图片和文字离的太近了，稍微分开一点：

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，用上面这样设置有问题，修改一下即可
button.imageEdgeInsets = UIEdgeInsetsMake(-button.titleLabel.intrinsicContentSize.height-offset/2, 0, 0, -button.titleLabel.intrinsicContentSize.width);

4.png

文字左对齐，图片右对齐

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