The new updated version of my book on Auto layout, Practical Autolayout for Xcode 8 is now available in iTunes and Amazon. Here’s a  free excerpt from the book. 

Before we start working with auto layout, let’s discussion the three tools you use for positioning with auto layout and then some of the things that can go wrong.

Constraints

We call the relations between views constraints. Basically, there are two types of constraints for a view. One is the size and space between views, usually neighbor views. These we call pins. The other is between two specific views by an attribute of the view. These we call alignment or aligns. 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.

 

Pins

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 with the  icon, 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 lets 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 updates 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 see examples of both in later examples, generally if a view is not completely constrained, it is not a good idea to update it.

Aligns

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

 

To use an align, select two views, and then set a relationship between them. We align to a common edge or center. The last two selections Horizontally in Container and Vertically in Container need only one selection, since they will center to the superview. Like align, there is  a selection Update Frames.

The Resolver

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

 

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  or improperly sized 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.

 

 The white on orange numbers give the difference from the correct position.  +79 for example means the label is 79 points to the right of the correct position.  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 menus. 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, sometimes referred to as ambiguous constraints. All views using constraints need enough information to determine location and size of a view.  For example this button is missing constraints:

 

The frame color changes on a missing constraint to red. 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. In some cases, auto layout can guess at a size if you give enough position information.

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 37 points from the top margin and once 35 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 a red I-beam with the distance 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 35, and then press the Delete key, the constraints will be correct.

You will become good at auto layout if you understand what the pin, align and resolver do.  You will become a master if you understand how to correct the three errors.