UITableView resize cell based on content

Question

Hi I need help with understanding how to resize cell based on its content.

So first of all of course I found many links:

iOS: Multi-line UILabel in Auto Layout

https://www.youtube.com/watch?v=CkvZEJ7dIfw

https://github.com/williamhqs/GSTableViewDynamicHeight

As we said about git example (last link) I can't understand how to change some label and make it works. For example if I delete UILabel and create new one and bind it with content property (content - it is IBOutlet property of bottom label). I seems lost some setting and cell won't stretch.

So I think I don't know to much understanding how to do it.

What I want to understand:

1. How to setup auto layouts in the storyboard or programmatically.
2. Which thing I should handle programmatically to make it done.
3. How the preferred size affects on label. Do we need every time use bonds of superview as a preferred size?

Also in the git example we have one label that changes itself size. What if we have 2 UILabels with dynamic content how to setup it?

If you have some links or videos please drop them here, because I really stuck. Thank you!

I know it's duplicated question but I can't understand how to setup it.

Answer 1

To make Self Sizing Cells works there is three steps:

1. Setup correctly the constraints of the cell (most important the top and bottom constraints)
2. Specify the estimatedRowHeight of your table view
3. Set the rowHeight of your table view to UITableViewAutomaticDimension

for step 2 and 3 it's so easy just add these two lines in you viewDidLoad method

tableView.estimatedRowHeight = 44.0 // or whatever you want
tableView.rowHeight = UITableViewAutomaticDimension

for step 1 which is the most important part of self sizing process what you need to keep in mind is that "self-sizing needs to get its size from your constraints."

Basically we need to make sure that top space and bottom space constraints of our cell is correctly set up here is an example :

just two labels with the constraints top,bottom,right and left space to each other and to container (see image) the UILabels Lines property is 0 so that you allow have multiple lines

Another example from a project that I am working on:

bottom line:

The label constraints should push against the size of the table view cell and make it taller. So always check the top and bottom constraints.

Also you may run intro trouble working with UILabel with multi-lines because

The intrinsic content size of UILabel and NSTextField is ambiguous for multi-line text.

so make sure always to setup the preferredMaxLayoutWidth property of yout label:

- (void)layoutSubviews
{
    [super layoutSubviews];
    self.contentLabel.preferredMaxLayoutWidth = self.contentLabel.frame.size.width;

}

for more infrmation about this issue here read :

iOS Autolayout multi line UILabel

iOS multi-line UILabel in Auto-layout

preferredMaxLayoutWidth

And for more information about Dynamic Table View Cell Height in general here is some useful resources:

UITableView Tutorial: Dynamic Table View Cell Height

Understanding Self Sizing Cells and Dynamic Type in iOS 8

Self Sizing Table View Cells

Mysteries of Auto Layout, Part 1 (wwdc 2015)

Answer 2

Not sure if it will apply to AutoLayout, although when laying out a cell programmatically, running "layoutIfNeeded()" fixed my cell content stretch issue.

layoutIfNeeded was ran at the end of a configure method, used to map values (view model) to UI objects (views)