iOS: 5 Auto Layout Tips & Tricks You Need To Know

Ever since I started learning iOS, I’ve been put off by Auto Layout. After all, in Xcode 4, whenever you turn on Auto Layout in the storyboard, it would mess everything up! It was easier to turn it off and keep it off, until recently I decided to face my fear and finally learn to work with it.

Now, although Auto Layout is still sometimes very frustrating to work with, I really like the way it makes you think about views. Instead of coming up with pixel-perfect designs, you think of how all the views in your superview interact with each other and in relation to the superview. It’s kind of cool (once you get the hang of it!).

To learn Auto Layout, I watched the following WWDC videos, which I highly recommend to get started.

Here are my favorite Auto Layout Tips & Tricks:

Control + Drag!

In Xcode 5, you can simply control drag from one view to another to add a constraint. It filters the suggestions based on the direction and views you’re dragging to, so if you control drag to the left or right view, you’ll get horizontal constraint suggestions.

For example, this is what I got when I control dragged from one button to another one horizontally:

Screen Shot 2013-11-03 at 7.22.43 AM

Note that if you hold Shift, you can select multiple relevant constraints.

Read the Icons

If you’re debugging on a view that has a ton of constraints, it might be difficult to understand what each constraint does at a glance. I tend to ignore icons, so it took me a while to realize they are actually useful!

Screen Shot 2013-11-03 at 7.27.31 AM

It’s now very easy to understand what each constraint is doing at a glance and to spot duplicates / outliers that don’t belong there. It’s also much easier to spot the constraints you want when you’re adding new constraints from the constraints menu:

Screen Shot 2013-11-03 at 7.31.17 AM

Not sure about you, but I find options such as “Align Baselines” or add “Leading Edges” to be confusing in words. When you look at the icons above, it is so easy to understand what these mean!

The Amazing Preview Window

You might have a requirement that your app needs to work in both Portrait and Landscape and in iOS 6. So every time you add a constraint, you’ll have to run your simulator, try it out in Portrait, Rotate the Device, and do the same thing on the iOS 6 simulator. Well, there is an easier way with the cool Preview feature.

Select a View Controller in your storyboard left menu, scroll down to the Preview option in your Storyboard menu, and click on your storyboard name while holding Option + Shift:

Screen Shot 2013-11-03 at 7.37.36 AM

Now, choose to open the view controller in the Assistant Editor, by selecting + next to the main storyboard and clicking Enter:

xcode 5 assistant editor

And, voilà, you can now preview your view controller in landscape.

xcode 5 storyboard preview

Repeat again, and you can now open a preview window for your iOS 6 view:

xcode 5 assistant editor new window

So you get this:

xcode 5 rotation ios 6 preview

Placeholder Constraints

For the past week, I’ve been working with Auto Layout in Xcode 4 (since we’re not ready to switch to Xcode 5 just yet at work), and I’ve had the toughest time on Friday trying to figure out how to combine my constraints in the Storyboard with the constraints I wanted to create in code because the layout needed to be a bit more dynamic based on the content that each UITableViewCell had.

I still haven’t figured out an ideal solution for this in Xcode 4, because when I remove a constraint from the storyboard (since I plan to write it in code instead), Xcode 4 forces the constraint on you, so you can’t get rid of it unless you make it into an outlet and remove it in code! Anyway, this is pretty much a rant because of how angry the whole process made me feel!

So you can imagine that one of my favorite Xcode 5 feature is the ability to make a Constraint into a PLACEHOLDER! It’s going to be there in the storyboard, but it won’t be actually compiled at runtime.

To make any constraint into a placeholder, simply, select the constraint, and check the Placeholder box:

constraint placeholder xcode 5

Auto Layout Trace

Ambiguous Layout is sometimes really hard to detect. Everything could be fine in the storyboard, everything will run, but something will be off! So, to detect and debug Ambiguous Layout, you can simply run your code, then when the view loads, pause it in the debugger, and type in po [[UIWindow keyWindow] _autolayoutTrace]:

autolayout trace

Sure enough, you can clearly see which parts of your view have Ambiguous Layout!

Do you use Auto Layout? What are your favorite tips and tricks?!

Enjoy the article? Join over 14,500+ Swift developers and enthusiasts who get my weekly updates.

  • lozandier

    I would recommend mentioning the new topLayoutGuide view controller property that makes it a tad bit easier to adjust the top of of your view controllers for maximum compatibility moving forward with the various context that’ll change the status bar to various heights your original design may not have accounted for, but then again that’s more apparent with iOS7 apps and going forward.

    Edit: Forgot you mentioned you’re stuck with Xcode 4 (and thus iOS6 and below) at the moment to try this property out.