Layout

Layout is a UIView extension that simplifies AutoLayout.

Parent Child Relationship

Each view that uses Layout to align itself does so in the context of a parent view. The view uses the parent to calculate the proportions necessary to achieve the desired layout. In order to do this, the view must be added to the view hierarchy as a child of a parent view context. If the view has not been added, Layout will attempt to add it for you.

Initialization

Constructing a layout may be done in three ways, using the static Layout library, view layout methods, or a chaining layout context.

Static Method Library

To construct a layout using the static Layout library, a parent view context and child view are passed to the Layout method.

let childView = UIView()
let parentView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 500))

Layout.topLeft(parentView, child: childView, top: 50, left: 50)

View Instance Methods

To construct a layout using the view layout methods, a parentView passes in a childView to its layout method and then supplies the constraint values.

let childView = UIView()
let parentView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 500))

parentView.layout.topLeft(childView, top: 50, left: 50)

Chaining Layout Context

To construct a layout using a chaining layout context, a parentView passes in a childView to its layout context method and then supplies the constraint values.

let childView = UIView()
let parentView = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 500))

parentView.layout(childView).top(50).left(50)

Width

Sets the width of a view.

Static Method

Layout.width(parentView, child: childView, width: 300)

Instance Method

parentView.layout.width(childView, width: 300)

Chaining Context

parentView.layout(childView).width(300)

Height

Sets the height of a view.

Static Method

Layout.height(parentView, child: childView, height: 300)

Instance Method

parentView.layout.height(childView, height: 300)

Chaining Context

parentView.layout(childView).height(300)

Size

Sets the width and height of a view.

Static Method

Layout.size(parentView, child: childView, width: 300, height: 200)

Instance Method

parentView.layout.size(childView, width: 300, height: 200)

Chaining Context

parentView.layout(childView).width(300).height(200)

Stretch a Collection of Views Horizontally

A collection of children views are horizontally stretched with optional left, right padding and interim spacing.

Static Method

Layout.horizontally(parentView,
children: [childView1, childView2, childView3],
left: 20,
right: 20,
spacing: 15)

Instance Method

parentView.layout.horizontally([childView1, childView2, childView3],
left: 20,
right: 20,
spacing: 15)

Stretch a Collection of Views Vertically

A collection of children views are vertically stretched with optional top, bottom padding and interim spacing.

Static Method

Layout.vertically(parentView,
children: [childView1, childView2, childView3],
top: 20,
bottom: 20,
interimSpace: 15)

Instance Method

parentView.layout.vertically([childView1, childView2, childView3],
top: 20,
bottom: 20,
interimSpace: 15)

Stretch a View Horizontally

A child view is horizontally stretched with optional left and right padding.

Static Method

Layout.horizontally(parentView, child: childView, left: 20, right: 20)

Instance Method

parentView.layout.horizontally(childView, left: 20, right: 20)

Chaining Context

parentView.layout(childView).left(20).right(20)

Stretch a View Vertically

A child view is vertically stretched with optional top and bottom padding.

Static Method

Layout.vertically(parentView, child: childView, top: 20, bottom: 20)

Instance Method

parentView.layout.vertically(childView, top: 20, bottom: 20)

Chaining Context

parentView.layout(childView).top(20).bottom(20)

Stretch to All Edges

A child view is vertically and horizontally stretched with optional top, left, bottom and right padding.

Static Method

Layout.edges(parentView, child: childView, top: 50, left: 50, bottom: 20, right: 50)

Instance Method

parentView.layout.edges(childView, top: 50, left: 50, bottom: 20, right: 50)

Chaining Context

parentView.layout(childView).top(50).left(50).bottom(20).right(50)

Align From Top

A child view is aligned from the top with optional top padding.

Static Method

Layout.top(parentView, child: childView, top: 50)

Instance Method

parentView.layout.top(childView, top: 50)

Chaining Context

parentView.layout(childView).top(50)

Align From Left

A child view is aligned from the left with optional left padding.

Static Method

Layout.left(parentView, child: childView, left: 50)

Instance Method

parentView.layout.left(childView, left: 50)

Chaining Context

parentView.layout(childView).left(50)

Align From Bottom

A child view is aligned from the bottom with optional bottom padding.

Static Method

Layout.bottom(parentView, child: childView, bottom: 50)

Instance Method

parentView.layout.bottom(childView, bottom: 50)

Chaining Context

parentView.layout(childView).bottom(50)

Align From Right

A child view is aligned from the right with optional right padding.

Static Method

Layout.right(parentView, child: childView, right: 50)

Instance Method

parentView.layout.right(childView, right: 50)

Chaining Context

parentView.layout(childView).right(50)

Align From Top Left

A child view is aligned from the top left with optional top and left.

Static Method

Layout.topLeft(parentView, child: childView, top: 50, left: 50)

Instance Method

parentView.layout.topLeft(childView, top: 50, left: 50)

Chaining Context

parentView.layout(childView).top(50).left(50)

Align From Top Right

A child view is aligned from the top right with optional top and right padding.

Static Method

Layout.topRight(parentView, child: childView, top: 50, right: 50)

Instance Method

parentView.layout.topRight(childView, top: 50, right: 50)

Chaining Context

parentView.layout(childView).top(50).right(50)

Align From Bottom Left

A child view is aligned from the bottom left with optional bottom and left padding.

Static Method

Layout.bottomLeft(parentView, child: childView, bottom: 50, left: 50)

Instance Method

parentView.layout.bottomLeft(childView, bottom: 50, left: 50)

Chaining Context

parentView.layout(childView).bottom(50).left(50)

Align From Bottom Right

A child view is aligned from the bottom right with optional bottom and right padding.

Static Method

Layout.bottomRight(parentView, child: childView, bottom: 50, right: 50)

Instance Method

parentView.layout.bottomRight(childView, bottom: 50, right: 50)

Chaining Context

parentView.layout(childView).bottom(50).right(50)

Align From Center

A child view is aligned at the center with an optional offsetX and offsetY value.

Static Method

Layout.center(parentView, child: childView)

Instance Method

parentView.layout.center(childView)

Chaining Context

parentView.layout(childView).center()

Align From Center Horizontally

A child view is aligned at the center horizontally with an optional offset value.

Static Method

Layout.centerHorizontally(parentView, child: childView)

Instance Method

parentView.layout.centerHorizontally(childView)

Chaining Context

parentView.layout(childView).centerHorizontally()

Align From Center Vertically

A child view is aligned at the center vertically with an optional offset value.

Static Method

Layout.centerVertically(parentView, child: childView)

Instance Method

parentView.layout.centerVertically(childView)

Chaining Context

parentView.layout(childView).centerVertically()