Adding constraints via Visual Formatting Language is quite easy and fun. But it becomes pretty daunting task once we have complex views. It becomes even more difficult if things don’t go as expected and the constraints are required to be debugged. Or if the view was created by someone else and you need to slide in one more textfield amidst an already large form with a lot of labels and their corresponding textfields.
Layout Anchors to the rescue
Layout Anchors is a mechanism introduced by Apple in iOS 9. It is a whole new way of adding constraints that is readable and concise.
According to the class definition:
A factory class for creating layout constraint objects using a fluent API. Use these constraints to programatically define your layout using Auto Layout. Instead of creating NSLayoutConstraint objects directly, start with a UIView, NSView, or UILayoutGuide object you wish to constrain, and select one of that object’s anchor properties.
Layout Anchors are the properties defined on a UIView, NSView or UILayoutGuide. In this post we will concentrate on the Layout Anchor properties defined on a UIView.
There are total 12 Layout Anchor properties defined on a UIView. They can be grouped into three types. Horizontal, vertical and dimension. There are three separate classes corresponding to each type derived from NSLayoutAnchor Class. NSLayoutXAxisAnchor, NSLayoutYAxisAnchor and NSLayoutDimension respectively.
Horizontal Layout Anchors
These are the anchor properties that are used to add horizontal constraints or constraints along X-axis of a view. These are the instances of NSLayoutXAxisAnchor class. These contain the following anchors:
- Leading anchor
- Trailing anchor
- Left anchor
- Right anchor
- Center-X anchor
Here, all the constraints are self explanatory. One difference that is worth pointing out is that leading and trailing anchors are dynamic and may change according to the locale direction. I.e. they will be left to right for LTR(left to right) languages and will be right to left for RTL languages. On the contrary left and right anchors will always remain left and right, no matter what.
Vertical Layout Anchors
These are the anchor properties that are used to add the constraints along Y-axis of a view. Instances of NSlayoutYAxisAnchor class, these properties contain the following anchors:
- Top anchor
- Bottom anchor
- Center-Y anchor
- First baseline anchor
- Last baseline anchor
Here first baseline is the baseline of the first line of text in a multiline label. Similarly last baseline is the baseline of the last line of text in a multiline label. They will be same if text is single line.
Dimension Layout Anchors
These anchors define the size of a view. They are instances of NSLayoutDimension class. This contain the following anchors:
- Width anchor
- Height anchor
As the name implies, these define width and height constraints.
Adding Constraints via Layout Anchors
Example 1: Add a view to the super view
Example 2: Add a view at the center of superview
Example 3: Simple form
Note: Instead of providing constants in above constraints we can also use the layoutMarginsGuide property of a view to layout the view w.r.t margins. See UILayoutGuide for further deatils.
- The constraint returned via layout anchor API is not active by default. You need to activate that constraint to make it functional. Forgetting this can lead to unintended layout.
- NSLayoutAnchor API makes it relatively easy to apply constraints programmatically. But, there is no alternative of InterfaceBuilder. Layout Anchors make life a little bit easier but when it comes to complex views always try to make them in IB.
VFL vs Layout Anchors
To check which method of adding constraints is easier I created a chessboard in both VFL and in Layout Anchors. Below is the code examples of both for you to compare.
Constraints in Layout Anchors:
Constraints in VFL
NSLayoutAnchor is a new way of adding constraints programmatically. Its easy to remember and quick to code. But when views get complex it suffers with the same problem of complex and difficult to understand code. So still InterfaceBuilder is the preferred way of laying out a view.
Download the example project
Call To Action
If you enjoyed this piece of mine, please 👏 to the content of your heart. Share it to help others to find it. Or you can comment below for suggestions and improvements.