Introducing Anchorage: Readable Auto Layout Code for iOS

Auto Layout is a declarative layout engine introduced in iOS 6 to allow developers to create adaptive UI that looks good on any device. Its release coincided with the arrival of the 4-inch screen, the first with different dimensions since the original iPhone. The importance of an adaptive interface has only increased with the release of new devices like the iPhone 6, 6+, and iPad Pro.

Now, a vast majority of iOS developers are using Auto Layout, primarily in conjunction with Interface Builder, to build their apps. Interface Builder is often the tool of choice because, until recently, the tools for creating Auto Layout constraints in code were relatively primitive. However, iOS 9 and Swift brought new tools that greatly improve how we can write Auto Layout code.

What is an Auto Layout Constraint?

A constraint in Auto Layout defines a relationship between two views, or between two properties of the same view. Each constraint can be represented as a linear equation of the form:

Where y is one view attribute, and x is another, which is modified by a multiplier, m, and a constant, c. The Auto Layout engine is responsible for assigning values to every x and y of every constraint in the system. When there is no solution to the system, the engine outputs this familiar message:

Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don’t want. Try this: (1) look at each constraint and try to figure out which you don’t expect; (2) find the code that added the unwanted constraint or constraints and fix it.

Creating Constraints

There are now several ways to create layout constraints in code. Suppose you want to constrain one view (button) to be at most 50% of the width of its container view (container). This starts with a thought:

“Button’s width should be at most 50% Container’s width”

The Old Way

Until iOS 9, the only way to create a constraint was to use the NSLayoutConstraint API directly. The above thought could be achieved with this code:

The constraint then needs to be added to the system, or “activated”:

This isn’t quite as verbose in Swift as it was in Objective-C, but it still feels clunky. Additionally, it takes practice to be able to read that line and immediately understand the intent. Luckily, iOS 9 brought the NSLayoutAnchor API, which greatly simplifies constraint creation.

Layout Anchors

Each UIView has an NSLayoutAnchor corresponding to each NSLayoutAttribute:

The same constraint above can then be created using NSLayoutAnchors:

This is a lot more expressive, but it’s still a bit wordy. Here is where Anchorage can help!

Anchorage

Anchorage is a lightweight wrapper on the NSLayoutAnchor API that allows for fully expressive layout code in Swift. The same constraint, created with Anchorage, looks like this:

We’ve now come full circle and are able to write code that looks exactly like the linear equation we are trying to represent. Anchorage also has conveniences for other common expressions:

Notice that manual constraint activation is no longer needed, because Anchorage returns constraints that are already activated. Additionally, Anchorage sets translatesAutoresizingMaskIntoConstraints = false on the view associated with the anchor on the left hand side of the equation. These conveniences make it simple to write expressive layout code that is easy to read and maintain.

Anchorage also works out of the box with UILayoutGuide, because it’s simply using the NSLayoutAnchor API. It’s easy to constrain views to layout “regions” defined by a layout guide:

Anchorage is publicly available under MIT license at https://github.com/Raizlabs/Anchorage

What’s Next?

Anchorage uses Apple’s latest Auto Layout APIs, and will continue to stay up to date with whatever comes next. We at Raizlabs have used Anchorage in several of our recent apps, and have found it to be a big step up from existing solutions. We’ve found that the syntactic simplicity, expressiveness, and support for the latest features like UILayoutGuide make writing layouts with Anchorage a joy.

For more information, please visit the ReadMe. If you’d like to contribute to Anchorage, please open a pull request, or create an issue on the Github page. I look forward to any feedback you have!


Do you have a project in mind? We’d love to work with you. If you’d like an opportunity to work on projects with us, check out our Careers page. We’re hiring!

Leave a Comment