GridLayout

• This is a custom UIView object that is organizing views inside of it horizontally or vertically.

• Framework: UIKit
• Minimum iOS Version: v12

Syntax:

• Use the cell type structure to put views inside a Grid when initializing it.
• The only way to initialize a Grid is to use either "Grid.vertical" or "Grid.horizontal" methods.
• Cell type structure is taking paramaters by using GridBuilder which is an implementation of resultBuilder attribute.
• You can use the included UIView extension to create cells by using your UIView objects.
• Example:

Grid.vertical {

    constantSizedUIView
        .constant(50)

    autoSizedUILabel
        .auto()

    expandedSizedUIView
        .expanded()
}

• Check the simulated examples written in code editor below of this page.

Cell Types:

• Auto -> Automatically resizes the area that is including views.
• Note: If you want your custom UIView class objects to be able to be auto resized in the Grid then you must override "sizeThatFits" method and provide a size for your custom UIView class.
• Constant -> Sets the size of the area to the value that is provided. The value represents Width for the horizontal Grid and Height for the vertical Grid.
• Expanded -> Expands the view area to the remaining area from the Auto and Constant cells, propotional to the total defined Expanded cell values. The default Expanded cell value is 1 when it's not provided.

Example: When you have views that have Expanded cell types, then their size proportions are going to be calculated using this formula:
ViewSize = ViewExpandedValue / TotalExpandedValue
So this means that if you have 2 views that have Expanded cell type and value of the first one is 1 and the value of the second one is 2 then their sizes are going to be proportional to this value:
OwnerGridsSize - (TotalAutoCalculatedSizes + TotalConstantSizes)
And the proportions are going to be 1/3 and 2/3.

Cell Type Parameters and Parameter Setter Functions

• value -> (CGSize type) (Not available for Auto cell) Sets the cell height or width depending on the Grid type.
• maxLength (setter function) -> (CGSize type) (Only available for Auto cell) Sets the maximum length for the view in the same direction of parent grid orientation.
• minLength (setter function) -> (CGSize type) (Only available for Auto cell) Sets the minimum length for the view in the same direction of parent grid orientation.
• horizontalAlignment (setter function) -> (enum type) Align the view horizontally in it's allocated space.
• verticalAlignment (setter function) -> (enum type) Align the view vertically in it's allocated space.
• margin (setter function) -> (UIEdgeInset type) Set the margin values for the edges of the view to the edges of the allocated area.

Note: If the cell type is Auto then the allocated area expands based on the margin values.
As an example, view height is calculated as 100 and margin top is 10 then the allocated area for the view will be 110.

Example setter function usage:

myLabel
    .auto()
    .maxLength(100)
    .minLength(50)
    .horizontalAlignment(.autoRight)
    .verticalAlignment(.autoTop)
    .margin(UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10))

Code examples:

Image-Title-Body Example:

Loop Example: Checkers View: