In the previous episode, I showed you how to create constraints in Interface Builder. This episode zooms in on the tools Interface Builder provides us with to work with constraints.

I-Bars and Plain Lines

I've opened the project we created in the previous episode to give us something to work with. To start afresh, remove the subviews from the view controller's view. Open the Object Library on the right and add a text field to the view controller's view. Pin the text field to the top of the safe area layout guide and set its width to 200 points.

With the text field selected, open the Align menu and horizontally center the text field in its superview. The result is an unambiguous, satisfiable layout.

We see two types of blue lines, I-bars and plain lines. An I-bar shows the size of a space. In this example, I-bars are used for the width constraint and for the top edge constraint of the text field. Interface Builder uses plain lines to show where edges align. In this example, the center of the text field and the superview align.

The blue lines of this user interface are solid indicating that the constraints are required. They have a priority of 1000. Remember from earlier in this series that optional constraints are represented by dashed lines.

Select the text field and drag it to the center of the view controller's view. This results in solid and dashed orange lines. Interface Builder shows us the difference between the layout we see in Interface Builder and the one we can expect at runtime. The dashed orange rectangle represents the frame of the text field at runtime.

We already learned that we can fix this issue by clicking Update Frames at the bottom. However, if we decide that this is the right size and position for the text field, we can ask Interface Builder to update the text field's constraints by opening the Resolve Auto Layout Issues menu and choosing Update Constraint Constants.

Resolving Conflicts

If we add a constraint that fixes the text field's height to 50 points, the user interface updates automatically. That isn't new. But if we add another constraint that fixes the text field's height to 100 points, Interface Builder shows us two red I-bars, telling us the two constraints are in conflict. The result is an ambiguous, unsatisfiable layout. We can fix this one of several ways.

Select one of the height constraints by clicking its solid red line and open the Attributes Inspector on the right to inspect its attributes. Set priority to High (750) to make the constraint optional. This turns the red line of the constraint into a dashed blue line. In the Attributes Inspector, we can modify the constant of the constraint, its relation, and the first item. There isn't a second item for this constraint because it's a size constraint.

Editing Constraints

Select the top edge constraint of the text field and open the Attributes Inspector. We can see a few additional options. The Attributes Inspector shows us the first and the second item of the constraint and we also have access to the multiplier, which is currently set to 1.

If you want to add a constraint that is only installed at design time, that is, in Interface Builder, then you need to check the option Remove at build time. This can be useful to avoid errors or warnings in Interface Builder, for example, if you plan to add constraints in code.

To disable a constraint in Interface Builder without removing it, you need to uncheck the Installed checkbox at the bottom of the Attributes Inspector. Select one of the height constraints and uncheck the Installed checkbox. The user interface updates automatically and the constraint we disabled is grayed out in the Document Outline.

Interface Builder also shows the relation of constraints for Greater Than or Equal and Less Than or Equal relations. The relation type is visualized in Interface Builder by a badge overlaying the I-bar.

Finding and Selecting Constraints

It can be difficult to find the constraints you're looking for when you're working on a complex layout. Interface Builder makes this a little bit easier. Select the text field and open the Size Inspector on the right. You can filter the constraints by selecting one or more attributes in the diagram at the top of the list of constraints. Notice that the optional height constraint has a dashed outline in the Size Inspector. Required constraints have a solid outline.

Constraints are also visible in the Document Outline. The rule Interface Builder applies to organize constraints is simple. The closest view that holds both items of the constraint holds the constraint. For example, the size constraints of the text field are held by the text field itself. The other two constraints we added are held by the superview of the text field because the text field and the safe area layout guide are held by the superview.

Have you noticed that the Document Outline also contains an item named Safe Area? It seems to be a subview of the view controller's view. In the next episode, you learn everything you need to know about the safe area layout guide.