What is the proper way to use Size Class in XCode?

Question

I started a project in the Any Width, Any Height size class and for one of the scenes, there are a couple of UI elements (over 10). Recently I wanted to change the layout of this scene for the Any With, Compact Height size class (for iPhones in landscape). And I couldn't find the proper way to manage it.

At the end, I had to delete all the UI elements in Any Width, Any Height , and then create two copies of all the elements of that scene, one for Any Width, Compact Height, and the other for Any Width, Regular Height. So the scene in Any, Any actually became blank. But I feel like this must not be the proper way.

Here is an example:

I started with Any Width, Any Height, and put two labels (one on top of the other) to fill the screen.

Any Width, Any Height. Constraints set.

Any Width, Compact Height with constraints from Any Width, Any Height

Now for iPhones in Landscape, I wanted to move the labels so that they are side by side, so first, in the bottom of XCode, I changed to wAny hCompact, and then dragged and resized the labels so that they are side by side. Before adding additional constraints, it looks like below.

Note that the highlighted constraints in the Document Outline are from Any Width, Any Height, and they are all being applied to Any Width, Compact Height.

Any Width, Compact Height. Uninstalled constraints from Any Width, Any Height

So I uninstalled these constraints

Any Width, Compact Height. Added own constraints

And then I added constraints for the current size class, Any Width, Compact Height

Any Width, Any Height. Now has no constraints, Xcode throwing errors and warnings

Back to the Any Width, Any Height size class, the constraints are not applied since I uninstalled them. But if I added back the constraints, the Any Width, Compact Height would be affected.

So I installed all the constraints originally from Any Width, Any Height to Any Width, Regular Height. This will make the project run and the screen will display properly on both Portrait and Landscape.

However, in Any Width, Any Height, there are still no constraints and XCode is throwing warnings

Like I said, I ended up deleting all UI elements in Any Width, Any Height for that scene, and then creating one version each in Any Width, Compact Height and Any Width, Regular Height. Also had to create the outlets and actions, too for each one.

How should I do this without creating a separate set of UI elements (and without control dragging to create outlets and actions) each time I want to use another size class?

Answer 1

In order to achieve what you want you need to manage two sets of constraints.

One set for the Any,Any class and another set for the Any,Compact class.

The trick is to make sure that the constraints that aren't needed for a given size class are specifically uninstalled in that class - I will show you what I mean below.

Your constraints in the Any,Any size will be:

• Label 1

  • Leading space to superview = 0
  • Trailing space to superview = 0
  • Top space to top layout guide = 0
  • Bottom space to label 2 = 0
  • Equal height to label 2 = 0

• Label 2

  • Leading space to superview = 0
  • Trailing space to superview = 0
  • Bottom space to Bottom layout guide = 0
  • Top space to label 1 = 0
  • Equal height to label 1 = 0

Your label 1 constraints should look like this and your label 2 constraints similar:

Now, select Any,Compact class and adjust the two labels positions and add the following constraints:

• Label 1

  • Bottom space to bottom layout guide = 0
  • Trailing edge to leading edge of label2 = 0
  • Equal width to label 2

• Label 2

  • Top space to top layout guide = 0
  • Leading edge to trailing edge of label1 = 0
  • Equal width to label 1

Now, turn off the unnecessary constraints in Any,Compact by double clicking the constraint, clicking the "+" to add Any,Compact and then clearing the checkbox so it looks like this:

The unnecessary constraints for Any,Compact are:

• Label 1

  • Trailing space to superview
  • Bottom space to label 2
  • Equal height to label 2

• Label 2

  • Leading space to superview
  • Top space to label 1
  • Equal height to label 1

Now, go back into Any,Any class and turn off the unnecessary constraints for Any,Any in the same way

The unnecessary contraints for Any,Any are:

• Label 1

  • Trailing space label 2
  • Bottom space to bottom layout guide
  • Equal width to label 2

• Label 2

  • Leading space to label 1
  • Top space to top layout guide
  • Equal width to label 1

Now, you should be able to swap between Any,Any and Any, Compact and have the labels move to the right place.

I have uploaded a storyboard with the appropriate constraints here: https://gist.github.com/paulw11/f1b0faa229b152f1c53dadefcf9e0885

Update: I just noticed that the space between your labels isn't 0, but you can just adjust the leading/trailing & top/bottom constraints as required.