Grid Layouts

Grid Layouts#

Grid layouts display multiple child elements in a table or grid.

Grids will automatically resize to contain all child elements if possible and each row and column will automatically resize to display the children as well.

A new grid can be created with the grid() function in the eg-overlay-ui module.

See also

See the example for uigrid for details on child alignment and row/column spanning.

Functions#

eg-overlay-ui.grid(rows, cols)#

Create a new uigrid

Return type:

uigrid

Version History

Version

Notes

0.3.0

Added

Classes#

class eg-overlay-ui.uigrid#

A grid layout container. Grid layout containers arrange their child elements into an aligned grid or table.

Grids must have a known number of columns and rows when they are created. This can not be changed after a grid is created.

Example#
local ui = require 'eg-overlay-ui'

local function txt(t)
    return ui.text(t, 0xFFFFFFFF, ui.fonts.regular)
end

-- a 3x3 grid
local grid = ui.grid(3, 3)

local a = txt('Top Left', )
local b = txt('Top Middle & Right')
local c = txt('Middle')
local d = txt('Bottom Left & Middle')
local e = txt('Bottom Right')

-- arrange elements in this pattern
--
-- +-------------+-----------------------+
-- | Top Left    |    Top Middle & Right |
-- +-------------+-----------------------+
-- |       Middle         |              |
-- +----------------------+ Bottom Right +
-- | Bottom Left & Middle |              |
-- +----------------------+--------------+

grid:attach(a, 1, 1, 1, 1, 'start' , 'start')  -- Top Left
grid:attach(b, 1, 2, 1, 2, 'end'   , 'start')  -- Top Middle & Right
grid:attach(c, 2, 1, 1, 2, 'middle', 'start')  -- Middle
grid:attach(d, 3, 1, 1, 2, 'middle', 'middle') -- Bottom Left & Middle
grid:attach(e, 2, 3, 2, 1, 'middle', 'middle') -- Bottom Right
attach(uielement, row, col, rowspan, colspan, halign, valign)#

Attach a UI element to this grid at the given row and col. If there was already an element at this location it will be removed first.

Normally the element will only occupy one cell. This can be changed by providing appropriate values for rowspan and colspan.

Element alignment is specified by halign and valign .

Parameters:

  • uielement – A UI element.

  • row (integer) – Row number. This must be between 1 and the number of rows specified in grid().

  • column (integer) – Column number. This must be between 1 and the number of columns specified in grid().

  • rowspan (integer) – The number of rows this element will span. This must be between 1 and the number of remaining rows in the grid.

  • colspan (integer) – The number of columns this element will span. This must be between 1 and the number of remaining columns remaining in the grid.

  • horizalign (string) – Horizontal alignment. 'start', 'middle', 'end', or 'fill'.

  • vertalign (string) – Vertical alignment. 'start', 'middle', 'end', or 'fill'.

Version History

Version

Notes

0.3.0

Added
detach(row, col)#

Remove the element located at row and col.

If no element was located in this position, this function will do nothing.

Version History

Version

Notes

0.3.0

Added
rowspacing([row, ]spacing)#

Set the spacing between row and the next row to spacing pixels.

If row is omitted, all rows will be set to use spacing.

Parameters:

Version History

Version

Notes

0.3.0

Added
colspacing([column, ]spacing)#

Set the spacing between column and the next column to spacing pixels.

If column is omitted, all columns will use spacing.

Parameters:

Version History

Version

Notes

0.3.0

Added

Note

The following methods are inherited from uielement

x([position])#

Set or get the current position X.

Parameters:

position (integer) – (Optional)

Return type:

integer

Important

It is normally not necessary to manually position an element.

Version History

Version

Notes

0.3.0

Added
y([position])#

Set or get the current position Y.

Parameters:

position (integer) – (Optional)

Return type:

integer

Important

It is normally not necessary to manually position an element.

Version History

Version

Notes

0.3.0

Added
width([value])#

Get or set the element’s width.

Parameters:

width (integer) – (Optional)

Return type:

integer

Important

It is normally not necessary to manually set an element’s size.

Version History

Version

Notes

0.3.0

Added
height([value])#

Get or set the element’s height.

Parameters:

width (integer) – (Optional)

Return type:

integer

Important

It is normally not necessary to manually set an element’s size.

Version History

Version

Notes

0.3.0

Added
bgcolor([color])#

Get or set the element’s background color.

Parameters:

color (integer) – (Optional)

Return type:

integer

Version History

Version

Notes

0.3.0

Added
Contents