Dynamic UILabel size iOS 7 issue

Question

I'm trying resize a label dynamically according to text height. The height can vary from 0 to many lines in the UILabel. I've come up with a solution for this problem that works fine on iOS 8 but fails on iOS 7.1 which I'm trying to support as well.

Autolayout is not being used in this project and all constraints are done programatically.

The code is as follows:

//TableDelegate.m

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
  return 85.0f;
}

//CustomTableViewCell.m

-(UILabel *)commentTextLabel
{
  if(!_commentTextLabel)
  {
    _commentTextLabel = [UILabel new];
    _commentTextLabel.numberOfLines = 0;
    _commentTextLabel.translatesAutoresizingMaskIntoConstraints = NO;
  }

  return _commentTextLabel;
}




  -(void)setupViews
    {
      [self.contentView addSubview:self.profilePictureView];
      [self.contentView addSubview:self.userName];
      [self.contentView addSubview:self.timePublishedLabel];
      [self.contentView addSubview:self.commentTextLabel];
      [self.contentView addSubview:self.seeMoreButton];

      self.backgroundColor = [UIColor salooteInputTextBg];
      self.contentView.backgroundColor = [UIColor salooteInputTextBg];

      NSDictionary *views = @
      {
        @"picture"       : self.profilePictureView,
        @"userName"      : self.userName,
        @"timePublished" : self.timePublishedLabel,
        @"text"          : self.commentTextLabel,
        @"seeMore"       : self.seeMoreButton
      };

      [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-5-[picture(38)]-5-[userName]-5-[timePublished]-5-|" options:0 metrics:nil views:views]];
      [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[picture]-5-[text]-5-|" options:0 metrics:nil views:views]];
      [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-5-[seeMore]-5-|" options:0 metrics:nil views:views]];
      [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-5-[userName]-5-[text]-5-[seeMore]-5-|" options:0 metrics:nil views:views]];
      [self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-5-[picture(38)]" options:0 metrics:nil views:views]];

    }

  -(void)updateConstraints
  {
      [super updateConstraints];
   }

iOS 8 result (left) iOS 7.1 result (right)

I'm not setting any height constraint in my code for the UILabel but rather trying to let the constraints adjust the vertical height for me. If anyone has some input on how to make this work properly on iOS 7.1 I would really appreciate it.

Moving constraints into setupViews produces this: (iOS 7.1 top iOS 8 bottom)

Answer 1

It seems to me you're not adding vertical constraints to the commentTextLabel? You only have this:

//Comment text
[self.contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[picture]-5-[text]-0-|" options:0 metrics:nil views:views]];

Try setting a vertical constraint as well--it's likely that you're getting insufficient constraints errors and iOS 8 is guessing the height better than iOS 7. Also, if you're adding constraints to the views, you shouldn't have to call sizeToFit inside the getter.

Autolayout is not being used in this project and all constraints are done programatically.

You're still using Autolayout even if you're adding the constraints only programatically. :)

---

In response to edits

Your vertical height constraint is insufficient--you only specified the height of the commentTextLabel but not its y-coordinate. Remember that the main objective in Autolayout is to provide a complete set of constraints such that iOS can compute for a view's x, y, width, and height.

I think your constraints are screwed up overall. :) Try adding these rules to the content view instead (I just used 5 for any padding):

H:|-5-[picture(38)]-5-[username]-5-[timePublished]-5-|
H:[picture]-5-[text]-5-|
H:|-5-[seeMore]-5-|
V:|-5-[username]-5-[text]-5-[seeMore]-5-|
V:|-5-[picture(38)]

Also, add your constraints in setupViews--you should only have to add your constraints once and ONLY modify them in updateConstraints. I think updateConstraints is called every time layoutSubviews is called so your constraints keep getting added every time the cell's layout is refreshed.

---

In response to edits

Your label's word wrap style must be set, too. From inside the commentTextLabel, add

_commentTextLabel.lineBreakMode = NSLineBreakByWordWrapping;

Always set that in conjunction to numberOfLines = 0 if you want a UILabel with a dynamic height.

You also need to right-align your seeMore label (it occupies the full width of the cell minus the padding) by setting that label's alignment property.

And try providing a bigger faux height for now--perhaps 150 or 200 instead of 85, just so we can see all the elements.

For the timePublished label, I forgot to indicate the following vertical constraint:

V:|-5-[timePublished]

Answer 2

I have found that the only way to support both iOS7 and iOS8 easily, is to do the height calculations for each cell yourself using off screen prototypes. The following is an excellent article on the issues. I could find no way to mix auto layout height calculation from iOS8 with manual height estimates for iOS7 in a single code base.

Using Auto Layout in UITableView for dynamic cell layouts & variable row heights

The only issue I had with this method was when I used size classes to change the cell font sizes so I could have larger font on iPad etc... This issue is discussed here:

Offscreen UITableViewCells (for size calculations) not respecting size class?