UITableViewCell AutoLayout with Multi Labels

Question

I am trying to use AutoLayout in UITableViewCell with Multiple labels with percentage calculation. I want equal space between the labels but different widths. Also the width and space will differ in Portrait & Landscape mode as displayed in the following images.

I want the space to be 4 in Portrait and 8 in Landscape.

In Portrait Label1 Width - 50% Label2 Width - 20% Label3 Width - 30%

In Landscape Label1 Width - 50% Label2 Width - 15% Label3 Width - 20% Label4 Width - 15%

I have used horizontal spacing and top and bottom constraints but it is not resulting in proper width & space alignment. Also first row is header so it should not have disclosure indicator and remaining rows should have it. Any help would be appreciated.

Note : Its an universal application and Im using splitview in iPad. In portrait it should display 3 labels as in iPhone and in Landscape it should display 4 labels as mentioned above. Also my master view controller is visible always.

Answer 1

As the size classes do not distinguish between iPad in portrait vs iPad in landscape, you can not use size classes. What you can do is in your xib you define all the constraints required as follows

1. Define the constraint for space between labels and create the IBOutlet for it in your view class, lets name it “gapConstraint”.

2. Define the constraint for width of each label which will be in proportion to superview’s width e.g. for bigger label constraint would be biggerlabel.width = superView.width*0.5.

3. For labels where you want different width in portrait and landscape orientation, define two constraints for width (one for each orientation) and set the priority of one constraint to 750(high - lets say for portrait) and other to 500 (low - lets say for landscape). Create the outlets for all such constraints. We need to define two width constraint (one for portrait and one for landscape) for each label because the multiplier property of NSLayoutConstraint is readonly, hence once the multiplier is assigned we can not change its value. To workaround this, we define two constraints and in the code based on orientation we will activate the more appropriate constraint by changing the priorities.

Override UpdateConstraints method and in this method you can check the current device orientation. If the device orientation is portrait change the gapConstraint’s (created in point1) constant value to 4 while in landscape change the gapConstraint’s (created in point1) constant value to 8. For labels width; in portrait orientation change the priority of the portrait width constraint to 750 and lower down the priority of the landscape width constraint to 500 while in landscape orientation change the priority of the portrait width constraint to 500 while raise the priority of landscape width constraint to 750.