Layouts

General

padding = "LEFT_VALUE RIGHT_VALUE TOP_VALUE BOTTOM_VALUE"

childAlignment = "UpperLeft"

alignment = "UpperLeft"

spacing = "number"

cellSize = "WIDTH HEIGHT"

columnWidths = "WIDTH_COL_1 WIDTH_COL_2 WIDTH_COL_3 WIDTH_COL_4 etc."

Panel

<Panel> <Element> Element content </Element> </Panel>

Layout Ingame

Horizontal Layout

<HorizontalLayout> <Element> Element content </Element> </HorizontalLayout>

Layout Ingame

Vertical Layout

<VerticalLayout> <Element> Element content </Element> </VerticalLayout>

Layout Ingame

Grid Layout

<VerticalLayout> <Element> Element content </Element> </VerticalLayout>

Layout Ingame

Table Layout

<TableLayout> <Row> <Cell><Element> Element content </Element></Cell> <Cell><Element> Element content </Element></Cell> </Row> </TableLayout>

Layout Ingame

Scroll Views

<VerticalScrollView> <Element> Element content </Element> </VerticalScrollView> <HorizontalScrollView> <Element> Element content </Element> </HorizontalScrollView>

Vertical Horizontal

Things to keep in mind

Layout elements are used to group other elements in a specific manner. Besides their differences, they share a lot of attributes to define specific characteristics like padding, spacing, cell sizes and more. We will now dive deeper into the most useful attributes:Padding defines the distance between the content of an element and its border. It is useful for aesthetic purposes. It can be specified via:Padding can be used by all layout elements.Alignment is an attribute used to define how a child element with a smaller size than the parent element should be positioned inside the parent element. 6 values are possible, which are a combination of one descriptor for the vertical orientation (Upper, Middle, Lower) and one for the horizontal orientation (Left, Center, Right).Example:Note: Text elements also use alignment to organize their text display. In this case, the alignment would be set the following way:All layout elements except the panel use alignment.Spacing tells the parent element how much space should be between individual child elements. It is useful for aesthetic purposes. It can be specified via:All layout elements except the panel use spacing. Thereby the table layout uses the attributeto define the spacing between its cells.Cell dimensions are used by the table layout and the grid layout to organize their space into a grid of even subspaces (cells).Both layout types are know attributes to size their cells.The grid layout uses the attribute cellSize with can be specified via:The table layout uses the attribute columnWidths to define the width of the cells. The height of a row is dependent on the highest child inside said row. It can be defined the following:This attribute can also use "auto-size" to automatically determine the needed width for the respective column.The panel is an empty window which can be used to contain child elements. It's the most basic layouting element and does not order its child elements. All child elements are stacked in the middle of the panel. If the attributewas set, the panel behaves like a "layout-group", which seems to be very similar to a horizontal layout.It can be defined via:The horizontal layout orders its child elements horizontally.It can be defined via:The vertical layout orders its child elements vertically.It can be defined via:The grid layout orders its child elements in a chess board - like grid. Thereby, the space each child element can occupy can be limited via the cellSize attribute. The grid layout will start to fill up its cells horizontally, then, when no space for further cells is left horizontally, if will start a new row below the first one.It can be definedvia:The table layout is most sophisticated layout currently available. It uses row and cell elements to order its child elements. Each row and each cell can thereby be altered by defaults and attributes, making the table layout the most versatile layout to order elements.It can be defined via:Scroll view are useful to fit content into other layout elements which has either a larger height, width or both as the parent element without cropping or wrapping of the elements content.They can be defined via:Despite their main use as layout elements, they can also serve as input elements, meaning they can trigger lua functions upon change.The layout elements will currently resize their child elements to fit their boundaries. That, unfortunately, renders them unfit for nesting. That is especially obvious when using horizontal or vertical layouts. Theyignore the set dimensions of their child elements. That means that they have set to exactely fitting dimensions to get what you want. Example: Imagine you want a list of 10 buttons, which each button beeing 30x30. If you want to group them with a vertical layout, its size has to be 30 x 10 + left_padding + right_padding X 30 x 10 + top_padding + bottom_padding + spacing. Because it can be a chore to keep track of this in complex layouts, i recommand to avoid at layout groups to build up complex UIs if they are not build up and maintained by Lua script if you are trying to build more complex interfaces. Instead use Panels to set up the window, because they do not show this strange behaviour.