Layout – High Fidelity Auto Layout for UIKit

Layout Examples

Single Subview

view.layout(subview.toEdges()).activate()

Multiple Subviews

view.layout {
    label
        .toSafeArea([.top])
        .center(.horizontal)
    imageView
        .toSideEdges(inset: 20)
        .height(200)
    button
        .center(.horizontal)
}
.vertical([label, imageView, button],
          spacing: 50)
.activate()

Layout Methods

Constrain

constrain(viewA, to: .top, of: viewB)

constrain(viewA,
          .top,
          to: .top,
          of: viewB)

constrain(viewA,
          .top,
          is: .greaterThanOrEqual,
          to: .top,
          of: viewB,
          multiplier: 2,
          constant: 100)

constrain(viewA.top, to: viewB.top)

constrain(viewA.top,
          is: .greaterThanOrEqual,
          to: viewB.top,
          constant: 100,
          priority: .high)

constrain(viewA.width, to: viewB.width)

constrain(viewA.width,
          is: .greaterThanOrEqual,
          to: viewB.width,
          multiplier: 2,
          constant: 100,
          priority: .high)

constrain(viewA.width, to: 100)

constrain(viewA.width,
          is: .greaterThanOrEqual,
          to: 100,
          priority: .high)

constrain(viewA, to: viewB, inset: 100)

constrain(viewA,
          to: viewB,
          insets: directional)

constrain(viewA,
          to: viewB,
          insets: canonical)

Equal

equal(.top, views)

equal([.top, .bottom], views)

equalSize(views)

Center

center(viewA,
       between: viewB.leading,
       and: viewB.trailing)

center(viewA,
       between: viewB.leading,
       and: viewB.trailing,
       priority: .high)

center(viewA,
       between: viewB.top,
       and: viewB.bottom)

center(viewA,
       between: viewB.top,
       and: viewB.bottom,
       priority: .high)

Stack

horizontal(views)

horizontal(views,
           spacing: 100,
           direction: .leftToRight,
           priority: .high,
           alignment: .centerY)

vertical(views)

vertical(views,
         spacing: 100,
         priority: .high,
         alignment: .centerX)

Visual Format Language

Only views with an accessibilityIdentifier
are made available to the Visual Format APIs.

The orientation format should be omitted
since it is automatically prepended.

The metrics of the layout are used by default.

horizontal("[view]")

horizontal("[view]",
           metrics: [:],
           options: formatOptions)

vertical("[view]")

vertical("[view]",
         metrics: [:],
         options: formatOptions)

Activation

activate()

deactivate()

Priority

require()

withPriority(.high)

prioritize(.high)

Animation

This method is useful when animating constraints.

update()

Layout Item Methods

Size

size(size)

size(size, priority: .high)

size(width: 200, height: 100)

size(width: 200,
     height: 100,
     priority: .high)

Width

width(100)

width(100, priority: .high)

width(is: .lessThanOrEqual, to: 100)

width(is: .lessThanOrEqual,
      to: 100,
      priority: .high)

Height

height(100)

height(100, priority: .high)

height(is: .lessThanOrEqual, to: 100)

height(is: .lessThanOrEqual,
       to: 100,
       priority: .high)

Square

// Size //

square(100)

square(100, priority: .high)

// Aspect Ratio //

square()

Aspect Ratio

aspectRatio(0.5)

aspectRatio(0.5, priority: .high)

Center

center()

center(offset: offset, priority: .high)

center(.horizontal)

center(.horizontal,
       offset: 100,
       multiplier: 2,
       priority: .high)

center(.vertical)

center(.vertical,
       offset: 100,
       multiplier: 2,
       priority: .high)

center(between: view.leading,
       and: view.trailing)

center(between: view.top,
       and: view.bottom)

Attributes

Constrains to superview attributes.

to(.top)

to(.top,
   is: .lessThanOrEqual,
   multiplier: 2,
   constant: 100,
   priority: .high)

to([.top, .bottom])

to([.top, .bottom],
   constant: 100,
   priority: .high)

Edges

Constrains to superview edges.

toEdges()

toEdges(inset: 100, priority: .high)

toEdges(insets: directional)

toEdges(insets: directional,
        priority: .high)

toEdges(insets: canonical)

toEdges(insets: canonical,
        priority: .high)

toEdges([.leading, .trailing])

toEdges([.leading, .trailing],
        inset: 100,
        priority: .high)

toEdges(canonical: [.left, .right])

toEdges(canonical: [.left, .right],
        inset: 100,
        priority: .high)

toSideEdges()

toSideEdges(inset: 100,
            priority: .high)

Margins

Constrains to superview margins.

toMargins()

toMargins(inset: 100, priority: .high)

toMargins(insets: directional)

toMargins(insets: directional,
          priority: .high)

toMargins(insets: canonical)

toMargins(insets: canonical,
          priority: .high)

toMargins([.leading, .trailing])

toMargins([.leading, .trailing],
          inset: 100,
          priority: .high)

toMargins(canonical: [.left, .right])

toMargins(canonical: [.left, .right],
          inset: 100,
          priority: .high)

toSideMargins()

toSideMargins(inset: 100,
              priority: .high)

Safe Area

Constrains to superview safe area.

toSafeArea()

toSafeArea(inset: 100, priority: .high)

toSafeArea(insets: directional)

toSafeArea(insets: directional,
            priority: .high)

toSafeArea(insets: canonical)

toSafeArea(insets: canonical,
            priority: .high)

toSafeArea([.leading, .trailing])

toSafeArea([.leading, .trailing],
           inset: 100,
           priority: .high)

toSafeArea(canonical: [.left, .right])

toSafeArea(canonical: [.left, .right],
           inset: 100,
           priority: .high)

Accessibility Identifier

_ = identifier

identifier = "identifier"

id("identifier")

View Methods

Builder

// Auto Layout //

usingConstraints()

// Size //

constrainingSize()

constrainingSize(size)

// Width //

constrainingWidth()

constrainingWidth(100)

// Height //

constrainingHeight()

constrainingHeight(100)

Size

sizeConstraints()

sizeConstraints(size)

sizeConstraints(width: width,
                height: height)

Width

widthConstraint(is: relation)

widthConstraint(is: relation,
                to: 100)

widthConstraint()

widthConstraint(100)

Height

heightConstraint(is: relation)

heightConstraint(is: relation,
                 to: 100)

heightConstraint()

heightConstraint(100)

Square

// Size //

squareConstraints(100)

// Aspect Ratio //

squareConstraint()

Aspect Ratio

aspectRatioConstraint(0.5)

Equal

equalConstraints(for: .top,
                 to: [view])

Center

centerConstraints()

centerConstraints(offset: offset)

Attributes

constraint(toSuperview: .top)

constraint(for: .top,
           toSuperview: .top)

constraint(for: .top,
           is: .greaterThanOrEqual,
           toSuperview: .top,
           multiplier: 2,
           constant: 100)

constraint(to: .top, of: view)

constraint(for: .top,
           to: .top,
           of: view)

constraint(for: .top,
           is: .greaterThanOrEqual,
           to: .top,
           of: view,
           multiplier: 2,
           constant: 100)

constraints(toSuperview: [.top])

constraints(is: .greaterThanOrEqual,
           toSuperview: [.top],
           multiplier: 2,
           constant: 100)

constraints(to: [.top], of: view)

constraints(is: .greaterThanOrEqual,
           to: [.top],
           of: view,
           multiplier: 2,
           constant: 100)

Edges

Constrains to superview edges.

edgeConstraints()

edgeConstraints(inset: 100)

edgeConstraints(insets: directional)

edgeConstraints(insets: canonical)

sideEdgeConstraints()

sideEdgeConstraints(inset: 100)

Margins

Constrains to superview margins.

marginConstraints()

marginConstraints(inset: 100)

marginConstraints(insets: directional)

marginConstraints(insets: canonical)

sideMarginConstraints()

sideMarginConstraints(inset: 100)

Safe Area

Constrains to superview safe area.

safeAreaConstraints()

safeAreaConstraints(inset: 100)

safeAreaConstraints(insets: directional)

safeAreaConstraints(insets: canonical)

Auto Layout

NSLayoutConstraint

activate()

deactivate()

require()

withPriority(.high)

prioritize(.high)

NSLayoutDimension

constraint(to: view.width)

constraint(is: .greaterThanOrEqual,
           to: view.width,
           multiplier: 2,
           constant: 100)

constraint(is: .greaterThanOrEqual,
           to: 100)

constraint(100)

NSLayoutXAxisAnchor

constraint(to: view.leading)

constraint(is: .greaterThanOrEqual,
           to: view.leading,
           constant: 100)

NSLayoutYAxisAnchor

constraint(to: view.top)

constraint(is: .greaterThanOrEqual,
           to: view.top,
           constant: 100)

Visual Format Language

These methods are static on NSLayoutConstraint.

constraints(format: "[view]",
            views: ["view": view])

constraints(format: "[view]",
            views: ["view": view],
            metrics: [:],
            options: formatOptions)

constraints(formats: ["[view]"],
            views: ["view": view])

constraints(formats: ["[view]"],
            views: ["view": view],
            metrics: [:],
            options: formatOptions)

Arguments

Anchors

leading

trailing

left

right

top

bottom

centerX

centerY

width

height

firstBaseline

lastBaseline

Insets

directional(top: 100,
            leading: 100,
            bottom: 100,
            trailing: 100)

canonical(top: 100,
          left: 100,
          bottom: 100,
          right: 100)

Directional Edges

top

bottom

leading

trailing

Canonical Edges

top

bottom

left

right

Layout Direction

leadingToTrailing

leftToRight

X-Axis Attributes

leading

trailing

left

right

centerX

Y-Axis Attributes

top

bottom

centerY

firstBaseline

lastBaseline

Layout Priority

disabled

low

high

View Controller

Safe Area

safeTop

safeBottom

Collections

[Layout]

activate()

deactivate()

[NSLayoutConstraint]

activate()

deactivate()

require()

withPriority(.high)

prioritize(.high)

Frames

View

usingFrames()

usingFrames(.scaleWithSuperview)

disablingIntrinsicSize()

Autoresizing Mask

topLeft

topRight

bottomLeft

bottomRight

scaleWithSuperview