Auto Layout Basic Concepts - Practical Auto Layout: Beginning Auto Layout Techniques for iOS8 (2015)

Practical Auto Layout: Beginning Auto Layout Techniques for iOS8 (2015)

Chapter 2. Auto Layout Basic Concepts

Before we start working with auto layout there are few things we should know first. Let's first discuss the two ways for positioning with auto layout and then some of the things that can go wrong.


We call the relations between views constraints. Basically, there are two types of constraints for a view. The first is the size and space between views, usually neighbor views. These we call pins. The second is between two specific views by an attribute of the view. These we call alignment oraligns. Besides aligns and pins, you will need to update and resolve changes to the constraints with resolvers. At the bottom of the storyboard, you will find a few buttons that make your auto layout changes.


For a pin, you select one object and describe how far away it is from its nearest neighbors. All pin constraints are found on the Pin button. If you were to select a view and open the pin menu, you would see this:

The top section sets spacing to the nearest neighbor. If there is no neighbor view, auto layout assumes the superview. While dragging around a subview on a superview, you will find blue dotted lines, which are layout guides for the margins. Auto layout will usually base its decisions on these layout guides if your nearest neighbor is the superview.

Below the spacing section in the menu, the pin menu let you set a size. You can set a size specifically for the view using the Width and Height selections. For a size based on the sizes of a neighbor, you can use Equal Widths, Equal Heights. To keep a proportional size for a single control, there is Aspect ratio.

At the very bottom is a dropdown that allow you to update the view's frames to match the new constraints. There are times you want to do this and times you do not. While we will se examples of both in later examples, the general rule is if a view is not completely constrained, it is not a good idea to update it.


Similar to the pin selections is the alignment selections, which you can reach with the align button:

To use these, you need to select two views, and then set a relationship between them. We align to a common edge or center. The last two selections Horizontal Center in Container and Vertical Center in Container need only one selection, since they will center to the superview. Here too we have a selection Update Frames to update the frames.

The Resolver

If we do not update the frames immediately, we can update them in the resolver.

While the selections are the same for each half, what they affect is very different. The top applies only to selected views, the bottom to all views. Try to avoid using the bottom half, unless you are sure you have all your constraints in place. Views tend to disappear if you use this and you don't have all your views set. The only one in the bottom half used often is Clear Constraints, which is the best way to handle out-of-control problems with constraints.

Once you get a constraint set up correctly, a selected view will have blue i-beams describing the constraints.

Constraint Errors

Once you start working with constraints, you will get a lot of warnings. All errors for constraints start as a warning, though they may become fatal errors at runtime. You will need to resolve all these errors. There are three types of errors: misplaced views, missing constraints and conflicting constraints.

Misplaced Views

Misplaced views have the correct constraints but are not in the place they will display at runtime. If you select the misplaced view, it will show in green how far off from the actual location it is. The storyboard will also show a dotted rectangle giving the correct position. For example this label is a misplaced view.

To resolve a misplaced view, you select the misplaced view. In the selected view section of the resolver, click Update Frames. You can avoid this step by using the Update Frames selection in the pin and align popovers. You may not want to do this immediately since there is another kind of error to get rid of first.

Missing Constraints

A second kind of error is missing constraints. All views using constraints need enough information to determine location and size of a view. In most cases, auto layout can guess at a size if you give enough position information. For example this button is missing constraints:

This button has a constraint to the label so it has a horizontal position, though misplaced. It needs a vertical position too. To fix these errors, add some more constraints. For the button, you might align to the top of the label, or pin to the top margin.

Conflicting Constraints

The third type of error is the most difficult: too many constraints. For a button, suppose I pin to the top twice: once 50 points from the top margin and once 53 points from the top margin. The view can't be in two places at the same time. This causes a conflicting constraint error, which shows as red i-beam in the storyboard.

To correct a conflicting constraint, delete the conflicts until there is only one constraint. If we clicked on the red constraint above that says 50, and then press the Delete key, the constraints will be correct. We will go into detail on fixing conflicting constraints on a later section.