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


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

1 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

How to layout UILabel relative to UIImageView

Leave a comment

So you have a label ‘Title’ you want to add constraints to so that it looks like this

Screen Shot 2017-01-19 at 7.57.32 AM.png

We will first make the label and the UIImageView equal width by command selecting them both

Screen Shot 2017-01-19 at 8.01.31 AM.png

Screen Shot 2017-01-19 at 8.02.06 AM.png

Then add a top space constraint between the label and the image by

Screen Shot 2017-01-19 at 8.05.43 AM.png

Screen Shot 2017-01-19 at 8.05.51 AM.png

And then constrain the X position of the label by aligning the label to the super view

Screen Shot 2017-01-19 at 8.07.30 AM.png

Screen Shot 2017-01-19 at 8.07.39 AM.png

Then re-adjust the layout with good ol cmd + alt + =


Screen Shot 2017-01-19 at 8.08.37 AM.png

Note : if you want to horizontally align with the element above you (instead of the whole container) control drag from the button or label you want to align to the element you want to align with.

Screen Shot 2017-01-19 at 8.56.29 AM.png

And if you want to add a play button into the middle of the UIImageView, select both and then

Screen Shot 2017-01-19 at 2.49.17 PM.png

Screen Shot 2017-01-19 at 2.49.43 PM.png

Trouble shooting

If you are having trouble command selecting both elements (for example to set the equal widths) check to see that your label or button didn’t get buried somewhere deep in another view.

For example here I am trying to add another label, and here I want to make it the same width as the title one above. But I can’t select them. It’s because my artist label got buried in another view.

Screen Shot 2017-01-19 at 8.15.30 AM.png

So fix this, drag the label out to the appropriate level.

Screen Shot 2017-01-19 at 8.17.16 AM.png

You should now be able to select shift select both (hold down shift while clicking on each).

Screen Shot 2017-01-19 at 8.18.01 AM.png



How to pin UI element to the top layout guide using autolayout

Leave a comment

Say you have a SearchBar that you want to pin to the top of your screen and have it stay there regardless of whether you are in collapsed or expanded mode.

Add your search bar, and then control drag a constraint to the top of the view like so

Screen Shot 2017-01-08 at 7.04.42 AM.pngScreen Shot 2017-01-08 at 7.04.48 AM.png

This will add a constraint that will bind the searchbar to the ‘Top Layout Guide’ property of your view controller. Top layout guide is a special property Apple provides to automatically keep your view below nav bars and things like this.

Screen Shot 2017-01-08 at 7.06.22 AM.png

Now just set the value of that constraint to zero (0) by double clicking on it.

Screen Shot 2017-01-08 at 7.07.04 AM.png

Add two more constraints to in the search bar to the sides (click the left and right red bars and then ‘Add 2 constraints’ at the bottom.

Screen Shot 2017-01-08 at 7.08.37 AM.png

Screen Shot 2017-01-08 at 7.09.33 AM.png

And then press Cmd + Alt + = to automatically reposition everything.

Screen Shot 2017-01-08 at 7.10.09 AM.png

Your searchbar should now be pinned to the top and stay there regardless of whether you are in expanded or collapsed iMessage mode.

Screen Shot 2017-01-08 at 7.11.15 AM.png


Screen Shot 2017-01-08 at 7.11.22 AM.png


Autolayout w/ tablecell image and labels

Leave a comment

Here is how to do autolayout to produce this

Screen Shot 2016-11-16 at 4.28.54 PM.png


First let’s style the image. Start with no constraints.

Screen Shot 2016-11-16 at 4.02.14 PM.png

First one we want to add is a constraint to the top.

Screen Shot 2016-11-16 at 4.02.23 PM.png

Then tie it to the left

Screen Shot 2016-11-16 at 4.02.32 PM.png

Then give it equal width and height

Screen Shot 2016-11-16 at 4.04.18 PM.png

UIImage should not be constrained. What we’ve done here is effectively pinned it to the upper left hand corner.

Screen Shot 2016-11-16 at 4.04.25 PM.png


Screen Shot 2016-11-16 at 4.12.02 PM.png

Here we want to constain the top of the title label so it’s flush with the UIImage.  Cntrl drag from title to UIImage and select Top.

Screen Shot 2016-11-16 at 4.12.18 PM.png

Screen Shot 2016-11-16 at 4.12.33 PM.png

Now constrain or bind the spacing from the left of the label to the image by using the constraint tools near the bottom of the editor.

Screen Shot 2016-11-16 at 4.13.42 PM.png

Screen Shot 2016-11-16 at 4.13.57 PM.png

Now press Cmd – Alt- = to get the images to fresh themselves in the layout. That will remove orange lines.

Screen Shot 2016-11-16 at 4.15.06 PM.png

Expand the title label and give it now a constraint to the right.

Screen Shot 2016-11-16 at 4.16.18 PM.png


Repeat with artist, starting with left and right constraints.

Screen Shot 2016-11-16 at 4.16.58 PM.png

Screen Shot 2016-11-16 at 4.17.07 PM.png

Screen Shot 2016-11-16 at 4.18.49 PM.png

And voila! You are autolayed out!

Screen Shot 2016-11-16 at 4.28.54 PM.png

Thanks to my friend @kevski for showing me how to do this.

Note: One assumption I didn’t cover is that the CollectionViewItem height (70) must equal the image size and surrounding constraints. So if you size your image (50) and add a top and bottom (10) they much equal 70. You may not be able set the CollectionView height in the editor (may be grayed out) so you need to click and drag this height yourself.


Older Entries

%d bloggers like this: