Using Auto Layout in Xcode 5

Auto Layout is a constraint-based layout system introduced in iOS 6. Auto Layout is needed because of the different screen sizes of the apple devices, as it is almost impossible to manually create the user interface per device. In Xcode 4, it was very hard using Auto Layout in Interface Builder because Xcode tried too hard to 'help' the developer. Luckily in Xcode 5 Apple has greatly improved and the Auto Layout features in Interface Builder. In this tutorial, we will take a look of the basic features using Auto Layout in Xcode 5.

Open Xcode and create a new Single View Application. For product name, use iOS7AutoLayoutTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices.

Go to the Storyboard and add a button to the main view. Go to the Size inspector and change the x-position in 50 and y-position in 500.

Also in the Attributes inspector change the background color of the button in green.

The button is placed somewhat bottom-left on the main view.

Now Build and Run the project for an iPhone Retina 4-inch Device . As you can see in Portrait mode the button is visible but when you change the orientation to landscape mode the button isn't visible any more. Let's fix this by adding constraints to our button. This can be achieved through multiple methods. Select the button and in the Editor menu select Pin > Leading Space to Superview. This will pin this button always a fixed amount of points from the left side of the main view independently of orientation or screen size. When you take a look in the Document Outline, you will see a constraint attached to the superview.

Auto Layout requires "just enough" constraints for each (subview), so it knows where to position this view. If you select the button, you will see the constraint, in the form of a T-bar, has a orange color. This means Auto Layout will need more constraints to know how to position this button. Also in the Document Outline, next to the View Controller Scene, you see a red arrow indicating some sort of Auto Layout problem. Selecting this arrow will review the problem.

So we need a constraint for the vertical position of our button, Let's add another constraint. Select the button and in the Editor menu select Pin > Bottom Space to Superview. This will pin the button a fixed amount of point to the bottom of the superview. Note the T-bars turned blue, which means the constraints are valid. Also note the red arrow in the Document Outline has disappeared.

Build and Run the project again and now the button is visible in Landscape mode.

Next, we will move the button a bit to the right and to the top. Select the Size inspector again and change the x-position to 75 and the y-position to 450 . Now two orange badges and a dashed border has appeared in the main view.

As we repositioned the button, the old constraints are still in place, so we need to create new constraints. Select the two old constraints in the Document Outline and delete them. Next we will recreate the constraints using an other method. Ctrl + drag from the button to the left and select Leading Space to Container. Next, ctrl + drag from the button to the bottom and select Bottom Space to Bottom Layout Guide. This will again pin the button to the view in both orientations. But there is even an easier method to update the constraints. Move the button again, in the Size inspector change the x-position to 100 and the y-position to 400. Again the constraints are not in place anymore.

At the bottom of the Interface Builder are four Auto Layout buttons.

Select the third button and choose the Update Constraints item. This will automatically update the constraints.

With Auto Layout it is also possible to center views within the superview. Drag a new button to the main view and center it into the top using the blue guideline.

Ctrl + Drag from the button to the top and select Center Horizontally in Container. The button is now centered to the superview, but as you can see the constraint is orange. Select the second button in the Auto Layout button row and select the top constraint t-bar right below the Add New Constraints text. Click Add 1 Constraint at the bottom. This is a quick way to pin objects to the superview.

Build and Run and you can see the top button stays centered to the main view in both orientations.


Next, add another button to the view. Go to the Size inspector and change the x-postion to 40 and the y-position to 500. We want this button to be left-aligned with our green button. We can achieve this with the Align button, this is the first button of the Auto Layout buttons. First add a constraint for the vertical position. Ctrl + drag from the button to the bottom and select Bottom Space to Bottom Layout Guide. Next,  select both buttons and then click the Align button. Select the Leading Edge option and click Add 1 Constraint. This will make the constraints in place, but the actual button not yet. 

In the Document Outline you will see a yellow arrow, indicating some kind of problem. Press this arrow and you will see a misplaced views error.

Select the little triangle on  the right, select the Update Frames option and click Fix Misplacements.

Now all items are in place. Build and Run, and you will see the buttons are left-aligned in both orientations

That's it. You have seen some basic methods to use Auto Layout in Xcode 5. You can download the source code of the iOS7AutoLayoutTutorial at the ioscreator repository on github.