Apple has a whole new way to handle different device sizes. They call it making your apps adaptive. It’s powerful. But confusing at first. Here is how you handle going from portrait to landscape.

Great and app and stick a button in the middle with some basic constraints.

Screen Shot 2017-01-26 at 7.13.48 AM.png

Now what we are going to do, is add two more constraints here. One width for what the button is it portrait (or regular mode) and another for when it is in landscape (or compact height mode).

You can tell what mode you are currently in by looking here

Screen Shot 2017-01-26 at 7.16.28 AM.png

The way to add a specific width constraint for portrait iphone (wC hR) is to click the little ‘+’ sign and then select the variation you’d like to add.

Screen Shot 2017-01-26 at 7.20.21 AM.png

So this says: “Add a width constraint of 100 for any width of compact height.” When you click the ‘Add Variation’ button you’ll see this.

Screen Shot 2017-01-26 at 7.21.22 AM.png

That wC is a constraint that will now only be applied to widths (w) that are compact (C).

To add a constraint for landscape mode flip your view to landscape. Notice now how we are wC hC.

Screen Shot 2017-01-26 at 7.23.04 AM.png

Screen Shot 2017-01-26 at 7.23.15 AM.png

Click on the width constraint. Click on that little ‘+’ sign again. And then add a constraint for the compact height scenario.

Screen Shot 2017-01-26 at 7.25.02 AM.png

Screen Shot 2017-01-26 at 7.25.54 AM.png

Now we have two two widths. One which is 50 for compact, and one that is 100 for regular height.

And you can see both of these at the same time if you go to the preview inspector. Ta da!

Screen Shot 2017-01-26 at 7.28.33 AM.png

Note: The whole trick to this is to see what class size your device currently looks like

Skärmavbild 2017-01-26 kl. 6.40.46 em.png

And then add a matching constraint with the same C & R.

Skärmavbild 2017-01-26 kl. 6.41.38 em.png

Then that rule will only be applied for that configuration.

How to add / remove constraints depending on orientation

Find the constraint you want to be present in portrait but absent in landscape and click the ‘+’ sign by installed.

Screen Shot 2017-01-27 at 4.56.37 AM.png

Then choose the orientation don’t want the constant to appear for (landscape = RC)

Screen Shot 2017-01-27 at 4.57.39 AM.png

And then uncheck the check mark.

Screen Shot 2017-01-27 at 4.59.29 AM.png

That means this constraint won’t be applied for this configuration. You could do all this programmatically. But this is much easier.


Links that help