You already know quite a bit about Auto Layout. It's time to learn more about working with constraints in Interface Builder.

Setting Up the Project

Create a new project in Xcode using the Single View App template. Name the project Auto Layout and, if you're using Xcode 8, set Devices to Universal. Tell Xcode where you'd like to save the project and click Create. Open the main storyboard to get started.

One Way to Add Constraints

I'd like to start by showing you the two ways you can add constraints in Interface Builder. Open the Object Library on the right and add a text field to the top of the view controller's view. We want to fix its width, center it in its superview, and pin it to the top edge of the safe area layout guide.

The first and most straightforward approach is using the Add New Constraints and Align menus at the bottom. We've used these menus several times in this series. Select the text field, open the Add New Constraints menu, and pin the text field to the top edge of the safe area layout guide. You can fix the width of the text field at the same time by checking the Width checkbox.

The advantage of using the Add New Constraints menu is that you can specify the constant of the constraint regardless of the current size and position of the view you're adding constraints to. For example, set the constant for the width constraint to 240 and add the constraints by clicking the Add 2 Constraints button at the bottom. Interface Builder shows us an error because we need to add one more constraint.

To center the text field in the superview, open the Align menu and check the Horizontally in Container checkbox. Click the Add 1 Constraint button at the bottom to add the constraint. There is no need to add a constraint for the height of the text field. The intrinsic content size of the text field already sets that for us.

Another Way to Add Constraints

While the Pin and Align menus are convenient, there is a much quicker way to add constraints in Interface Builder. Select the text field and open the Resolve Auto Layout Issues menu at the bottom right. Choose Clear Constraints from the menu to remove the constraints we added to the text field.

With the text field selected, press the Control key and drag from the text field to its superview. It's important that you drag to the top of the superview. When you release, a menu pops up with a number of options. The option we are interested in is Top Space to Safe Area. If you hold the Shift key, you can add multiple constraints at the same time. Don't forget to click the button at the bottom of the menu to add the constraints.

The orange lines that appear indicate that the layout we are seeing in Interface Builder doesn't match the layout we will see at runtime. The dashed orange line shows us the frame of the text field at runtime. This is easy to fix. We need to tell Interface Builder to re-evaluate the constraints and update the frames of the views in the user interface. Click the Update Frames button at the bottom to update the frames of the views in the user interface.

We don't see any red lines this time because the intrinsic content size of the text field takes care of the size constraints. But it's obvious we want the text field to be wider. Select the text field, press the Control key, and drag from the text field to the text field. When you release, the menu that appears contains a number of new options including Width. The downside of this technique is that Interface Builder uses the current size and position of the view to create the constraints.

If we want to modify the width constraint, we need to edit its properties. Select the text field, open the Size Inspector on the right, and double click the constraint that fixes the view's width. Set the constant of the constraint to 300 and hit the Return key. The user interface updates automatically.

The direction in which you drag is important when using this technique to add constraints. Select the text field one more time and drag to the left side of the superview. Because you dragged horizontally, Interface Builder assumes that you want to add a horizontal constraint. If you drag vertically, Interface Builder shows you a different list of options.

Pressing the Control key and dragging also works in the Document Outline. This is especially useful if you're creating a user interface with a complex view hierarchy. The downside is that the direction of the drag isn't taken into account.

Auto Layout Menus

Before we move on, I want to say a few words about the Auto Layout menus at the bottom of the editor.

Update Frames

The first menu is the Update Frames menu. This menu lets you update the frame of the selected views and their subviews. When you make changes to a user interface, it can happen that the frames of the views in the view hierarchy aren't automatically updated. This menu forces the layout engine to re-evaluate the constraints of the user interface.

Embed in Stack

The second menu is the Embed in Stack menu. This menu allows you to easily create stack views, which we discuss later in this series.

Align

The third menu is the Align menu, which we already used several times in this series. It allows you to align the edges of two or more views.

Add New Constraints

The fourth menu is the Add New Constraints menu, which we also used several times in this series. I usually refer to this menu as the Pin menu.

Resolve Auto Layout Issues

The rightmost menu is named Resolve Auto Layout Issues. It's useful for resolving Auto Layout issues, such as removing constraints and asking Interface Builder to add constraints for you.

Let's try out that last option. Add a new button below the text field and pin it to the bottom of the text field by pressing the Control key and dragging from the button to the text field, choosing Vertical Spacing from the menu.

The red line indicates that the layout is unsatisfiable. We can resolve this issue by asking Interface Builder to add the missing constraints for the button. Open the Resolve Auto Layout Issues menu at the bottom and select Add Missing Constraints. Based on the currently selected view, Interface Builder adds the necessary constraints to create an unambiguous, satisfiable layout. While this may seem great, this method falls short for more complex layouts. Be careful.

Constrain to Margins

To end this episode, I want to say a few words about the Constrain to margins checkbox of the Add New Constraints menu, which we have carefully avoided so far. This checkbox determines whether constraints to the superview of the selected view use the margins of the superview or its edges. If the checkbox is selected, the margins are used, otherwise the edges of the superview are used.

But which margins are we talking about? Each view has a layoutMargins property. The margins of a view specify the preferred margins of the view's edges and its subviews. If we check Constrain to margins, the constraints we add use the margins of the superview instead of the edges of the superview. Apple recommends to use the margins to make sure your application sticks to Apple's Human Interface Guidelines as much as possible.

You now know how to work with constraints in Interface Builder. In the next episode, we continue exploring Interface Builder.