iOS auto layout : Display the cell only after its contents are updated

Question

I use auto layout and display a table with custom dynamic cells. Basically table displays chat between 2 persons. Thus, text message varies for each cell.

The issue here is that first cells are displayed and then within a second, its contents are resized. This is clearly visible and looks bad.

See below images to get idea of how it looks before and after resizing.

Before resizing :

enter image description here

After resizing :

enter image description here

I know there is a similar question on SO, but its answer does not really satisfy the need. I want to avoid overriding layoutSubviews() method as I don't think its a good enough solution.

I tried below code to unhide cell's contentView once they are displayed. But it does not work.

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
   // At the begining
    cell.contentView.hidden = NO;
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    ...
    // Before returning cell
    cell.contentView.hidden = YES;
    return cell;
}

Is there a way to delay displaying cell until they are resized to fit their contents?

UPDATE :

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

        cell.textString.text = ...;
        cell.textString.frame = ...;
        cell.timeLabel.text = ...;                                             // set timeLabel to display date and time

        cell.userLabel.text = ...;       // set userLabel to display userName

        if (displaying cell where message is sent by user)
        {
            // Set image for sender
            cell.chatCellBackground.image = [[UIImage imageNamed:@"bubbleMine.png"] stretchableImageWithLeftCapWidth:STRETCHED_WIDTH topCapHeight:STRETCHED_HEIGHT];

            cell.chatCellBackground.frame = ...;

        }
        else
        {
            // set bubble for receiver
            cell.chatCellBackground.image = [[UIImage imageNamed:@"bubbleSomeone.png"] stretchableImageWithLeftCapWidth:STRETCHED_WIDTH topCapHeight:STRETCHED_HEIGHT];

            cell.chatCellBackground.frame = ...;
        }
    }

    [cell setNeedsLayout];
    [cell layoutIfNeeded];
    return cell;
}

Where are you loading the content of the cell? This should be done in your cellForRowAtIndexPath method. — Clint Warner, Jan 30 '14 at 13:53
@ClintWarner I do that in `cellForRowAtIndexPath:` method only. I just have not added it in question. — Geek, Jan 30 '14 at 15:43
There is no reason why you should need to delay displaying the cell until the subviews resize to fit their contents. If everything is happening correctly, the cell and all of its subviews should have their content set and should layout and resize well in advance of the first time the cell and its view hierarchy draw onscreen. It's going to be difficult to help you debug where something has gone wrong though without seeing more of your code. — smileyborg, Jan 30 '14 at 22:40
@RaphaelOliveira I already call it. Please check the code I added to my question. — Geek, Jan 31 '14 at 05:15
check this it will help you http://stackoverflow.com/questions/18614178/tableview-showing-the-wrong-size-of-cell — kamalesh kumar yadav, Jan 31 '14 at 05:17
@smileyborg I have made changes to code and asked new question that I face with new code. Please have a look http://stackoverflow.com/questions/21474157/uitableview-cell-contents-not-displayed-properly. — Geek, Jan 31 '14 at 07:51

score 1 · Accepted Answer · answered Mar 08 '14 at 10:52

I added below method in custom UITableViewCell's class.

- (void)layoutSubviews
{
    [super layoutSubviews];
    CGFloat maxTextWidth = [UIScreen mainScreen].bounds.size.width * 0.40;
    self.userLabel.preferredMaxLayoutWidth = maxTextWidth;
    self.chatMessage.preferredMaxLayoutWidth = maxTextWidth;
    self.timeLabel.preferredMaxLayoutWidth = self.timeLabel.frame.size.width;
    [super layoutSubviews];
}

I also found that returning exactly right height of cell in

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

method is crucial.

Hint :

If height of any view is greater than expected then possibly calculated height of cell is greater than what is actually required.
If any of views is shrinking vertically or not displaying whole content then possibly calculated height of cell is lesser than what is actually required.

Yoy can test if height is wrong by adding/removing constant value to height (variable) you calculate for cell.

iOS auto layout : Display the cell only after its contents are updated

1 Answers1