GridLayout

GridLayout is a container that implements the ViewsContainer interface. To create it, use the function

func NewGridLayout(session Session, params Params) GridLayout

The container space of this container is split into cells in the form of a table.All children are located in the cells of the table. A cell is addressed by row and column number.Row and column numbers start at 0.

"column" and "row" properties

The location of the View inside the GridLayout is determined using the "column" and "row" properties.These properties must be set for each of the child Views.Child View can span multiple cells within the GridLayout and they can overlap.

The values "column" and "row" can be set by:

• an integer greater than or equal to 0;
• textual representation of an integer greater than or equal to 0 or a constant;
• a Range structure specifying a range of rows / columns:

type Range struct {
	First, Last int
}

where First is the number of the first column / row, Last is the number of the last column / row;

• a line of the form "< number of the first column / row >: < number of the last column / row >",which is a textual representation of the Range structure

Example

grid := rui.NewGridLayout(session, rui.Params {
	rui.Content : []View{
		NewView(session, rui.Params {
			rui.ID     : "view1",
			rui.Row    : 0,
			rui.Column : rui.Range{ First: 1, Last: 2 },
		}),
		NewView(session, rui.Params {
			rui.ID     : "view2",
			rui.Row    : "0:2",
			rui.Column : "0",
		}),
	},
})

In this example, view1 occupies columns 1 and 2 in row 0, and view1 occupies rows 0, 1, and 2 in column 0.

"grid-auto-flow"

If the "row" and "column" properties are not set for child Views, then the automatic View placement algorithm is used.There are four variants of this algorithm. The variant to use is specified using the "grid-auto-flow" int property.The "grid-auto-flow" property can take the following values:

• RowAutoFlow (0) (text name "row") - Views are placed by filling each row in turn, adding new columns as necessary;
• ColumnAutoFlow (1) (text name "column") - Views are placed by filling each column in turn, adding new columns as necessary;
• RowDenseAutoFlow (2) (text name "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.
• ColumnDenseAutoFlow (3) (text name "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.

"cell-width" and "cell-height" properties

By default, the sizes of the cells are calculated based on the sizes of the child Views placed in them.The "cell-width" and "cell-height" properties (CellWidth and CellHeight constants) allow you to seta fixed width and height of cells regardless of the size of the child elements.These properties are of type []SizeUnit. Each element in the array determines the size of the corresponding column or row.

These properties can be assigned the following data types:

• SizeUnit or textual representation of SizeUnit (or SizeUnit constant). In this case, the corresponding dimensions of all cells are set to the same;
• [] SizeUnit;
• string containing textual representations of SizeUnit (or SizeUnit constants) separated by commas;
• [] string. Each element must be a textual representation of a SizeUnit (or a SizeUnit constant)
• [] interface {}. Each element must either be of type SizeUnit or be a textual representation of SizeUnit (or a SizeUnit constant)

If the number of elements in the "cell-width" and "cell-height" properties is less than the number of columns and rows used, then the missing elements are set to Auto.

The values of the "cell-width" and "cell-height" properties can use the SizeUnit type SizeInFraction.This type means 1 part. The part is calculated as follows: the size of all cellsthat 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.

"grid-row-gap" and "grid-column-gap" properties

The "grid-row-gap" and "grid-column-gap" SizeUnit properties (GridRowGap and GridColumnGap constants)allow you to set the distance between the rows and columns of the container, respectively. The default is 0px.

"cell-vertical-align" property

The "cell-vertical-align" property (constant CellVerticalAlign) of type int sets the vertical alignment of children within the cell they are occupying. Valid values:

The default value is StretchAlign (3)

"cell-horizontal-align" property

The "cell-horizontal-align" property (constant CellHorizontalAlign) of type int sets the horizontal alignment of children within the occupied cell. Valid values:

The default value is StretchAlign (3)