Grid

Grid is a UIView extension that provides a layout system based on columns and rows. Grid offers a flexible manner to arrange intricate layouts without needing to do any of the complicated mathematics. Since Grid uses perfectly calculated columns and rows, it is possible to maintain global alignment without any view coupling.

Grid is defined by the x and y axis of the containing view. Rows follow along the y or vertical axis, and columns follow along the x or horizontal axis. Grid manages views that are in the container.grid.views property Array. Once a view is added to the views Array, it is automatically added as a child view if it has not already been added. By only managing views in the view Array, the container may have other child views that are not affected by Grid's configuration. This allows for intricate layouts and layering in a flexible and organized manner.

Horizontal Axis

The horizontal axis direction is the default axis direction and is defined by the x axis of the containing view. When the container.grid.axis.direction is set to .horizontal, only the width of each view may be configured by its view.grid.columns property value.

Columns

To set the number of columns a view takes in proportion to its containing view, set the view.grid.columns property to a value that is less or equal to the container.grid.axis.columns property value. The default value for the container.grid.axis.columns property and the view.grid.columns property is 12.

let container = View()
container.shapePreset = .square
container.grid.interimSpacePreset = .interimSpace3

view.layout(container).top(100).left(20).right(20)

for _ in 0..<12 {
    let v = View()
    v.grid.columns = 1
    v.backgroundColor = Color.blue.base
    container.grid.views.append(v)
}

Vertical Axis

The vertical axis direction is defined by the y axis of the containing view. When the container.grid.axis.direction is set to .vertical, only the height of each view may be configured by its view.grid.rows property value.

Rows

To set the number of rows a view takes in proportion to its containing view, set the view.grid.rows property to a value that is less or equal to the container.grid.axis.rows property value. The default value for the container.grid.axis.rows property and the view.grid.rows property is 12.

let container = View()
container.shapePreset = .square
container.grid.axis.direction = .vertical
container.grid.interimSpacePreset = .interimSpace3

view.layout(container).top(100).left(20).right(20)

for _ in 0..<12 {
    let v = View()
    v.grid.rows = 1
    v.backgroundColor = Color.blue.base
    container.grid.views.append(v)
}

Any Axis

The any axis direction is defined by the x and y axis of the containing view. When the container.grid.axis.direction is set to .any, both the width and height of each view may be configured by its view.grid.columns, view.grid.rows property values, respectively.

Offsets

Offsets are used to shift a view a number of rows or columns without increasing the height or width, respectively. Use the view.grid.offset.rows property to shift a view vertically, and use the view.grid.offset.columns property to shift a view horizontally.

let container = View()
container.shapePreset = .square
container.grid.axis.direction = .any
container.grid.axis.rows = 2
container.grid.axis.columns = 2
container.grid.interimSpacePreset = .interimSpace3

view.layout(container).top(100).left(20).right(20)

let v1 = View()
v1.grid.rows = 1
v1.grid.columns = 1
v1.backgroundColor = Color.blue.base

container.grid.views.append(v1)

let v2 = View()
v2.grid.rows = 1
v2.grid.offset.rows = 1
v2.grid.columns = 1
v2.grid.offset.columns = 1
v2.backgroundColor = Color.blue.base

container.grid.views.append(v2)

Layout & Spacing

To adjust the size of the area that Grid uses to calculate its layout, use the grid.layoutEdgeInsets, grid.contentEdgeInsets, and grid.interimSpace property values.

LayoutEdgeInsets & ContentEdgeInsets

Both grid.layoutEdgeInsets and grid.contentEdgeInsets property values are of type EdgeInsets, which allows you to specify a top, left, bottom, and right value that decreases or increases the available area used to calculate layouts. Two separate insets are available in order to provide extra flexibility when creating intricate components. For example, ToolbarController utilizes the grid.layoutEdgeInsets property to adjust for the statusBar, and the grid.contentEdgeInsets property is used to provide the padding control that the developer uses to fine tune the layout.

Preset properties are available that simplify management of both grid.layoutEdgeInsets and grid.contentEdgeInsets. The preset properties are grid.layoutEdgeInsetsPreset and grid.contentEdgeInsetsPreset, respectively.

Interim Space

The grid.interimSpace property is used to define the spacing in between views and is of type InterimSpace. A preset property is available to simplify the management of grid.interimSpace. The preset property is grid.interimSpacePreset.

Reloading

Grid reloads its layout anytime a value is adjusted, though, sometimes a manual reload is necessary. To reload Grid's layout manually, use the grid.reload function.

Deferred

When grid.deferred is set to true, grid calculations are avoided. It is good practice to set this value to true when adjusting many grid properties and then set it back to false for all pending calculations to take place.