What is Auto Layout?

What is Auto Layout?

Auto Layout is a special technology that Apple created for the iPhone, iPad, and Mac to make app designs easier. In the context of iPhone, layout means how the buttons, images, text, and multimedia content will be arranged. There are two parts. You can use Auto Layout in Xcode 5's Interface Builder or you can use Auto Layout in Objective-C code. Each has it's benefits and tradeoffs.

Auto Layout Sets How Views Arrange in an iPhone App.

For a long time I didn't use Auto Layout because it seemed "more complex" and hard to learn. I built Photo Table and Artwork Evolution using tons of math and manual frame layout. It worked, but it was super hard to get right. I spend months perfecting the image grid view that I used in both apps. What I did was really, really hard. Auto Layout makes it easy, because it removes all the math calculations and enables relative content positioning.

Auto Layout allows you to describe the relationships between objects. They can be static relationships or dynamic relationships. You can visually align buttons together in a group or relative to the position of an image. It uses ideas from natural language, rather than strict mathematics to express the positions of objects.

The old method used a combination of springs and structs and Cartesian coordinates (math!). You explicitly state that you want a button at point (100, 120) with a size of (120, 40). It didn't capture any of the surrounding content relationships, and was prone to error when text changed (translations), image sizes changed, or the device was rotated. Using Auto Layout you can tell the iPhone that the button should be centered along the vertical Y axis and it should be aligned to the left side. Auto Layout is like giving someone directions to your favorite restaurant versus a paper map and a (latitude, longitude) coordinate. One method is easier.

Xcode 5 Interface Builder and Auto Layout

Xcode 5 is a great option for working with Auto Layout on both iPhone and Mac. Unlike Xcode 4, Xcode 5 doesn't impose any restrictions on your layout and it tries to stay out of the way. For simple apps, Auto Layout in Interface Builder is good enough. When you want to start creating complex view hierarchies to show dynamic content (i.e. user generated or server data) you may feel limited by the controls in Interface Builder. Thankfully, it's pretty easy to connect your layout constraints from Interface Builder to code.

Xcode 4 Warning: Don't use Interface Builder with Auto Layout. It's extremely frustrating to move things around and setup your constraints. Xcode will mess up your delicate interface and force you to redo tons of work. Accidentally bumping, or moving buttons will undo your changes, which makes it almost useless unless your a neural surgeon. If you have to use Xcode 4, read Ole Begemann's 10 Things You Need to Know About Cocoa Autolayout.

Auto Layout in Objective-C Code

Working with Auto Layout in code can be more intimidating than Interface Builder, but it shouldn't be. It's very verbose, but that helps you clearly tell the iPhone where on the screen you want your buttons. The hardest part is trying to not shoot yourself in the foot with the beginner mistakes. And if you don't know what to avoid, that can be very easy.

Doing AutoLayout in code is what you need to learn if you're going to be proficient with high quality interface design on iOS. You can create some really interesting layouts that would be impossible with Interface Builder. Hands-on practice is a must, you need to try it.

Debugging Auto Layout

Auto Layout can make it simple to express relationships, but you also need to make sure you don't provide conflicting statements. You wouldn't tell someone at a fork in the road to go left and right at the same time. It's one or the other. When we ask a button to be aligned on the left side, we should not conflict that statement with a request to be aligned on the right side. If we did, Auto Layout would have to break one of our commands. When this happens, our layout is ambiguous, and to fix it the iPhone will flip a coin to decide if the button should be left aligned or right aligned. Opening the app could behave different every single time.

Documentation

One of the reasons that Auto Layout is hard to learn is that the Apple Auto Layout Guide is limited. I finished reading the guide and was left hanging. Too many unanswered questions and details ommitted. There are some good videos on Auto Layout from the WWDC 2012 and 2013 presentations, which can give you a lot of ideas. 

WWDC 2013 Auto Layout Video (Xcode 5)

• Taking Control of Auto Layout in Xcode 5

WWDC 2012 Auto Layout Videos (Xcode 4 + Concepts)

• Introduction to Auto Layout for iOS and OS X
• Best Practices for Mastering Auto Layout
• Auto Layout by Example 

Recommended Reading

Natasha has a great beginner post on 5 Auto Layout Tips & Tricks you Need to Know.

Connect

1. Join my iPhone newsletter to keep learning how to make iPhone apps.
2. For more structured learning, signup for my online iPhone app course.