Auto Layout Basics
- What is Auto Layout and why use it?
- Basic constraints
- Working with constraints in Interface Builder
- Dealing with flexible content size
- Manipulating constraints programmatically
- VFL
- Other topics
This guide provides a quick overview and basic examples of the most common uses cases for using Auto Layout in Interface Builder. A guide on some more advanced features of Auto Layout including how to work with Auto Layout programmatically can be found [here][advancedautolayoutguide]. Another good resource is Apple's official Auto Layout guide.
Until the introduction of iPad and iPhone 5, all screens in the iOS world had the same point dimensions of 320x480 height. At this point in time it was often possible to describe an app's layout by specifying the absolute position and size of views.
These days, most applications will want their layout to be responsive to changes the screen size or the content they are displaying. Auto Layout provides a convenient way for you to describe how the size and position of your views should change when the size and position their parent views or neighboring views change. This can happen for example when:
- your application is run on different devices
- the size of or number of neighboring views change to reflect a change in the content the application is displaying
- the user rotates the orientation of the device
In Auto Layout you describe a view's layout by providing one or more constraints that describe how it is size and position are related to the size and position of other views.
To get a sense of the kind of problem that arises when laying out views and that Auto Layout can solve for us, consider the following example. Using Interface Builder we've added a single view (colored red) inside the view controller's root view.
Without adding any layout constraints here is what this interface looks likes in some situations where this app might run.
Depending on the use case, chances are this is not behavior that we want. For example, if the red view were meant to be a button that is always pinned to the upper right corner of the screen, the behavior is incorrect for the landscape and iPhone 6 sizes.
In Auto Layout, you describe your application's layout by adding constraints that define relationships between the size and position its views. In order for Auto Layout to function properly you'll need to provide enough constraints for each view so that the system can determine its size (width and height) and location (the x and y coordinates of the top left corner of the view).
You can add constraints in Interface Builder by selecting one or more views and using the the Auto Layout controls (boxed in red below). The buttons are from left to right:
- Aligntool - specify how views should be aligned relative to each other
- Pin tool - specify that a view should be a fixed distance from another view
- Issues tool - quick fixes for errors or warnings that may come up as you add constraints.
- Resizing settings - changes the way Interface Builder updates constraints when you resize views. You probably won't use this.
You can also add constraints by control-dragging from one view to the relevant area of another view and selecting the appropriate item in the context menu.
Here are some of the most basic situations you'll come across.
You'll often find yourself wanting to position a view to be a fixed distance from an edge of its parent view or one of its neighboring views.
Here we pin the the red view to the top right corner of its parent view. This might be useful for example if the red view is a menu button that we want to always be accessible from the same location. Notice that we had to specify the height and width of the view as well so that Auto Layout would have enough informatin to figure out both the location and size of the red view.
The result when we run our app is as follows.
Another common situation is for a view to resize its dimensions (either height, width or both) to match the parent view's dimensions.
Here we specify that the red view should be pinned to the top of the screen with fixed height, but it should resize to span the width of the screen. This might be useful for example in a situation where the red view contains an alert message.
Here's what the result is when running our app:
Sometimes you'll want to center a view (either vertically, horizontally, or both) within another view.
Here we center the red view vertically on the screen. This might be useful if we need to show our logo in the Launch Screen. Notice that we had select "Update Frames" after setting our constraints. More on this [below].
Here are a few common situations that will come up as you add and modify constraints in Interface Builder
The pin tool by default will try to create a constraint relative to the nearest neighbor. You can change which view a constraint is relative to by clicking on the small arrow and selecting the right view in the drop down menu.
Note that constraints added using the align and pin buttons are additive. They do not update existing constraints, but rather create entirely new ones. For example, here we try to set a second height constraint which results in a case of conflicting constraints.
You can edit an constraint by selecting the view associated with that constraint and using the Size inspector, or simply selecting the constraint directly in the Scene Outline.
Here we update our red view to have a different height and different inset distance from it's parent view.
The Auto Layout system will give an error if it us unable to determine the correct position and size of any of the views in your scene. It will provide you with a warning there is issue that may result unexpected behavior—for example something that would result in your interface not looking like it appears in interface builder.
As you edit your constraints you'll run into situations where the position and/or size of your views as they appear in Interface Builder no longer match what would be the result of the constraints you've created. In this case Auto Layout will will give you a "Misplaced Views" warning.
One way to fix this warning is to update the views' sizes and locations in the Interface Builder to match the constraints. You can do this by selecting "Update frames" from the issues button or in the Auto Layout error inspector. You should use this option when you know that your constraints are correct, and the way the views are laid out on the canvas is wrong. You should not select this option if you suspect one of the constraints is wrong. In particular, do not select this option if Interface Builder tells you have "Missing Constraints" as this will result in confusing placement of your view off screen or having it be sized to zero.
Here we edit the red view's constraints for height, but this is not properly updated on our canvas. After selecting "Update Frames" the new height is properly reflected.
Other times the
Other times you'll be editing a view's location or size independently of manipulating constraints.
- can change your constraints in unexpected ways
- don't update constraints when overconstrained since this may end up creating duplicate constraints
- be careful when adding constraints as it may not add the one you want