iOS message cell width/height using auto layout

Question

The Goal

I'm trying to create a dynamic message cell using auto-layout.

enter image description here

What I've Tried

The cell is positioning correctly, for the most part, with auto-layout given the following constraints:

enter image description here

The Problem

My first problem was the message label (Copyable Label) width was constrained. That seems to be resolved by using setPreferredMaxLayoutWidth: as described in this question.

Height is still a problem. As you can see, the message bubble is still cutting off. In addition, I'm not sure how to determine the message cell height for the table view.

I expected auto-layout to somehow just work. I've read the answer here, but it seems like a lot to of steps.

The Question

First, is a case where auto-layout is more complex than traditional frame arithmetic?

Second, using auto-layout, how can I determine the height of the resulting cell?

As the author of the post you linked to, may I suggest that you take a look at this sample project on GitHub? Auto Layout in table views definitely does not "just work" (unfortunately), but it's not terribly difficult to get the hang of it. My detailed explanation on that post is significantly more complex than the code required once you understand the conceptual aspect. — smileyborg
@smileyborg, thanks. I worked through your demo all afternoon. Unfortunately, it still doesn't expand the message label quite right. — Jason McCreary
Did all the sample project code make sense? You're going to have to either provide more specifics on the issues you're having, and/or (ideally) also provide either code examples or a sample project. Happy to help with more info. By the way, I'd be willing to bet that it's your constraints which aren't configured quite right and are causing the issues. It can be very difficult to debug them from IB - have you tried creating them in code instead (like in that sample project)? — smileyborg
Using your project as a template, I tried recreating a simple version of the message bubble in code. It did not work. As such, I abandoned auto layout and did everything with CGRect math. As such, this question remains unanswered. I'll post a sample project on GitHub if I figure it out. — Jason McCreary

Tancrede Chazallet Tancrede Chazallet · Accepted Answer · 2013-11-19T16:51:01

I fully use Auto Layout and what you speak about is kinda a problem. I didn't want to modify the way intrinsic size is calculated for performance purpose of UITable.

So I used a very simple way that is correct in the end. It's ok if your cell is simple, can become such hard if your cell contains more than one variable text.

I defined my cells normally, where you can put a UILabel that fits the insets (no problem about it). Then, in your table datasource, you define directly the height of the cell:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return [TEXTOFYOURCELL sizeWithFont:[UIFont systemFontOfSize:14] constrainedToSize:CGSizeMake(300, 1000)].height + 31; // Here it's defined for 15 of top and bottom insets, define +1 than the size of the cell is important.
}

EDIT : Here some code about the UILabel in the cell (in init method).

__titleLabel = [UILabel new];
__titleLabel.numberOfLines = 0;
[self.contentView addSubview:__titleLabel]; // adding to contentView rather than self is very important !
[__titleLabel keepInsets:UIEdgeInsetsMake(0, 15, 0, 15)];

I use this API : https://github.com/iMartinKiss/KeepLayout to manage auto layout simpler.