Layout Components
Layout components define the arrangement of your game’s interface. The UI system features four layout components to organize your elements: LayoutColumn, LayoutRow, LayoutGrid, and LayoutCell. You can also nest layout components.
Section topics
| Topic | Description |
|---|---|
| UI Layout Column | Add the LayoutColumn component to an element to make it a layout column. When you add child elements to the layout column, the layout column assigns each child element a layout cell. The layout column adjusts the size of the layout cells depending on how many child elements you add as well as the values provided by the child elements’ layout cells. |
| UI Layout Row | Add the LayoutRow component to an element to make it a layout row. Like the layout column, the layout row assigns each child elements a layout cell. The layout row adjusts the size of the layout cells depending on how many child elements you add and the values provided by the child elements’ layout cells. |
| UI Layout Grid | Add the LayoutGrid component to an element to make it a layout grid. The layout grid places child elements into a grid. Unlike the layout row and layout column, however, the layout grid does not use layout cells. The LayoutGrid component’s properties determine the size of its children. |
| UI Layout Cell | Add the LayoutCell component to a layout row or layout column’s children to customize how a layout cell’s size is determined. A layout cell is a programmatic concept whose properties define the area of a child element. Anytime that you add a child element to a layout row or layout column, that child element receives layout cell properties (not visible in the UI Editor), which determine the size of the child’s space. You can override the layout cell’s calculated properties by adding the LayoutCell component to the child. |
| UI Layout Fitter | Add the LayoutFitter component to an element to make the element resize itself to fit its content. Use the layout fitter component with other components that provide cell sizing information, such as text, image (with ImageType set to Fixed), or layout components (cell, row, column, grid). |
| UI Dynamic Layout | With the Dynamic Layout component, you can change the number of children of layout elements at runtime. |
| Nesting layout components | Learn how to nest layout components. |
UI Layout Column
Use a layout column component in the Open 3D Engine UI Editor to organize child elements into a column.
UI Layout Row
Use a layout row component in the Open 3D Engine UI Editor to organize child elements into a row.
UI Layout Grid
Use a layout grid component in the Open 3D Engine UI Editor to organize child elements into a uniform grid.
UI Layout Cell
Add a layout cell component to a child of the layout row or column in the Open 3D Engine UI Editor to specify the child’s minimum size, target size, or extra ratio size.
UI Layout Fitter
Add a layout fitter component to an element in the Open 3D Engine UI Editor to make the element fit its content.
UI Dynamic Layout
Use the Dynamic Layout component together with the layout components to display dynamic content in a game UI in Open 3D Engine (O3DE). Code example on how to populate the dynamic content when it is attached to a dropdown.
Nesting Layout Components
Nest layout components within other layout components in the Open 3D Engine UI Editor.