Using AutoLayout to stack within two Columns of varying Heights

Question

Targetting iOS 8.1

I am using AutoLayout to lay out a number of Labels in a TableCell. Some of those Labels are optional and some can wrap their Text. They are split

Answer 1

First of all we should not play around wit content-Hugging or compression priority unless there is a situation where you need to change with no option left. The default 250:750 ratio given by apple will suit 90% of the scenario, if auto layout is properly configured. Only in rare cases where there is a conflict for the engine to resize the view based on the fulfilled constraints, we should change hugging/compression priorities.

Your original issue is your labels are being squashed. The labels by default enables intrinsic content size of system, where the engine will decide the label's width and height by default depending upon the labels content and text size. So if you decide your label not to extend the view, then you should set trailing constraint from your right side of your label to the view. In general it will be set to “Equals” property which will not suit our requirement because our label relayed on intrinsic property and we should not provide a standard width to the label. Hence instead of ‘Equals’ it should be ‘Greater than or equal to’ property to the trailing property.

In your scenario, you should not fix height constraint for labels and enable word-wrap feature along 'with number of line’ property for any required label of two line.

you are aware that you should always need to display ‘Yellow label’, ‘green label’ and ‘violet label’ in the right side view, irrespective of the left view has one or two line in the ‘red label’.

So fix a static height for the cell. In right hand side view, Fix top constraint for the ‘orange' label, and bottom constraint for the ‘yellow’ label. So that centre ‘red’ label will get a explicit height which can accommodate one/two lines according to the requirement. And give sufficient constraints to the right side view to fulfil your requirement.

If this is not solving you issue or any discussion upon my solution, comment below.