IOS - UILabel dynamic height in UIView using AutoLayout - ios

Question

I have a UITableView and custom UITableViewCell. I have added AutoLayout inside the cell and in this cell i have a UILabel that needs to dynamically change its height and then i have a UIView that contains other subviews including this UILabel that needs its height dynamically changed. I get no errors but this is the custom UITableViewCell:
The dynamic text should force the bottom UIView after the dynamic text. But as you can see the dynamic text passes the bottom UIView.
#import "PostTableViewCell.h"
#implementation PostTableViewCell
#synthesize main;
#synthesize top;
#synthesize center;
#synthesize bottom;
#synthesize labelMessage;
#synthesize labelCat;
#synthesize labelUser;
#synthesize labelDate;
#synthesize imageviewThreadImage;
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
[self.contentView setTranslatesAutoresizingMaskIntoConstraints:NO];
self.contentView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
CGRect screenBound = [[UIScreen mainScreen] bounds];
CGSize screenSize = screenBound.size;
CGFloat screenWidth = screenSize.width;
CGFloat screenHeight = screenSize.height;
main = [UIView new];
[self.contentView addSubview:main];
main.translatesAutoresizingMaskIntoConstraints = NO;
//[main sizeToFit];
main.backgroundColor = [UIColor whiteColor];
top = [UIView new];
[main addSubview:top];
top.translatesAutoresizingMaskIntoConstraints = NO;
//[top sizeToFit];
top.backgroundColor = [UIColor whiteColor];
labelUser = [UILabel new];
[top addSubview:labelUser];
labelUser.translatesAutoresizingMaskIntoConstraints = NO;
//[labelUser sizeToFit];
[labelUser setFont:[UIFont systemFontOfSize:14]];
labelUser.textColor = [UIColor colorWithRed:(114.0/255.0) green:(114.0/255.0) blue:(114.0/255.0) alpha:1.0];
labelDate = [UILabel new];
[top addSubview:labelDate];
labelDate.translatesAutoresizingMaskIntoConstraints = NO;
[labelDate sizeToFit];
[labelDate setFont:[UIFont systemFontOfSize:14]];
labelDate.textColor = [UIColor colorWithRed:(114.0/255.0) green:(114.0/255.0) blue:(114.0/255.0) alpha:1.0];
center = [UIView new];
[main addSubview:center];
center.translatesAutoresizingMaskIntoConstraints = NO;
[center sizeToFit];
center.backgroundColor = [UIColor whiteColor];
imageviewThreadImage = [UIImageView new];
[center addSubview:imageviewThreadImage];
imageviewThreadImage.translatesAutoresizingMaskIntoConstraints = NO;
imageviewThreadImage.backgroundColor = [UIColor colorWithRed:(207.0/255.0) green:(215.0/255.0) blue:(248.0/255.0) alpha:1.0];
labelMessage = [UILabel new];
[center addSubview:labelMessage];
labelMessage.translatesAutoresizingMaskIntoConstraints = NO;
[labelMessage sizeToFit];
[labelMessage setFont:[UIFont systemFontOfSize:14]];
labelMessage.preferredMaxLayoutWidth = screenWidth - 10 - 36;
labelMessage.lineBreakMode = NSLineBreakByWordWrapping;
labelMessage.numberOfLines = 0;
labelMessage.textColor = [UIColor lightGrayColor];
bottom = [UIView new];
[main addSubview:bottom];
bottom.translatesAutoresizingMaskIntoConstraints = NO;
[bottom sizeToFit];
labelCat = [UILabel new];
[bottom addSubview:labelCat];
labelCat.translatesAutoresizingMaskIntoConstraints = NO;
[labelCat sizeToFit];
[labelCat setFont:[UIFont systemFontOfSize:12]];
labelCat.textColor = [UIColor colorWithRed:(58.0/255.0) green:(82.0/255.0) blue:(207.0/255.0) alpha:1.0];
}
return self;
}
- (void)layoutSubviews
{
[super layoutSubviews];
// Make sure the contentView does a layout pass here so that its subviews have their frames set, which we
// need to use to set the preferredMaxLayoutWidth below.
[self.contentView setNeedsLayout];
[self.contentView layoutIfNeeded];
// Set the preferredMaxLayoutWidth of the mutli-line bodyLabel based on the evaluated width of the label's frame,
// as this will allow the text to wrap correctly, and as a result allow the label to take on the correct height.
self.labelMessage.preferredMaxLayoutWidth = CGRectGetWidth(self.labelMessage.frame);
}
- (void)updateConstraints {
[super updateConstraints];
if (self.didSetupConstraints) return;
NSDictionary *viewsDictionary7 = #{#"main":main};
NSArray *constraint_H37 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[main]|"
options:0
metrics:nil
views:viewsDictionary7];
NSArray *constraint_V37 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[main]|"
options:0
metrics:nil
views:viewsDictionary7];
[self.contentView addConstraints:constraint_H37];
[self.contentView addConstraints:constraint_V37];
NSDictionary *viewsDictionary3 = #{#"top":top,#"center":center,#"bottom":bottom,#"labelMessage":labelMessage};
NSArray *constraint_H3 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-5-[top]-5-[center]-5-[bottom]-10-|"
options:0
metrics:nil
views:viewsDictionary3];
NSArray *constraint_H33 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[top]|"
options:0
metrics:nil
views:viewsDictionary3];
NSArray *constraint_H333 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[center]|"
options:0
metrics:nil
views:viewsDictionary3];
NSArray *constraint_H3335657 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[bottom]|"
options:0
metrics:nil
views:viewsDictionary3];
NSDictionary *viewsDictionary4 = #{#"labelUser":labelUser,#"labelDate":labelDate};
NSArray *constraint_H4 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[labelUser]|"
options:0
metrics:nil
views:viewsDictionary4];
NSDictionary *viewsDictionary45 = #{#"labelDate":labelDate};
NSArray *constraint_H4555 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[labelDate]|"
options:0
metrics:nil
views:viewsDictionary45];
NSArray *constraint_H44 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[labelUser]-20-[labelDate]-5-|"
options:0
metrics:nil
views:viewsDictionary4];
NSDictionary *viewsDictionary48 = #{#"labelMessage":labelMessage,#"imageviewThreadImage":imageviewThreadImage};
NSArray *constraint_H48 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-0-[labelMessage]"
options:0
metrics:nil
views:viewsDictionary48];
NSArray *constraint_H48342 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-8-[imageviewThreadImage(36)]|"
options:0
metrics:nil
views:viewsDictionary48];
NSArray *constraint_H448 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[imageviewThreadImage(36)]-5-[labelMessage]-5-|"
options:0
metrics:nil
views:viewsDictionary48];
NSDictionary *viewsDictionary488 = #{#"labelCat":labelCat};
NSArray *constraint_H488 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-5-[labelCat]|"
options:0
metrics:nil
views:viewsDictionary488];
NSArray *constraint_H4488 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[labelCat]"
options:0
metrics:nil
views:viewsDictionary488];
[main addConstraints:constraint_H3];
////[main addConstraints:constraint_H33];
[main addConstraints:constraint_H333];
[top addConstraints:constraint_H4];
[top addConstraints:constraint_H44];
[center addConstraints:constraint_H48];
[center addConstraints:constraint_H448];
[top addConstraints:constraint_H4555];
[main addConstraints:constraint_H3335657];
[main addConstraints:constraint_H488];
[main addConstraints:constraint_H48342];
[main addConstraints:constraint_H4488];
self.didSetupConstraints = YES;
}
- (void)awakeFromNib {
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
#end
This is the result i get:

Answer 1

Here is your answer redoc01
- (CGFloat)tableView:(UITableView *)aTableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
// Get table dat
static NSString *CellIdentifier = #"CustomCell";
UITableViewCell *cell = [aTableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
//Create Cell
NSArray *nib;
nib = [[NSBundle mainBundle] loadNibNamed:CellIdentifier owner:self options:nil];
cell = (UITableViewCell *) [nib objectAtIndex:0];
}
if(indexPath.section == 0) {
UILabel *dateLable = (UILabel *) [cell.contentView viewWithTag:CELL_DATE_LABLE];
dateLable.text = _string3;
[dateLable layoutIfNeeded];
return dateLable.frame.size.height;
}
}
Let me know your feedback..

Answer 2

I solved it by changing the AutoLayout, this is the modified UITableViewCell that makes it work with AutoLayout:
#import "PostTableViewCell.h"
#implementation PostTableViewCell
#synthesize main;
#synthesize top;
#synthesize center;
#synthesize centerLeft;
#synthesize centerRight;
#synthesize bottom;
#synthesize labelMessage;
#synthesize labelCat;
#synthesize labelUser;
#synthesize labelDate;
#synthesize imageviewThreadImage;
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
[self.contentView setTranslatesAutoresizingMaskIntoConstraints:NO];
self.contentView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
CGRect screenBound = [[UIScreen mainScreen] bounds];
CGSize screenSize = screenBound.size;
CGFloat screenWidth = screenSize.width;
CGFloat screenHeight = screenSize.height;
main = [UIView new];
//[self.contentView addSubview:main];
main.translatesAutoresizingMaskIntoConstraints = NO;
[main sizeToFit];
main.backgroundColor = [UIColor whiteColor];
top = [UIView new];
[self.contentView addSubview:top];
top.translatesAutoresizingMaskIntoConstraints = NO;
[top sizeToFit];
top.backgroundColor = [UIColor whiteColor];
labelUser = [UILabel new];
[top addSubview:labelUser];
labelUser.translatesAutoresizingMaskIntoConstraints = NO;
[labelUser sizeToFit];
[labelUser setFont:[UIFont systemFontOfSize:14]];
labelUser.textColor = [UIColor colorWithRed:(114.0/255.0) green:(114.0/255.0) blue:(114.0/255.0) alpha:1.0];
labelDate = [UILabel new];
[top addSubview:labelDate];
labelDate.translatesAutoresizingMaskIntoConstraints = NO;
[labelDate sizeToFit];
[labelDate setFont:[UIFont systemFontOfSize:14]];
labelDate.textColor = [UIColor colorWithRed:(114.0/255.0) green:(114.0/255.0) blue:(114.0/255.0) alpha:1.0];
center = [UIView new];
[self.contentView addSubview:center];
center.translatesAutoresizingMaskIntoConstraints = NO;
[center sizeToFit];
center.backgroundColor = [UIColor whiteColor];
imageviewThreadImage = [UIImageView new];
[center addSubview:imageviewThreadImage];
imageviewThreadImage.translatesAutoresizingMaskIntoConstraints = NO;
imageviewThreadImage.backgroundColor = [UIColor colorWithRed:(207.0/255.0) green:(215.0/255.0) blue:(248.0/255.0) alpha:1.0];
[imageviewThreadImage sizeToFit];
labelMessage = [UILabel new];
[center addSubview:labelMessage];
labelMessage.translatesAutoresizingMaskIntoConstraints = NO;
[labelMessage sizeToFit];
[labelMessage setFont:[UIFont systemFontOfSize:14]];
labelMessage.preferredMaxLayoutWidth = screenWidth - 10 - 36;
labelMessage.lineBreakMode = UILineBreakModeWordWrap;
labelMessage.numberOfLines = 0;
labelMessage.textColor = [UIColor lightGrayColor];
//labelMessage.lineBreakMode = UILineBreakModeWordWrap;
bottom = [UIView new];
[self.contentView addSubview:bottom];
bottom.translatesAutoresizingMaskIntoConstraints = NO;
[bottom sizeToFit];
labelCat = [UILabel new];
[bottom addSubview:labelCat];
labelCat.translatesAutoresizingMaskIntoConstraints = NO;
[labelCat sizeToFit];
[labelCat setFont:[UIFont systemFontOfSize:12]];
labelCat.textColor = [UIColor colorWithRed:(58.0/255.0) green:(82.0/255.0) blue:(207.0/255.0) alpha:1.0];
labelCat.lineBreakMode = UILineBreakModeWordWrap;
labelCat.numberOfLines = 0;
}
return self;
}
- (void)layoutSubviews
{
[super layoutSubviews];
// Make sure the contentView does a layout pass here so that its subviews have their frames set, which we
// need to use to set the preferredMaxLayoutWidth below.
[self.contentView setNeedsLayout];
[self.contentView layoutIfNeeded];
// Set the preferredMaxLayoutWidth of the mutli-line bodyLabel based on the evaluated width of the label's frame,
// as this will allow the text to wrap correctly, and as a result allow the label to take on the correct height.
self.labelMessage.preferredMaxLayoutWidth = CGRectGetWidth(self.labelMessage.frame);
}
- (void)updateConstraints {
[super updateConstraints];
if (self.didSetupConstraints) return;
/**NSDictionary *viewsDictionary7 = #{#"main":main};
NSArray *constraint_H37 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[main]|"
options:0
metrics:nil
views:viewsDictionary7];
NSArray *constraint_V37 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[main]|"
options:0
metrics:nil
views:viewsDictionary7];
[self.contentView addConstraints:constraint_H37];
[self.contentView addConstraints:constraint_V37];**/
NSString *text = labelMessage.text;
NSDictionary *viewsDictionary3 = #{#"top":top,#"center":center,#"bottom":bottom};
NSArray *constraint_H3 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-10-[top]-5-[center(>=50)]-5-[bottom]-10-|"
options:0
metrics:nil
views:viewsDictionary3];
NSArray *constraint_H33 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[top]|"
options:0
metrics:nil
views:viewsDictionary3];
NSArray *constraint_H333 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[center]|"
options:0
metrics:nil
views:viewsDictionary3];
NSArray *constraint_H3335657 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|[bottom]|"
options:0
metrics:nil
views:viewsDictionary3];
NSDictionary *viewsDictionary4 = #{#"labelUser":labelUser,#"labelDate":labelDate};
NSArray *constraint_H4 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[labelUser]|"
options:0
metrics:nil
views:viewsDictionary4];
NSDictionary *viewsDictionary45 = #{#"labelDate":labelDate};
NSArray *constraint_H4555 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[labelDate]|"
options:0
metrics:nil
views:viewsDictionary45];
NSArray *constraint_H44 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[labelUser]-20-[labelDate]-5-|"
options:0
metrics:nil
views:viewsDictionary4];
NSDictionary *viewsDictionary48 = #{#"labelMessage":labelMessage,#"imageviewThreadImage":imageviewThreadImage};
NSArray *constraint_H48 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-5-[labelMessage]|"
options:0
metrics:nil
views:viewsDictionary48];
NSArray *constraint_H48342 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-8-[imageviewThreadImage(36)]"
options:0
metrics:nil
views:viewsDictionary48];
NSArray *constraint_H448345fgdfg = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[imageviewThreadImage(36)]-5-[labelMessage]-5-|"
options:0
metrics:nil
views:viewsDictionary48];
/**NSArray *constraint_H448 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[labelMessage]-5-|"
options:0
metrics:nil
views:viewsDictionary48];**/
NSDictionary *viewsDictionary488 = #{#"labelCat":labelCat};
NSArray *constraint_H488 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[labelCat]|"
options:0
metrics:nil
views:viewsDictionary488];
NSArray *constraint_H4488 = [NSLayoutConstraint constraintsWithVisualFormat:#"H:|-5-[labelCat]"
options:0
metrics:nil
views:viewsDictionary488];
[self.contentView addConstraints:constraint_H3];
[self.contentView addConstraints:constraint_H33];
[self.contentView addConstraints:constraint_H333];
[self.contentView addConstraints:constraint_H4];
[self.contentView addConstraints:constraint_H44];
[self.contentView addConstraints:constraint_H48];
//[self.contentView addConstraints:constraint_H448];
[self.contentView addConstraints:constraint_H4555];
[self.contentView addConstraints:constraint_H3335657];
[self.contentView addConstraints:constraint_H488];
[self.contentView addConstraints:constraint_H48342];
[self.contentView addConstraints:constraint_H4488];
[self.contentView addConstraints:constraint_H448345fgdfg];
self.didSetupConstraints = YES;
}
- (CGFloat)heightForText:(NSString *)bodyText
{
UIFont *cellFont = [UIFont systemFontOfSize:17];
CGSize constraintSize = CGSizeMake(300, MAXFLOAT);
CGSize labelSize = [bodyText sizeWithFont:cellFont constrainedToSize:constraintSize lineBreakMode:UILineBreakModeWordWrap];
CGFloat height = labelSize.height + 10;
return height;
}
- (void)awakeFromNib {
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
#end

Answer 3

In iOS 8 you can use the delegate function to calculate the cell size as such:
- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {
return UITableViewAutomaticDimension;
}
Make sure that you have bottom constraint between the label to the bottom of the contentView and you are done.
Please note it will work only on iOS 8.