1.先看一下效果图
使用系统Button根据文字内容自动计算宽度效果如下:
代码如下:
UIButton *button = [[UIButton alloc]init];
button.titleLabel.font = [UIFont boldSystemFontOfSize:15];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
button.backgroundColor = [UIColor lightGrayColor];
button.titleLabel.numberOfLines = 0;
button.titleLabel.textAlignment = NSTextAlignmentLeft;
[button setTitleEdgeInsets:UIEdgeInsetsMake(10, 10, -10, -10)];
[button mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.mas_equalTo(10);
make.bottom.mas_equalTo(self.mas_bottom).offset(-15);
make.right.mas_equalTo(-10);
}];
- 如果button 设置文字过多,如上面A/B 选项,系统Button就不会根据文字自动计算宽度,如果设置文字过少,如上面的C/D选项,系统Button暂且还能满足要求。
如果我们想彻底解决这个问题,怎么办呢?
- 我们知道系统Button内部有两个控件,
UILabel
和UIImageView
,系统自带的UILabel 已经满足不了我们的要求,所以我们要自定义一个UILabel控件,让新添加的UILabel控件跟UIButton之间产生约束,把文字信息显示在自定义的UILabel上,进而达到我们的要求。
代码如下:
- 1.
Level4AnswerButton.h
文件声明一个label属性
@interface Level4AnswerButton : UIButton
@property (nonatomic, strong) UILabel *label;
@end
- 2.
Level4AnswerButton.m
文件重写-(instancetype)init
方法
-(instancetype)init {
if (self = [super init]) {
UILabel *label = [[UILabel alloc]init];
self.label = label;
label.textColor = [UIColor blackColor];
label.numberOfLines = 0;
[self addSubview:label];
//关闭autoresizing约束
label.translatesAutoresizingMaskIntoConstraints = NO;
//添加上方约束
NSLayoutConstraint *labelTop = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1 constant:10];
[self addConstraint:labelTop];
//添加左边约束
NSLayoutConstraint *labelLeft = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeft multiplier:1 constant:10];
[self addConstraint:labelLeft];
//添加下边约束
NSLayoutConstraint *labelBottom = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1 constant:-10];
[self addConstraint:labelBottom];
//添加右边约束
NSLayoutConstraint *labelRight = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeRight multiplier:1 constant:-10];
[self addConstraint:labelRight];
}
return self;
}
-
3.
NSLayoutConstraint
约束中可以设置UILabel在UIButton中的位置,这个自行设置 -
4.在自定义的UIButton中重写
setTitle
方法
-(void)setTitle:(NSString *)title forState:(UIControlState)state {
self.label.text = title;
}
-(UILabel *)titleLabel {
return self.label;
}
-(void)setTitleColor:(UIColor *)color forState:(UIControlState)state {
self.label.textColor = color;
}
- 5.用自定义类创建Button
Level4AnswerButton *button = [[Level4AnswerButton alloc]init];
button.titleLabel.font = [UIFont boldSystemFontOfSize:15];
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
button.backgroundColor = [UIColor whiteColor];
button.titleLabel.numberOfLines = 0;
再来一下最终的效果图:
这样我们的目的就到了,Button 根据文字内容自动计算宽度。