In this episode, we take a look at implicit and explicit constraints. It's a topic worth covering because it frequently trips up developers new to Auto Layout.

A Rule of Thumb

As a rule of thumb, remember that an unambiguous, satisfiable layout requires a minimum of two constraints per view per dimension. In the previous episode, you learned that it's possible to add more constraints per view per dimension as long as the constraints don't cause a conflict. As a minimum, however, you need to define two constraints per view per dimension.

Prototyping Constraints

I've created a new project to show you this rule in action. The storyboard has a view controller and the view of the view controller contains a red view. I haven't added any constraints yet.

You may be wondering why Interface Builder isn't showing any errors. The current layout seems to violate the rule we discussed a moment ago. The red view has no constraints and yet if we run the application in the simulator, you can see that the user interface looks fine. Why is that?

The answer is simple. Prototyping constraints. When a view is added to a scene, Interface Builder automatically adds prototyping constraints to the view. These constraints describe the view's size and position relative to the upper left corner of its superview.

Implicit Constraints

Because we didn't explicitly add these constraints, prototyping constraints are implicit. How do we get rid of these prototyping constraints? That's very easy. The moment we add a constraint to the view, the prototyping constraints are automatically removed by Interface Builder. Let's add a constraint that fixes the view's width. Select the view, click the Pin menu at the bottom, select width, and add the constraint.

Explicit Constraints

We've added one constraint to the view. Interface Builder shows us several errors since we violated the rule I spoke about earlier. Because we've added an explicit constraint that fixes the view's width, Interface Builder has removed the prototyping constraints. This also means that the rule of two constraints per view per dimension is violated hence the errors.

We need to add another constraint for the horizontal dimension. Let's pin the view's leading edge to the leading edge of the safe area layout guide. We've now added enough constraints to the view for the horizontal dimension.

Let's repeat this process for the vertical dimension. Select the view, open the Pin menu, check the Height checkbox, and add the constraint. I also want to pin the view to the top edge of the safe area layout guide. We now have an unambiguous, satisfiable layout and Interface Builder no longer shows us any errors. If we run the application in the simulator, you can see we end up with the user interface we expected.

Implicit and explicit constraints are important to understand. There are several other scenarios in which Interface Builder adds one or more implicit constraints. It's important that you understand why and when that happens as it makes working with Auto Layout less mysterious and less frustrating.

For now, remember that implicit constraints are constraints Auto Layout adds for you. Explicit constraints are the constraints you add yourself.

In the next episode, we discuss intrinsic content size, an important concept that trips up many developers.