Layout Expressions

LayoutExpressions is a lightweight and easy-to-use library for defining Auto Layout constraints, designed for Swift. It lets you describe constraints expressively and with type safety:

NSLayoutConstraint.activateLayout {
    subviewB.anchors.allEdges == subviewA.anchors.allEdges - 10
}

instead of:

let top = subview.topAnchor.constraint(equalTo: container.topAnchor, constant: 10)
let bottom = subview.bottomAnchor.constraint(equalTo: container.bottomAnchor, constant: -10)
let leading = subview.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 10)
let trailing = subview.trailingAnchor.constraint(equalTo: container.trailingAnchor, constant: -10)
NSLayoutConstraint.activate([top, bottom, leading, trailing])

This example uses a Composite Expression to create four constraints from a single expression. More details below.

Usage

Add NSLayoutConstraints to your views by typing your constraints as view1.attribute1 == view2.attribute2 × multiplier + constant. You can use any of ==, >=, or <= as relations, and you can omit the multiplier and constant if they aren't needed:

// A basic layout expression for the y-axis:
subview.anchors.top == container.anchors.top

// With multiplier and constant:
subview2.anchors.width >= subview1.anchors.width * 2 + 10

LayoutExpressions supports Swift 5.1 function builders, allowing you to easily create dynamic layouts:

NSLayoutConstraint.activateLayout {
    if pinTopAndBottomToSafeArea {
        subview.anchors.verticalEdges == container.anchors.safeArea.verticalEdges
    } else {
        subview.anchors.verticalEdges == container.anchors.verticalEdges
    }
    subview.anchors.horizontalEdges == container.anchors.horizontalEdges
}

To access the constraints without activating them you can use evaluateLayout() instead of activateLayout():

let constraints = NSLayoutConstraint.evaluateLayout {
    subview.anchors.center == container.anchors.center
}
// `constraints` contains a .centerX constraint and a .centerY constraint

Set priorities for your constraints by using the <~ operator after your expression:

subview1.anchors.width >= subview2.anchors.width <~ .defaultHigh

LayoutExpressions provides the following extensions for layout anchors:

View Anchors	Layout Guide Anchors
view.anchors.top	guide.anchors.top
view.anchors.bottom	guide.anchors.bottom
view.anchors.leading	guide.anchors.leading
view.anchors.trailing	guide.anchors.trailing
view.anchors.left	guide.anchors.left
view.anchors.right	guide.anchors.right
view.anchors.centerX	guide.anchors.centerX
view.anchors.centerY	guide.anchors.centerY
view.anchors.width	guide.anchors.width
view.anchors.height	guide.anchors.height
view.anchors.firstBaseline
view.anchors.lastBaseline

As well as convenience shorthands for accessing the anchors of common layout guides:

UIView
Safe Area	view.anchors.safeArea.*
Layout Margins	view.anchors.margins.*
Readable Content Guide	view.anchors.readable.*

These shorthands can further simplify layout expressions that use layout guides, for example: subview.anchors.top == container.anchors.safeArea.top

Composite Expressions

LayoutExpressions makes common layout patterns even easier with composite expressions. Composite expressions are expressions that evaluate to more than one NSLayoutConstraint.

For example, subview.anchors.allEdges == container.anchors.allEdges will pin all edges of subview to container. This expression evaluates to four distinct NSLayoutConstraints -- one for each edge. Use them to make your code even more concise and clear.

LayoutExpressions provides the following extensions for composite layout anchors:

View Anchors	LayoutGuide Anchors
view.anchors.allEdges	guide.anchors.allEdges
view.anchors.verticalEdges	guide.anchors.verticalEdges
view.anchors.horizontalEdges	guide.anchors.horizontalEdges
view.anchors.center	guide.anchors.center
view.anchors.size	guide.anchors.size

Edges

view.anchors.allEdges evaluates to constraints for .top, .bottom, .leading, and .trailing. All relations are supported: ==, >=, <=.

// Pin the edges of subview to container.
subview.anchors.allEdges == container.anchors.allEdges

// Use the '-' operator to inset all edges of subview by 10 pts.
subview.anchors.allEdges == container.anchors.allEdges - 10

view.anchors.verticalEdges evaluates to constraints for .top and .bottom; and view.anchors.horizontalEdges evaluates to constraints for .leading and .trailing. All relations are supported: ==, >=, <=.

// Pin the vertical edges of subview to the container's safe area.
subview.anchors.verticalEdges == container.anchors.allEdges

// Pin the horizontal edges of subview to the container, inset by 10 pts.
subview.anchors.horizontalEdges == container.anchors.horizontalEdges - 10

Size

view.anchors.size evaluates to constraints for .width and .height. All relations are supported: ==, >=, <=.

// Pin the size of subview to the size of container.
subview.anchors.size == container.anchors.size

// Pin the size of subview to the size of container, with an offset.
subview.anchors.size == container.anchors.size + Size(width: -20, height: -10)

// Pin the size of subview to a fixed size.
subview.anchors.size == Size(width: 320, height: 200)

Center

anchors.center evaluates to constraints for .centerX and .centerY. Only the == relation is supported.

// Pin the center of subview to the center of container.
subview.anchors.center == container.anchors.center

// Pin the center of subview to the center of container, with an offset.
subview.anchors.center == container.anchors.center + Offset(horizontal: 0, vertical: -10)

Installation

LayoutExpressions supports macOS 10.13+, iOS 9.0+, and tvOS 9.0+.

Swift Package

In Xcode 11, use the repository URL in the Swift Packages screen:

https://github.com/stevebrambilla/LayoutExpressions

Carthage

If you’re using Carthage, simply add LayoutExpressions to your Cartfile:

github "stevebrambilla/LayoutExpressions" ~> 2.0

Contact

• Steve Brambilla

License

LayoutExpressions is available under the MIT license. See the LICENSE file for more info.