iOS autolayout with size classes does not differenciate landscape for 3“5 and 4”?

Question

here's what I've been struggling with for the past hours.

I have a view controller that contains a few labels, a picture, and a tableview. I'm using autolayout/size classes in order to use only one storyboard for the various devices supported (meaning: all size of iphones and iPad).

Noew everything is working, except one thing : the settings in "width compact x height compact" are used for 3"5 and 4" iPhones in landscape. So either I say that the table view takes 480px and there's a whole lot of space on iPhones 5/5S, either I set it at 480px but then I cannot reliably align items vertically in my cells.

How come there is no way to say "this view should always takes the full width" ?

Any solution, even workaround, would do. Thanks a lot for your time !

Answer 1

There is no distinction in size classes between 3.5", 4" and 4.7" devices. They all have the same size classes deviced for horizontal and vertical, and behave the same way on rotation.

You can define a view to take all the available space. Explicitly set the bottom and top views to be attached to bottom and top edges (respectively) with constraints, and set the middle view (in your case, the table view) to take all the space in the middle by setting constraints on top with the top views, and constraints on bottom with the bottom views. Now, because top view is attached to top and bottom is attached to bottom, you will have the middle view grow and shrink as needed.

Answer 2

There are a couple of ways to get percentage based sizing.

1. Link the width of your target element to the width of another element.
2. Pin your element to its Superview and use the Multiplier setting instead of Constant .

Say you want to set a TitleLabel to have a relative width compared to another element.

Example for method 1:

Ctrl + drag from TitleLabel to another Target element (such as its Parent View), then choose Equal Widths , you can then change the Multiplier field in your Constraints settings to 0.5 if you want 50% width.

Example for method 2:

Pin the appropriate edges of TitleLabel to either the Center, Bottom or Trailing edges* of its Superview (Editor -> Pin -> X Space to Superview).

In the Constraints Settings, make sure you have TitleLabel in the First Item field, and the Superview as the Second Item .

*because the Top/Leading edge of the Superview will have a 0 value, a multiplier against these won't work, as 0 x 0 = 0.

I found method #1 doesn't work well in Table Views, so you may have more luck with #2.