GridLayout

Table of contents

A container that designed to arrange its child elements in a grid-like structure, similar to a table but has a wide amount of properties to control its behavior

Create from source

func NewGridLayout(session Session, params Params) GridLayout

Create new grid layout object and returns its interface

Create from resource

GridLayout {
    id = gridLayout,
    width = 100%,
    height = 100%,
    content = [],
}

Interface description

Inherit methods, properties and events from ViewsContainer

UpdateGridContent()

Updates child views if the "content" property value is set to GridAdapter, otherwise does nothing

Properties

"Order"

Used in child views to specify visual order of the view inside the GridLayout. Items in a container are sorted by ascending order value and then by their addition to the container order

Constant: Order

Types: int, string

Values

int string Description
< 0 < "0" Views with lower value will be at the beginning
>= 0 >= "0" Views with higher value will be at the end

"cell-height"

Set a fixed height of GridLayout cells regardless of the size of the child elements. Each element in the array determines the size of the corresponding row. By default, the sizes of the cells are calculated based on the sizes of the child views placed in them

Constant: CellHeight

Types: SizeUnit, []SizeUnit, SizeFunc, string, []string, []any containing elements of string or SizeUnit

Internal type is either SizeUnit or []SizeUnit, other types converted to it during assignment

Conversion rules

SizeUnit, SizeFunc - stored as is and all cells are set to have the same height

[]SizeUnit - stored as is and each row of the grid layout has height which is specified in an array

string - containing textual representations of SizeUnit (or SizeUnit constants), may contain several values separated by comma(,). Each row of the grid layout has height which is specified in an array

[]string - each element must be a textual representation of a SizeUnit (or a SizeUnit constant). Each row of the grid layout has height which is specified in an array

If the number of elements in an array is less than the number of rows used, then the missing elements are set to have Auto size

The values can use SizeUnit type SizeInFraction. This type means 1 part. The part is calculated as follows: the size of all cells that are not of type SizeInFraction is subtracted from the size of the container, and then the remaining size is divided by the number of parts. The SizeUnit value of type SizeInFraction can be either integer or fractional

Examples

GridLayout {
    cell-height = [
        5em,
        2em,
    ],
    content = [
        TextView {
            row=0,
            column=0,
            text = "Cell 1",
        }
        TextView {
            row=0,
            column=1,
            text = "Cell 2",
        }
        TextView {
            row=1,
            column=0,
            text = "Cell 3",
        }
        TextView {
            row=1,
            column=1,
            text = "Cell 4",
        }
    ],
}

grid := rui.NewGridLayout(session, rui.Params{
    rui.CellHeight: []rui.SizeUnit{
        rui.Em(5),
        rui.Em(2),
    },
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Row:    0,
            rui.Column: 0,
            rui.Text:   "Cell 1",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    0,
            rui.Column: 1,
            rui.Text:   "Cell 2",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    1,
            rui.Column: 0,
            rui.Text:   "Cell 3",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    1,
            rui.Column: 1,
            rui.Text:   "Cell 4",
        }),
    },
})

"cell-horizontal-align"

Sets the default horizontal alignment of GridLayout children within the occupied cell

Constant: CellHorizontalAlign

Types: int, string

Values

int string Description
0(LeftAlign) "left" Left alignment
1(RightAlign) "right" Right alignment
2(CenterAlign) "center" Center alignment
3(StretchAlign) "stretch" Full width stretch

"cell-horizontal-self-align"

Sets the horizontal alignment of GridLayout children within the occupied cell. The property is set for the child view of GridLayout

Constant: CellHorizontalSelfAlign

Types: int, string

Values

int string Description
0(LeftAlign) "left" Left alignment
1(RightAlign) "right" Right alignment
2(CenterAlign) "center" Center alignment
3(StretchAlign) "stretch" Full width stretch

"cell-vertical-align"

Sets the default vertical alignment of GridLayout children within the cell they are occupying

Constant: CellVerticalAlign

Types: int, string

Values

int string Description
0(TopAlign) "top" Top alignment
1(BottomAlign) "bottom" Bottom alignment
2(CenterAlign) "center" Center alignment
3(StretchAlign) "stretch" Full height stretch

"cell-vertical-self-align"

Sets the vertical alignment of GridLayout children within the cell they are occupying. The property is set for the child view of GridLayout

Constant: CellVerticalSelfAlign

Types: int, string

Values

int string Description
0(TopAlign) "top" Top alignment
1(BottomAlign) "bottom" Bottom alignment
2(CenterAlign) "center" Center alignment
3(StretchAlign) "stretch" Full height stretch

"cell-width"

Set a fixed width of GridLayout cells regardless of the size of the child elements. Each element in the array determines the size of the corresponding column. By default, the sizes of the cells are calculated based on the sizes of the child views placed in them

Constant: CellWidth

Types: SizeUnit, []SizeUnit, SizeFunc, string, []string, []any containing elements of string or SizeUnit

Internal type is either SizeUnit or []SizeUnit, other types converted to it during assignment

Conversion rules

SizeUnit, SizeFunc - stored as is and all cells are set to have the same width

[]SizeUnit - stored as is and each column of the grid layout has width which is specified in an array

string - containing textual representations of SizeUnit (or SizeUnit constants), may contain several values separated by comma(,). Each column of the grid layout has width which is specified in an array

[]string - each element must be a textual representation of a SizeUnit (or a SizeUnit constant). Each column of the grid layout has width which is specified in an array

If the number of elements in an array is less than the number of columns used, then the missing elements are set to have Auto size

The values can use SizeUnit type SizeInFraction. This type means 1 part. The part is calculated as follows: the size of all cells that are not of type SizeInFraction is subtracted from the size of the container, and then the remaining size is divided by the number of parts. The SizeUnit value of type SizeInFraction can be either integer or fractional

Examples

GridLayout {
    cell-width = [
        10em,
        5em,
    ],
    content = [
        TextView {
            row=0,
            column=0,
            text = "Cell 1",
        }
        TextView {
            row=0,
            column=1,
            text = "Cell 2",
        }
        TextView {
            row=1,
            column=0,
            text = "Cell 3",
        }
        TextView {
            row=1,
            column=1,
            text = "Cell 4",
        }
    ],
}

grid := rui.NewGridLayout(session, rui.Params{
    rui.CellWidth: []rui.SizeUnit{
        rui.Em(10),
        rui.Em(5),
    },
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Row:    0,
            rui.Column: 0,
            rui.Text:   "Cell 1",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    0,
            rui.Column: 1,
            rui.Text:   "Cell 2",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    1,
            rui.Column: 0,
            rui.Text:   "Cell 3",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    1,
            rui.Column: 1,
            rui.Text:   "Cell 4",
        }),
    },
})

"content"

Defines an array of child views or can be an implementation of GridAdapter interface

Constant: Content

Types: []View, GridAdapter, View, string, []string

Internal type is either []View or GridAdapter, other types converted to []View during assignment

Conversion rules

View - view which describe one cell, converted to []View

[]View - describe several cells, stored as is

string - text representation of the view which describe one cell, converted to []View

[]string - an array of text representation of the views which describe several cells, converted to []View

GridAdapter - interface which describe several cells, see GridAdapter description for more details

Examples

GridLayout {
    width = 10em,
    height = 10em,
    content = [
        "Cell 1",
        "Cell 2",
        "Cell 3",
        "Cell 4",
    ],
}

grid := rui.NewGridLayout(session, rui.Params{
    rui.Width:  rui.Em(10),
    rui.Height: rui.Em(10),
    rui.Content: []string{
        "Cell 1",
        "Cell 2",
        "Cell 3",
        "Cell 4",
    },
})

"gap"

Specify both "grid-column-gap" and "grid-row-gap"

Constant: Gap

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    gap = 1em,
    content = [
        TextView {
            row=0,
            column=0,
            text = "Cell 1",
        }
        TextView {
            row=0,
            column=1,
            text = "Cell 2",
        }
        TextView {
            row=1,
            column=0,
            text = "Cell 3",
        }
        TextView {
            row=1,
            column=1,
            text = "Cell 4",
        }
    ],
}

grid := rui.NewGridLayout(session, rui.Params{
    rui.Gap: rui.Em(1),
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Row:    0,
            rui.Column: 0,
            rui.Text:   "Cell 1",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    0,
            rui.Column: 1,
            rui.Text:   "Cell 2",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    1,
            rui.Column: 0,
            rui.Text:   "Cell 3",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    1,
            rui.Column: 1,
            rui.Text:   "Cell 4",
        }),
    },
})

"grid-auto-flow"

Controls how to place child controls if Row and Column properties were not set for children views

Constant: GridAutoFlow

Types: int, string

Values

int string Description
0(RowAutoFlow) "row" Views are placed by filling each row in turn, adding new rows as necessary
1(ColumnAutoFlow) "column" Views are placed by filling each column in turn, adding new columns as necessary
2(RowDenseAutoFlow) "row-dense" Views are placed by filling each row, adding new rows as necessary. "dense" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause views to appear out-of-order, when doing so would fill in holes left by larger views
3(ColumnDenseAutoFlow) "column-dense" Views are placed by filling each column, adding new columns as necessary. "dense" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause views to appear out-of-order, when doing so would fill in holes left by larger views

"grid-column-gap"

Space between columns

Constant: GridColumnGap

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

GridLayout {
    grid-column-gap = 1em,
    content = [
        TextView {
            row=0,
            column=0,
            text = "Cell 1",
        }
        TextView {
            row=0,
            column=1,
            text = "Cell 2",
        }
        TextView {
            row=1,
            column=0,
            text = "Cell 3",
        }
        TextView {
            row=1,
            column=1,
            text = "Cell 4",
        }
    ],
}

grid := rui.NewGridLayout(session, rui.Params{
    rui.GridColumnGap: rui.Em(1),
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Row:    0,
            rui.Column: 0,
            rui.Text:   "Cell 1",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    0,
            rui.Column: 1,
            rui.Text:   "Cell 2",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    1,
            rui.Column: 0,
            rui.Text:   "Cell 3",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    1,
            rui.Column: 1,
            rui.Text:   "Cell 4",
        }),
    },
})

"grid-row-gap"

Space between rows

Constant: GridRowGap

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    grid-row-gap = 1em,
    content = [
        TextView {
            row=0,
            column=0,
            text = "Cell 1",
        }
        TextView {
            row=0,
            column=1,
            text = "Cell 2",
        }
        TextView {
            row=1,
            column=0,
            text = "Cell 3",
        }
        TextView {
            row=1,
            column=1,
            text = "Cell 4",
        }
    ],
}

grid := rui.NewGridLayout(session, rui.Params{
    rui.GridRowGap: rui.Em(1),
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Row:    0,
            rui.Column: 0,
            rui.Text:   "Cell 1",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    0,
            rui.Column: 1,
            rui.Text:   "Cell 2",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    1,
            rui.Column: 0,
            rui.Text:   "Cell 3",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    1,
            rui.Column: 1,
            rui.Text:   "Cell 4",
        }),
    },
})

func GetCellHeight(view View, subviewID ...string) []SizeUnit

Returns the height of a GridLayout cell. If the result is an empty array, then the height is not set. If the result is a single value array, then the height of all cell is equal. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned.

func GetCellHorizontalAlign(view View, subviewID ...string) int

Returns the vertical align of a GridLayout cell content: LeftAlign (0), RightAlign (1), CenterAlign (2), StretchAlign (3) If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned.

func GetCellVerticalAlign(view View, subviewID ...string) int

Returns the vertical align of a GridLayout cell content: TopAlign (0), BottomAlign (1), CenterAlign (2), StretchAlign (3) If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned.

func GetCellWidth(view View, subviewID ...string) []SizeUnit

Returns the width of a GridLayout cell. If the result is an empty array, then the width is not set. If the result is a single value array, then the width of all cell is equal. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned.

func GetGridAutoFlow(view View, subviewID ...string) int

Returns the value of the "grid-auto-flow" property If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned.

func GetGridColumnGap(view View, subviewID ...string) SizeUnit

Returns the gap between GridLayout columns. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned.

func GetGridRowGap(view View, subviewID ...string) SizeUnit

Returns the gap between GridLayout rows. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned.

func GridLayoutByID(rootView View, id string) GridLayout

Return a GridLayout with id equal to the argument of the function or nil if there is no such View or View is not GridLayout

func UpdateContent(view View, subviewID ...string)

Updates child Views of ListLayout or GridLayout subview if the "content" property value is set to ListAdapter or GridAdapter, otherwise does nothing. If the second argument (subviewID) is not specified or is an empty string then the first argument (view) updates

© Alxanosoft inc.