When key paths were introduced with Swift 4, we took a moment to show how they could be used to create very simple, but very powerful helper functions to create Auto Layout constraints. You can see the results in Swift Talk 75 (a public episode).

Preparing for new episodes, we've had the chance to use this approach again, and we still really like it. 😀

The approach uses key paths to describe layout anchors on views. To create a valid constraint from two anchors, they have to refer to the same axis; for example, we can constrain a left anchor to another left anchor, but we cannot constrain a left anchor to a top anchor. Using generics, we can ensure the compatibility of the anchors in our helper functions.

We'll start with an equal helper that constrains the same anchor type on two views to each other:

								func equal<L, Axis>(_ to: KeyPath<UIView, L>) -> (UIView, UIView) -> NSLayoutConstraint where L: NSLayoutAnchor<Axis> {
    return { view1, view2 in
        view1[keyPath: to].constraint(equalTo: view2[keyPath: to])
    }
}

							

equal is a function that returns a function, which takes the two views and produces a layout constraint. To clean up the function signature, we introduce a type alias for this return type:

								typealias Constraint = (UIView, UIView) -> NSLayoutConstraint

func equal<L, Axis>(_ to: KeyPath<UIView, L>) -> Constraint where L: NSLayoutAnchor<Axis> {
    return { view1, view2 in
        view1[keyPath: to].constraint(equalTo: view2[keyPath: to])
    }
}

							

The parameter of equal is a key path describing a layout anchor property on UIView. You can read the KeyPath<UIView, L> type as a key path that can be used on a UIView to get a property of type L, which in this case is constrained by the where clause to be an NSLayoutAnchor.

We can use this function to create constraints like this:

								let constraint = equal(\.topAnchor)(view1, view2)

							

We usually use these helpers together with a custom addSubview method. This method combines adding a subview with disabling its autoresizing mask translation, and applying the constraints:

								extension UIView {
    func addSubview(_ other: UIView, constraints: [Constraint]) {
        other.translatesAutoresizingMaskIntoConstraints = false
        addSubview(other)
        addConstraints(constraints.map { $0(other, self) })
    }
}

							

Using our variant of addSubview, we can add a view that's constrained on all four edges to its parent like this:

								addSubview(childView, constraints: [
    equal(\.topAnchor), equal(\.bottomAnchor),
    equal(\.leftAnchor), equal(\.rightAnchor)
])

							

Of course, we don't always want to constrain the same anchor on two views. We can write another variant of equal that accepts two key paths, making sure both refer to a layout anchor on the same axis:

								func equal<L, Axis>(_ from: KeyPath<UIView, L>, _ to: KeyPath<UIView, L>, constant: CGFloat = 0) -> Constraint where L: NSLayoutAnchor<Axis> {
    return { view1, view2 in
        view1[keyPath: from].constraint(equalTo: view2[keyPath: to], constant: constant)
    }
}

							

Now we can write our original equal function with only one key path parameter in terms of the second, more complete one:

								func equal<L, Axis>(_ to: KeyPath<UIView, L>, constant: CGFloat = 0) -> Constraint where L: NSLayoutAnchor<Axis> {
    return equal(to, to, constant: constant)
}

							

Similarly, we can create another variant that only accepts key paths to dimension anchors (e.g. heightAnchor):

								func equal<L>(_ keyPath: KeyPath<UIView, L>, constant: CGFloat) -> Constraint where L: NSLayoutDimension {
    return { view1, _ in
        view1[keyPath: keyPath].constraint(equalToConstant: constant)
    }
}

							

Here's an example combining the use of multiple variants of equal. We're adding a subview that's halfway off screen to the bottom, is inset ten points at both sides, and is 100 points high:

								addSubview(childView, constraints:[
    equal(\.centerYAnchor, \.bottomAnchor),
    equal(\.leftAnchor, constant: 10), equal(\.rightAnchor, constant: -10),
    equal(\.heightAnchor, constant: 100)
])

							

The code for these helpers is only 30 lines long, and could easily be extended with very little additional code to support all of auto layout.

For more episodes on Swift, the language, see our Swift Talk Collection; over half the episodes are public!

To access all Swift Talk episodes, become a Subscriber — we have monthly or yearly plans, for individuals or teams, with new episodes every week. 🤓