In this tutorial, I zoom in on prototyping constraints, a concept that frequently confuses developers new to Auto Layout. But before we can discuss prototyping constraints, we need to understand the difference between implicit and explicit constraints.
Implicit & Explicit Constraints
There are two types of constraints, implicit constraints and explicit constraints. The difference is easy to understand. Explicit constraints are constraints that are added by you, the developer. You create them in code or in Interface Builder.
Implicit constraints are constraints Auto Layout adds for you. While this may seem convenient, implicit constraints often cause confusion because they are ... well ... implicit. It is easy to miss or overlook them.
The intrinsic content size of a view is a good example to explain implicit constraints. As I wrote earlier, some views know what size they should be. This is referred to as the view's intrinsic content size. A label, for example, knows what size it should be based on its text, the font of the text, etc.
At runtime, the intrinsic content size of the label is translated into constraints that describe the size of the label. Because these constraints are added by Auto Layout, they are referred to as implicit constraints. You don't explicitly create them.
Prototyping Constraints
Prototyping constraints are implicit constraints. There is one important issue, though. Prototyping constraints often confuse developers new to Auto Layout. Experienced developers rarely use them because they have a limited use. But if you know about them and understand how you can use them, you can save yourself some frustration.
To better understand what prototyping constraints are, we need to see them in a project. Open Xcode, create a new project, and open the main storyboard of the project. Open the Object Library on the right and add a label to the View Controller Scene.
Even though we haven't added any explicit constraints to describe the size and position of the label, Interface Builder doesn't show us any warnings or errors. This is odd because, as a rule of thumb, every view in the view hierarchy should have a minimum of two constraints per dimension. The intrinsic content size of the label is translated into one constraint per dimension at runtime. That means there is still one constraint missing per dimension.
As a rule of thumb, every view in the view hierarchy should have a minimum of two constraints per dimension.
We can explain this with the help of prototyping constraints. Every view you add in Interface Builder automatically receives a set of constraints that pin it to the top left of its superview. These constraints are referred to as prototyping constraints.
Apple explicitly states that you should never use prototyping constraints in production. Considering how easy it is to create constraints in Interface Builder, prototyping constraints are of little value.
What Are Prototyping Constraints For
But why has Apple introduced prototyping constraints? In earlier versions of Xcode, Interface Builder would automatically add explicit constraints to every view that was added to the canvas. While this may look good on paper, it was often frustrating and it overcomplicated Auto Layout for developers.
Interface Builder still creates constraints for every view you add to the canvas. The difference is that the constraints are implicit and, more importantly, the prototyping constraints are removed the moment you add an explicit constraint to the label.
You can test this by pinning the label's leading edge to the leading edge of its superview. This results in an error in Interface Builder. Can you guess why Interface Builder throws an error?
The label's intrinsic content size is translated into a horizontal and a vertical constraint. Even though we also added an explicit constraint that pins the label to the leading edge of its superview, there is one vertical constraint missing for a unambiguous, satisfiable layout. We can resolve this by pinning the label's top to the bottom of the top layout guide of the view controller.
By automatically removing prototyping constraints when they are no longer needed, prototyping constraints have their use without getting in your way. Note that prototyping constraints are only added when adding a view in Interface Builder.
What's Next?
Prototyping constraints are often overlooked by developers unfamiliar with Auto Layout. In fact, most developers don't know what prototyping constraints are if you would ask them. Even though prototyping constraints have their use, Interface Builder makes it very easy to add constraints and there is absolutely no need to use them in production. In fact, you should never use prototyping constraints in production.
Questions? Leave them in the comments below or reach out to me on Twitter.
