在做项目时，经常遇到一个图片带一个文本的需求，例如点赞数、评论数这类的。一般这种用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 <UIKit/UIKit.h>
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地址
