Several multiline labels in UITableViewCell, auto layout in storyboard xcode 6.3.2

Question

I have problems with truncated text in UILabels within a tableviewcell. So far, I have read and tested the solutions in the following links (among many others similar):

• Multiple UILabels inside a self sizing UITableViewCell
• ios8 autolayout: BOTH multi-line(maybe 0 line) label
• Using Auto Layout in UITableView for dynamic cell layouts & variable row heights

but I cannot seem to get it to work on first load if I set up the cell with “standard” top, leading, trailing and bottom auto layout constraints. I can, however, if I uncheck the “Relative to margin” for the superview item and use e.g. Equals: Default

If I rotate the device or scroll down and up again, it works for both cases.

The labels are connected with outlets on a custom cell and are placed above each other vertically in the prototype cell; they have three superview constraints each, with a “standard” vertical distance between the labels. The hugging priority is set higher on the topmost label to get rid of the warning in the IB, even though it does not matter for the result.

Relevant code:

TableViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];
    if (NSFoundationVersionNumber > NSFoundationVersionNumber_iOS_7_1) {
        self.tableView.estimatedRowHeight = self.tableView.rowHeight;
        self.tableView.rowHeight = UITableViewAutomaticDimension; }
    }


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    TableViewCellIB *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    [cell adjustSizeToMatchWidth:CGRectGetWidth(self.tableView.frame)];

    cell.titleLabel.text = @"Veeeeeeeery looooooooooooooooong Tiiiiitle";
    cell.messageLabel.text = @"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda. Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.";

    [cell setNeedsUpdateConstraints];
    [cell updateConstraintsIfNeeded];

    return cell; }

TableViewCellIB.m

- (void)adjustSizeToMatchWidth:(CGFloat)width {
    CGRect rect = self.frame;
    rect.size.width = width;
    self.frame = rect;

    rect = self.contentView.bounds;
    rect.size.height = 99999.0;
    rect.size.width = 99999.0;
    self.contentView.bounds = rect; }

One small problem with “Relative to margin” unchecked and "Equals: Default", is that, even though the text is not truncated in the labels, the cell does not look very nice with these setting, since the margins are far to large in my opinion. Is there some other “default” way to get this to work from Storyboard, or do I have to use “magic numbers" for the Equals in the constraints?

Furthermore, how would I get it to work if I do this programmatically?

As far as I understand, the standard visual format "H:|-[topLabel]-|” defaults to “Relative to margin” since iOS 8.

Thanks in advance!

Answer 1

I had the same issue, where the labels were placed vertically in a UITableViewCell and were working properly when rotated or reloaded. But they didn't show properly the first time.

The link you shared and the answer I found did wonders for me: https://stackoverflow.com/a/26351692

1. I simply added top, bottom, left and right constraints to the labels in the storyboard.
2. Number of lines = 0 and Line Breaks = Word Wrap

3. In viewDidLoad,

   self.tbl_Name.estimatedRowHeight = 200.0f;
   self.tbl_Name.rowHeight = UITableViewAutomaticDimension;
   

4. And finally,

   - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:   (NSIndexPath *)indexPath {
   // dequeue cell...
   
   // do autolayout staffs...or if the autolayout rule has been set in xib, do nothing
   
   [cell layoutIfNeeded];
   
   return cell;
   }
   

All these things, solved my issue. Hope it is helpful to you too.

NOTE::
And more importantly, this issue does NOT arise with Xcode 7 on iOS 9. Apple might have fixed it.

Answer 2

//set constraint properly. don't set fixed width/height. 
//also label's property no. lines=0 

//tempUserCustomCell is @property

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{


    CGFloat heightTest=0.0;

    if (!self.tempUserCustomCell) {
        self.tempUserCustomCell=[self.lifeLineTableView dequeueReusableCellWithIdentifier:@"homeCell"];

    }
    //set values to cal. height
    self.tempUserCustomCell.userName.text = [self.lifeLineAllPostArray[indexPath.row] valueForKey:@"username"];
    self.tempUserCustomCell.messageLabel.text= [self.lifeLineAllPostArray[indexPath.row] valueForKey:@"desc"];
    self.tempUserCustomCell.viewsLabel.text=[NSString stringWithFormat:@"Views %d",[[[self.lifeLineAllPostArray objectAtIndex:indexPath.row] objectForKey:@"views"] intValue]];
    self.tempUserCustomCell.likeDisLikeComment.text=[NSString stringWithFormat:@"Likes %d Dislikes %d",[[[self.lifeLineAllPostArray objectAtIndex:indexPath.row] objectForKey:@"likes"] intValue],[[[self.lifeLineAllPostArray objectAtIndex:indexPath.row] objectForKey:@"dislikes"] intValue]];

    if ([[[self.lifeLineAllPostArray objectAtIndex:indexPath.row] valueForKey:@"comments"] integerValue]==0) {
        [self.tempUserCustomCell.buttonCommentsOutlatet setTitle:@"Comment" forState:UIControlStateNormal];
    }
    else{
        [self.tempUserCustomCell.buttonCommentsOutlatet setTitle:[NSString stringWithFormat:@"Comments %d",[[[self.lifeLineAllPostArray objectAtIndex:indexPath.row] objectForKey:@"comments"] intValue]] forState:UIControlStateNormal];
    }

    self.tempUserCustomCell.messageLabel.font=[UIFont fontWithName:@"Helvetica" size:18];

    //layout cell
    [self.tempUserCustomCell layoutIfNeeded];

    heightTest=[self.tempUserCustomCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;


    return heightTest;


}