自定义一个支持图片和文本上下左右布局且自适应大小的Button

在做项目时，经常遇到一个图片带一个文本的需求，例如点赞数、评论数这类的。一般这种用UIButton做比较好，但是系统的有点限制，就是图片和文本只能在水平方向上变动。
如果需求就是水平布局的话，那就直接用系统的就好了。系统默认是图片在左，文字在右。

self.systemBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[self.systemBtn setTitle:@"系统按钮" forState:UIControlStateNormal];
[self.systemBtn setImage:[UIImage imageNamed:@"icon_like_big_h"] forState:UIControlStateNormal];
[self.systemBtn setBackgroundColor:[UIColor blueColor]];
[self.view addSubview:self.systemBtn];
[self.systemBtn mas_makeConstraints:^(MASConstraintMaker *make) {
      make.centerX.mas_equalTo(0);
      make.centerY.mas_equalTo(-50);
 }];

如果是想要图片在右边，那就设置一个从右向左布局的属性就行。

[self.systemBtn setSemanticContentAttribute:UISemanticContentAttributeForceRightToLeft];

设置setSemanticContentAttribute之前

设置setSemanticContentAttribute之后

当想实现图片在上或者图片在下这两种布局时，一般就要自定义按钮了。实现

- (CGRect)titleRectForContentRect:(CGRect)contentRect

和

- (CGRect)imageRectForContentRect:(CGRect)contentRect

方法，根据contentRect返回相应的图片和文本位置。使用该方案，外面布局时需要设置好大小，如果不设置，系统会按照水平方向布局时需要的大小来显示。下面是随便自定义一个按钮，文本占高度的0.3，图片占0.7。实现上面两个方法的效果：

- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    return CGRectMake(0, 0, CGRectGetWidth(contentRect), CGRectGetHeight(contentRect) * 0.3);
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    return CGRectMake(0, CGRectGetHeight(contentRect) * 0.3, CGRectGetWidth(contentRect), CGRectGetHeight(contentRect) * 0.7);
}

自定义按钮

这里一般会根据自身需求来计算文本和图片的真实大小，然后排版，效果肯定比这个要好。，但是就有一点不爽的是，布局时得指定大小。当我文本是动态设置的时候，我总是需要重新计算布局大小，然后更新约束。其实UIView有一个属性可以设置控件的固有大小，如果设置了固有大小，当不明确指定控件大小时，会使用固有大小，（注意是没有设置大小时，如果指定了大小，那就以开发者设置的为准）它就是

@property(nonatomic, readonly) CGSize intrinsicContentSize;

查看头文件发现还有一个实例方法：

- (void)invalidateIntrinsicContentSize NS_AVAILABLE_IOS(6_0); // call this when something changes that affects the intrinsicContentSize.  Otherwise UIKit won't notice that it changed.

说的是如果调用了这个方法，会改变intrinsicContentSize，通知UIKit该控件有改变，需要重新渲染。
所以结合一下上述两种，就可以实现一个无需设置大小，能自定义图片和文字排版的按钮。代码贴一下

//BWButton.h
#import 

typedef NS_ENUM(NSUInteger, BWImagePosType) {
    BWImageLeft = 0,
    BWImageRight,
    BWImageTop,
    BWImageBottom,
};
NS_ASSUME_NONNULL_BEGIN

@interface BWButton : UIButton
@property (nonatomic, assign) BWImagePosType type;
@end

NS_ASSUME_NONNULL_END

#import "BWButton.h"

@interface BWButton()
@property (nonatomic, assign) CGSize extendSize;
@property (nonatomic, strong) UILabel *caculateLabel;
@end

@implementation BWButton
- (instancetype)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder]) {
        [self setupSubViews];
    }
    return self;
}

- (void)awakeFromNib
{
    [super awakeFromNib];
    
    self.caculateLabel.text = self.currentTitle;
}

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        [self setupSubViews];
    }
    
    return self;
}

- (void)setupSubViews
{
    self.extendSize = CGSizeMake(UIViewNoIntrinsicMetric, UIViewNoIntrinsicMetric);
    self.translatesAutoresizingMaskIntoConstraints = NO;
}

- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    return [self caculateTitleRect:contentRect];
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    return [self caculateImageRect:contentRect];
}

- (void)setTitle:(NSString *)title forState:(UIControlState)state
{
    [super setTitle:title forState:state];
    
    self.caculateLabel.text = title;
    self.extendSize = [self caculateContentSize];
    [self invalidateIntrinsicContentSize];
}

- (void)setImage:(UIImage *)image forState:(UIControlState)state
{
    [super setImage:image forState:state];
    
    self.extendSize = [self caculateContentSize];
    [self invalidateIntrinsicContentSize];
}

- (void)setImageEdgeInsets:(UIEdgeInsets)imageEdgeInsets
{
    [super setImageEdgeInsets:imageEdgeInsets];
    self.extendSize = [self caculateContentSize];
    [self invalidateIntrinsicContentSize];
}

- (void)setTitleEdgeInsets:(UIEdgeInsets)titleEdgeInsets
{
    [super setTitleEdgeInsets:titleEdgeInsets];
    self.extendSize = [self caculateContentSize];
    [self invalidateIntrinsicContentSize];
}

- (CGRect)caculateTitleRect:(CGRect)contentRect
{
    CGSize textSize = self.caculateLabel.frame.size;
    CGFloat w = textSize.width;
    CGFloat h = textSize.height;
    CGFloat x = self.titleEdgeInsets.left;
    CGFloat y = self.titleEdgeInsets.top;
    CGRect imageRect = [self imageRectForContentRect:contentRect];
    if (self.type == BWImageLeft) {
        y = CGRectGetMidY(contentRect) - h*0.5;
        x = CGRectGetMaxX(imageRect) + self.imageEdgeInsets.right + self.titleEdgeInsets.left;
    } else if (self.type == BWImageRight) {
        y = CGRectGetMidY(contentRect) - h*0.5;
    } else if (self.type == BWImageTop) {
        x = CGRectGetMidX(contentRect) - w*0.5;
        y = CGRectGetMaxY(imageRect) + self.imageEdgeInsets.bottom + self.titleEdgeInsets.top;
    } else if (self.type == BWImageBottom) {
        x = CGRectGetMidX(contentRect) - w*0.5;
    }
    
    return CGRectMake(x, y, w, h);
}

- (CGRect)caculateImageRect:(CGRect)contentRect
{
    CGFloat w = self.currentImage.size.width;
    CGFloat h = self.currentImage.size.height;
    CGFloat x = self.imageEdgeInsets.left;
    CGFloat y = self.imageEdgeInsets.top;
    if (self.type == BWImageLeft) {
        y = CGRectGetMidY(contentRect) - h*0.5;
    } else if (self.type == BWImageRight) {
        y = CGRectGetMidY(contentRect) - h*0.5;
        x = CGRectGetWidth(contentRect) - self.imageEdgeInsets.right - w;
    } else if (self.type == BWImageTop) {
        x = CGRectGetMidX(contentRect) - w*0.5;
    } else if (self.type == BWImageBottom) {
        x = CGRectGetMidX(contentRect) - w*0.5;
        y = CGRectGetHeight(contentRect) - self.imageEdgeInsets.bottom - h;
    }
    return CGRectMake(x, y, w, h);
}

- (CGSize)caculateContentSize
{
    self.caculateLabel.font = self.titleLabel.font;
    [self.caculateLabel sizeToFit];
    
    CGSize textSize = self.caculateLabel.frame.size;
    CGSize imageSize = self.currentImage.size;
    CGFloat w = 0;
    CGFloat h = 0;
    if (self.type == BWImageLeft ||
        self.type == BWImageRight) {
        w = self.imageEdgeInsets.left + self.imageEdgeInsets.right + imageSize.width + self.titleEdgeInsets.left + self.titleEdgeInsets.right + textSize.width;
        h = MAX(self.titleEdgeInsets.top + textSize.height + self.titleEdgeInsets.bottom, imageSize.height + self.imageEdgeInsets.top + self.imageEdgeInsets.bottom);
    } else {
        w = MAX(textSize.width + self.titleEdgeInsets.left+self.titleEdgeInsets.right, imageSize.width+self.imageEdgeInsets.left+self.imageEdgeInsets.right);
        h = self.titleEdgeInsets.top + textSize.height + self.titleEdgeInsets.bottom + self.imageEdgeInsets.top + imageSize.height + self.imageEdgeInsets.bottom;
    }
    
    return CGSizeMake(w, h);
}

- (void)setType:(BWImagePosType)type
{
    _type = type;
    [self setImage:self.currentImage forState:UIControlStateNormal];
    [self setTitle:self.currentTitle forState:UIControlStateNormal];
}

- (CGSize)intrinsicContentSize
{
    return self.extendSize;
}

- (UILabel *)caculateLabel
{
    if (!_caculateLabel) {
        _caculateLabel = [UILabel new];
    }
    return _caculateLabel;
}

@end

实现效果

BWButton效果

动态改变文本后的效果

动态改变文本后

Demo地址