So the trick with this is two fold.

  1. Use stack views
  2. Center the elements in the stackview

Screen Shot 2017-05-15 at 3.39.42 PM.png

Basically what do is add your constraints to the portrait layout the way you like them.

Then you flip over to your landscape view and disable any controls you don’t want there by hitting the ‘+’ and the uninstalling it for that configuration.

Screen Shot 2017-05-15 at 3.19.43 PM.png

Every time you do this, flip back to portrait and check and make sure that it still looks good.

Then, the other trick, is to setup a constraint so that your stackview renders horizontal when in landscape mode, and vertical for portrait.

Screen Shot 2017-05-15 at 3.21.19 PM.png

Same idea here. You click landscape, click the plus sign, change your orientation, go back to portrait and then disable it there.

That’s the big trick to all this. When ever you add a constraint in one configuration, you need to disable it in the other. And then keep flipping back and force making sure that only the constraints for that class size are enabled.

The other trick with the stackviews is to give the views inside them X and Y centering constraints for each orientation.

Screen Shot 2017-05-15 at 3.24.04 PM.png

Screen Shot 2017-05-15 at 3.24.15 PM.png

Don’t forget to pin your stack to the four corners of the view.

Screen Shot 2017-05-15 at 3.25.08 PM.png

And if you do these things, all should be good. Giddy up!

Screen Shot 2017-05-15 at 3.25.51 PM.png

Screen Shot 2017-05-15 at 3.26.04 PM.png