UIButton doesn't resize to fit its titleLabel - ios

Question

I'm working with iOS8 Self-Sizing cell and I want the cell resize to fit its subview, messageBodyButton and profileImageView.
profileImageView's size is fixed. As you can see in the picture below, the messageBodyButton doesn't resize to fit its titleLabel.
Why did this happen? How to fix this bug using Auto Layout?
And when the titleLabel's content changed(say, the model's data changed), how should I update constraints so that the cell height can be calculated correctly?
Here is my code:
RXTChatCell.m:
#property (nonatomic, strong) UILabel *timeLabel;
#property (nonatomic, strong) UIImageView *profileImageView;
#property (nonatomic, strong) UIButton *messageBodyButton;
#property (nonatomic, assign) BOOL needUpdateConstraints;
#property (nonatomic, assign) BOOL didSetUpConstraints;
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
_timeLabel = [[UILabel alloc] init];
_timeLabel.text = #"19:00";
[self.contentView addSubview:_timeLabel];
_profileImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"placeholder"]];
[self.contentView addSubview:_profileImageView];
_messageBodyButton = [UIButton buttonWithType:UIButtonTypeCustom];
[_messageBodyButton.titleLabel setLineBreakMode:NSLineBreakByTruncatingTail];
[_messageBodyButton.titleLabel setTextAlignment:NSTextAlignmentRight];
_messageBodyButton.titleLabel.numberOfLines = 0;
_messageBodyButton.titleLabel.backgroundColor = UIColor.grayColor;
[self.contentView addSubview:_messageBodyButton];
_timeLabel.backgroundColor = UIColor.redColor;
_profileImageView.backgroundColor = UIColor.greenColor;
_messageBodyButton.backgroundColor = UIColor.blueColor;
self.contentView.backgroundColor = UIColor.orangeColor;
}
return self;
}
- (void)updateConstraints
{
if (!self.didSetUpConstraints) { // set up constraints
[_timeLabel makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.contentView.topMargin);
make.centerX.equalTo(self.contentView);
}];
[_profileImageView makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_timeLabel.bottom).offset(10);
make.right.equalTo(self.contentView).offset(-10);
make.width.and.height.equalTo(50);
make.bottom.lessThanOrEqualTo(self.contentView.bottomMargin);
}];
[_messageBodyButton makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_profileImageView);
make.right.equalTo(_profileImageView.left).offset(-10);
make.left.equalTo(self.contentView).offset(10);
make.bottom.lessThanOrEqualTo(self.contentView.bottomMargin);
}];
self.didSetUpConstraints = YES;
}
if (self.needUpdateConstraints){
// here, how should I update constraints?
}
[super updateConstraints];
}
- (void)setMessage:(RXTChatMessage *)message
{
EMTextMessageBody *body = (EMTextMessageBody *)message.messageBody.body;
[self.messageBodyButton setTitle:body.text forState:UIControlStateNormal];
self.needUpdateConstraints = YES;
[self setNeedsUpdateConstraints];
}
RXTChatViewController.m:
- (void)viewDidLoad {
[super viewDidLoad];
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
self.tableView.estimatedRowHeight = 44;
self.tableView.rowHeight = UITableViewAutomaticDimension;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
RXTChatMessage *message = self.messages[indexPath.row];
RXTChatCell *cell = [tableView dequeueReusableCellWithIdentifier:RXTChatCellId];
if (cell == nil) {
cell = [[self alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:RXTChatCellId];
}
cell.message = message;
return cell;
}

Answer 1

Select Your Button -> Go to Editor -> Size to fit content.
Remove fixed height constraint for your button (only set leading,trailing,top bottom) constraint (Superview should be your cell view).
This should solve your problem
let me know if it solves your issue.