May-16-2017 10-37-35.gif

Setting up landscape

First add a vertitical stackView

Then add x2 UIViews colored red and blue inside it.

Screen Shot 2017-05-16 at 10.48.21 AM.png

Then pin the red and blue UIViews like so.

Screen Shot 2017-05-16 at 10.44.23 AM.png

For red

Screen Shot 2017-05-16 at 10.50.06 AM.png

For blue

Screen Shot 2017-05-16 at 10.50.41 AM.png

Equal height

Screen Shot 2017-05-16 at 10.52.05 AM.png

Give the subviews like read and blue by control dragging them into the ViewController. This will make them more readable.

Screen Shot 2017-05-16 at 10.55.13 AM.png

Screen Shot 2017-05-16 at 10.55.17 AM.png

Then pin the stackView to all x4 corners of the parent.

Screen Shot 2017-05-16 at 10.57.01 AM.png

View should now look like this.

Screen Shot 2017-05-16 at 10.58.22 AM.png

Handling Portrait

Screen Shot 2017-05-16 at 11.00.05 AM.png

So the trick with portrait is you want to turn off some constraints from landscape, while turning on others while in portrait (and vice versa).

There is no simple way to do this. My technique is to basically add one constraint at a time, and then flip back and forth to ensure I haven’t broken something somewhere else.

Here are the constraints we want in landscape. Let’s now set these up.

Screen Shot 2017-05-16 at 11.11.45 AM.png

Select the #1 constraint in portrait mode, and then flip to landscape mode.

Screen Shot 2017-05-16 at 11.13.15 AM.png

Screen Shot 2017-05-16 at 11.13.26 AM.png

Screen Shot 2017-05-16 at 11.13.29 AM.png

Open up the attribute inspect and click the ‘+’ sign beside the word installed.

Screen Shot 2017-05-16 at 11.15.02 AM.png

This is how you add an orientation customization in xcode. You find the attribute. Click the ‘+’ sign, and then whatever orientation and size you are currently in, it will add an exception for.

By clicking add variation here, we are allowing ourselves to turn this constraint off for this orientation and view.

Screen Shot 2017-05-16 at 11.16.31 AM.png

Once you do this, flip back to portrait and make sure everything looks good there (which it does).

Now repeat this process for each of the other constraints.

#2 Contraint – blue height = red height – turn this off in landscape

Now switch to portrait.

The trick here is you want to change the layout so the two views are beside each other. Before you go manually dragging views around however, remember that we are in a stackview.

Meaning we can simply change the orientation of the stackview, and everything should be taken care of for us.

#4 – Stackview orientation

Select the stackview, click it’s attribute inspector, and then click the ‘+’ sign beside ‘Axis’.

Screen Shot 2017-05-16 at 11.27.34 AM.png

Add the Variation, and then change the orientation to horizontal

Screen Shot 2017-05-16 at 11.27.48 AM.png

This will mess up your portrait view, but don’t worry about it. At least now the views will render horizontally in landscape.

#3 Constraint – blue leading – lets turn this off in portrait mode.

Screen Shot 2017-05-16 at 11.31.32 AM.pngScreen Shot 2017-05-16 at 11.31.39 AM.png

Screen Shot 2017-05-16 at 11.31.58 AM.png

Add a blue top in landscape

Screen Shot 2017-05-16 at 11.33.58 AM.png

Equal width in landscape (control drag from blue to red)

Screen Shot 2017-05-16 at 11.34.37 AM.png

Flipping back to portrait we now need to turn off some of these new constraints while in portrait mode.

Turn of equal widths in portrait.

Screen Shot 2017-05-16 at 11.36.22 AM.png

Screen Shot 2017-05-16 at 11.36.30 AM.png

Screen Shot 2017-05-16 at 11.36.38 AM.png

Turn off blue top

Screen Shot 2017-05-16 at 11.37.46 AM.png

Screen Shot 2017-05-16 at 11.37.54 AM.png

Screen Shot 2017-05-16 at 11.38.02 AM.png

And now everything should be good. There should be no constraint violations. If there are, just go over them and see if any are being applied when they shouldn’t. Draw a picture.

Constraints should now look like this.

Screen Shot 2017-05-16 at 11.41.46 AM.png

Screen Shot 2017-05-16 at 11.42.03 AM.png

Note: You will need to repeat this process for iPad and other view sizes if you want to support.

But final product should now look like this.May-16-2017 11-40-08.gif

Happy autolayout-ing!

 

 

Advertisements