Autolayouts via Layout anchors

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:

NSLayoutAnchor:

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:

1. Leading anchor
2. Trailing anchor
3. Left anchor
4. Right anchor
5. 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.

Basic layout constraints

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:

1. Top anchor
2. Bottom anchor
3. Center-Y anchor
4. First baseline anchor
5. 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.

Baseline constraints

Dimension Layout Anchors

These anchors define the size of a view. They are instances of NSLayoutDimension class. This contain the following anchors:

1. Width anchor
2. Height anchor

As the name implies, these define width and height constraints.

Width and center anchors

Adding Constraints via Layout Anchors

Example 1: Add a view to the super view

Example 1 output

Example 2: Add a view at the center of superview

Example 2 output

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.

Example 3 output

Caveats

1. 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.
2. 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.

Chessboard View

Constraints in Layout Anchors:

Constraints in VFL

Conclusion

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

ihak/LayoutAnchor

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.