Grow TableViewCell height with wrapping Label - ios

Question

I have the following four Labels in a custom TableViewCell which currently look like this:
I have this:
The first, third and fourth labels have their width constraints fixed and maximum number of lines set to 1. The second Label fills the horizontal space between labels one and three.
I would like the second Label to wrap to a maximum of 2 lines and be vertically aligned to the top so that the first line of each label are aligned like this:
I want this:
I have made the background colour of each label grey so that the constraints can be seen.

Answer 1

You can achieve this using self sizing cells. To make that work add those two lines to your UITableview:
tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 50
Then in Interface Builder set the following constraints in your Prototype Cell:
Uncheck "Constraint to margins" on all constraints.
Label 1:
top: 10
left: 10
bottom: greaterOrEqual 10
width: 60 (or whatever the actual width is)
Label 2:
top: 10
left: 10
bottom: 10
Label 3:
top: 10
left: 10
bottom: greaterOrEqual 10
width: 60 (or whatever the actual width is)
Label 4:
top: 10
left: 10
right: 10
bottom: greaterOrEqual 10
width: 60 (or whatever the actual width is)
If you set the constraints like this, the cell height automatically gets higher when the second label wraps its text into a second line.

Answer 2

To top align the UILabels, you can either set the margin top constraint of all UILabels to be constant, or set the top align constraints. To set the top align constraints, select the label and ctrl-drag from the label to another. Select top alignment from the popup.
One thing to keep in mind is that for the second label, set the 4 margin lengths to be around 5pt, but do not constrain its width or height like the others.
Maximum of 2 lines can be configured in the right utilities panel after selecting the second label.
To dynamically change the height of the cell is a little trickier. First you should know if the text is long enough to stretch the label into 2 lines and the height of the label. (See Here) If the text is long enough to take two lines, the method will return a height value that is larger than it would normally. Based on this height change, use the following UITableViewDelegate to dynamically change the height of that UITableViewCell:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
Hope this helps.