The Auto Layout Anchor Cheat Sheet

Cheat your way to competency

Image for post
Image for post
Photo by Artur Rutkowski on Unsplash

Auto Layout is loved by some, hated by others.

What is certain is that you will need to use it at some point in your career. That is, in your own project, one at work or one that you will tackle as started by some other developer.

To make things easier…here is a cheat sheet to help you just get things done!

Difficulty: Beginner | Easy | Normal | Challenging

Prerequisites:

Terminology

Anchors: Properties of UIViews that enable your to create constraints

Auto Layout: A constraint-based layout system

Playgrounds: A development environment that can be used to create Swift code

The golden rules of Auto Layout

We will create view hierarchies using Auto Layout (in a minute!).

When using Auto Layout you can initialise views using .zero as the rect frame, and we set translatesAutoresizingMaskIntoConstraints to false. When creating views we use loadView to create your views manually.

Basics? Well, let us press on with examples.

Setup for the examples

Within Playgrounds it is pretty easy to set up a view to display our other views within, making sure to whack PlaygroundSupport in there and support indefinite execution

import PlaygroundSupport
let view = UIView()
view.backgroundColor = .green
view.frame = CGRect (x: 0 ,y: 0 ,width: 300 ,height: 300)
PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = view

The Auto Layout anchor

There are several approaches to using Auto Layout. What are these anchors? Well, let us see:

widthAnchor, heightAnchor, centerXAnchor, centerYAnchor, topAnchor, leadingAnchor, trailingAnchor, topAnchor, bottomAnchor which can then be compared to a parent view (or another view in the view hierarchy) or the safeAreaLayoutGuide.

Enough! Let’s see how these might be applied in a Swift Playground.

The approach for the examples

Choosing a UILabel and placing it within the UIView() is the basic approach for these examples.

The label is defined as follows, and must be written after the view

let label = UILabel (frame: .zero)
label.text = “The Text”
label.textAlignment = .center
label.backgroundColor = .lightGray
view.addSubview(label)

So so far (if your are sequentially following this guide) you will have the following (presented to you in the form of a GIST). You see where I’ve added the comment // Auto Layout can go here ? That is where you’ll need to add the example code.

Is that understood? Let’s make progress.

Stuck in the middle middle with you

Putting an item in the middle of the parent view can be achieved with the following;

label.translatesAutoresizingMaskIntoConstraints = false
label.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

The first line with an instance property translatesAutoresizingMaskIntoConstraints set to false, which tells the compiler that we want to use Auto Layout (rather than frame-based layout). You’ll see the property often in this guide, but don’t worry about it too much!

The second and third lines create constraints that are equal to the parent view (which is the attractive green square).

Image for post
Image for post

The result is a green UIView that has the UILabel snugly in the middle (and it would be, even if you changed the orientation of a phone, were this on a phone, which it isn’t).

These anchors really do help us out!

Make it a heading

The top and middle of the green UIView? Perhaps let us make the label a little bit wider?

The translatesAutoresizingMaskIntoConstraints will be still set to false, and the centerXAnchor will be unchanged.

label.translatesAutoresizingMaskIntoConstraints = false
label.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
label.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
label.widthAnchor.constraint(equalToConstant: 200).isActive = true

The last line, however is a constraint with a constant. That constant is 10 to give a nice little border at the top of the UIView.

Image for post
Image for post

Round up: So far

We have used two instance methods: constraint(equalTo:) and constraint(equalTo:constant:) that individually apply constraints (and we need to remember to make it active, if not it’s simply not going to work — that is won’t be applied).

So we can make anchors either equal to other views, or a constant. There are variations for greaterThanOrEqualTo and lessThanOrEqualTo.

You want a list? That’s annoying. Here you go:

Image for post
Image for post

What is interesting here, is that each of these returns a value of NSLayoutConstraint.

Creating our own NSLayoutConstraint

You can create your own constraint usingNSLayoutConstraint as in the small code block below. Why have I chosen to only show you this single, tame example? The code here is more complex, and lacks some of the type checking available using the NSLayoutConstraint.Attribute subclasses as will be shown below.

NSLayoutConstraint(item: subview,
attribute: .leading,
relatedBy: .equal,
toItem: view,
attribute: .leadingMargin,
multiplier: 1.0,
constant: 0.0).isActive = true

NSLayoutContraint.Attribute

This example is going to pin the edges of the label to the UIView. Unfortunately we won’t be able to see that rather wonderful green, but for the example this will have to do.

To move the article on NSLayoutConstraint.activate is a rather great way of doing this (note I haven’t used the constant variation of the anchors here).

label.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
label.topAnchor.constraint(equalTo: view.topAnchor),
label.bottomAnchor.constraint(equalTo: view.bottomAnchor),
label.leadingAnchor.constraint(equalTo: view.leadingAnchor),
label.trailingAnchor.constraint(equalTo: view.trailingAnchor),
])

Which rather depressingly hides the background.

Image for post
Image for post

but, worst things happen at sea!

NSLayoutContraint.Attribute using instance properties

We are within the safe area for this example, so there won’t be any visible difference here. But if you are using a UIViewController you might well see a difference (what with that notch, and that) so here is a simple example to get you going: label.topAnchor.constraint(equalTo:view.safeAreaLayoutGuide.topAnchor)

The same is true for readableContentGuide label.topAnchor.constraint(equalTo:view.readableContentGuide.topAnchor)

Which should help ensure your text is readable; which is something you should want (after all).

Conclusion

Auto Layout is a great feature of the iOS SDK. Of course, it is rather famous for ambiguous layout messages, but these can be avoided with care and making sure that each view (and subview) is able to determine it’s size and postition.

I’m a huge fan of anchors, and it is well worth becoming familiar with these in order to make your App as responsive and as high-quality as possible.

Of course it is

Extend your knowledge

The Twitter contact:

Any questions? You can get in touch with me HERE

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store