Autolayout with Paul Hagerty

Leave a comment

Episode 12 – Autolayout

Here is a simple way to view the Class Size diagram for autolayout

Screen Shot 2017-05-15 at 11.13.36 AM.png

If your layout is quite simple, just use these orientations.

But what’s even better is if you have some layout in common, do it in the Any Height Any Width quadrant and just put the differences in the other ones above and below.

Screen Shot 2017-05-15 at 11.14.06 AM.png


Vary for traits


This feature of Xcode has been driving me nuts. Can’t figure it out. But I think I finally cracked it. Create a new single view application and add a label.

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

Now we are going to add another label that only shows up in an big iPad.

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

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

Doing this means only ipads with wR hR will be affected by these changes.

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

So let’s make some changes. Add another label offset to the other one. Then click Done Varying.

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

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

OK. So now we have an ipad with two labels. And when we click but to our smaller iphones, only one label is there.

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

Now let’s see how this works for constraints. Let’s go back to our iphone size, and then select landscape. We will not change some constraints only for landscape using the same procedure.

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

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

Delete the old constraints, and add some new ones.

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

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

And if we flip back to portrait our old constraints are still there!

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


What this looks like in your ViewFinder is a whole bunch of contraints that are greyed out for other orientiations and sizes.

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

And if you click on one you will see it’s only active for that particular size (hC)

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

Lycka till! (Good luck)




How to handle portrait and landscape in autolayout

1 Comment

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


How to make UIImageView use certain portion of iPhone display

Leave a comment

Create your UIImageView

Screen Shot 2017-01-24 at 8.34.41 AM.png

Then add following constraint by control dragging the UIImageView to the top and selecting

Screen Shot 2017-01-24 at 8.36.26 AM.png

And then adjusting the multiplier to whatever ration you want. 0.5 = 1/2 screen

Screen Shot 2017-01-24 at 8.36.49 AM.png





Autolayout Preview assistant editor

Leave a comment

To iterate faster on your autolayout use the preview assistant editor.

Click the regular preview editor you would bring up for code against a storyboard

Screen Shot 2017-01-24 at 8.01.20 AM.png

Then click the Automatic word in the upper lift hand corner of window

Screen Shot 2017-01-24 at 8.02.13 AM.png


Screen Shot 2017-01-24 at 8.01.47 AM.png

Så mycket bättre! (so much better).

Screen Shot 2017-01-24 at 8.02.37 AM.png

Also you can then click the ‘+’ sign to dynamically try different phone sizes to see what they look like.

Screen Shot 2017-01-24 at 8.04.58 AM.png

Now you can tweak without running simulator again and again. Go get em!




Autolayout horizontal stack view

Leave a comment

Say you want to layout several components together in a StackView like this

Screen Shot 2017-01-20 at 7.43.16 AM.png

Drag out the stackview

Screen Shot 2017-01-20 at 7.45.01 AM.png

And stretch it out

Screen Shot 2017-01-20 at 7.47.50 AM.png

Then make it the same width as the image above. Control drag the stackview to the image

Screen Shot 2017-01-20 at 7.49.19 AM.png

Screen Shot 2017-01-20 at 7.49.25 AM.png

Next give it a height. In this case 70.

Screen Shot 2017-01-20 at 7.50.37 AM.png

Screen Shot 2017-01-20 at 7.50.46 AM.png

Then center it to the label above. Control drag the view to the artist label.

Screen Shot 2017-01-20 at 7.51.37 AM.png

Screen Shot 2017-01-20 at 7.52.09 AM.png

Then give it some distance between it and the label above.

Screen Shot 2017-01-20 at 7.53.23 AM.png

Screen Shot 2017-01-20 at 7.53.38 AM.png

Cmd + alt + = to readjust the layout…

Screen Shot 2017-01-20 at 7.54.20 AM.png

And now we can add in the components. Drag in a button and a progress bar.

Screen Shot 2017-01-20 at 7.55.21 AM.png

Put the progress bar in the middle by changing the horiztal stack view alignment property.

Screen Shot 2017-01-20 at 7.56.13 AM.png

Screen Shot 2017-01-20 at 7.56.20 AM.png

And then style and set sizes for the button however you wish. In this case 70×70.

Screen Shot 2017-01-20 at 7.57.41 AM.png

Screen Shot 2017-01-20 at 7.57.48 AM.png

You can then tune it up however you wish.





Autolayout a simple component

Leave a comment

To autolayout a simple a component like this

Screen Shot 2017-01-20 at 6.24.58 AM.png

Start by setting a width

Screen Shot 2017-01-20 at 6.26.05 AM.png

Then center horizontally

Screen Shot 2017-01-20 at 6.27.36 AM.png

Then pin it to the top

Screen Shot 2017-01-20 at 6.28.31 AM.png

And voila! You constraint compliant component.

Screen Shot 2017-01-20 at 6.29.01 AM.png

Older Entries

%d bloggers like this: