User Manual

Layout Groups

The Layout Group Component is used to automatically set the position and size of child Elements. A Layout Group Component can be used to align child elements into vertical or horizontal columns or a grid. A Layout Group Component applies the layout rules to all it's direct children, you can override the Layout Group rules on a single child using a Layout Child Component.

The Layout Group Component can be used to generate common layouts, for example, a grid, a fixed width vertical column, or horizontal row.

Creating a Layout Group

Add a Layout Group by adding the LayoutGroup Component to an existing Element Entity.

Create Layout Group

Layout Group Properties

Orientation

Set the Orientation to Horizontal to organize your layout from left-to-right or right-to-left. Or Vertical to organize your layout top-to-bottom or bottom-to-top

Reverse

ReverseX and ReverseY properties are used to set the direction the layout group is built out in. The default is left-to-right and bottom-to-top.

Alignment

Alignment is used to align the child elements to the edges of the Layout Group. [0,0] aligns to the bottom left, [1,1] aligns to the top right.

Padding

Padding adds a space to the inside of the Layout Group before positioning any children.

Spacing

Spacing determines the gap between each child.

Fitting

The Width Fitting and Height Fitting properties determine how a child element's width or height will be adjusted by the Layout Group.

A value of None will apply no fitting.

A value of Stretch will stretch the children to fill the width or height of the container using the following procedure:

A value of Shrink will shrink the children to fit the container using the following procedure:

A value of Both will apply both Stretch and Shrink.

Wrap

The wrap property causes children that are outside of the width (for vertical groups) or height (for horizontal groups) to be moved to a new row or column. Using the wrap property you can create grid-based layouts.

Layout Children

A Layout Group applies it's rules to all of it's direct children. If you want to override these rules for a specific child you can do that by adding a LayoutChild Component to that child.

Layout Child

In this example, the horizontal layout is using the Stretch width fitting to stretch each button to fit evenly into the container. The center button has a Layout Child Component with a maxWidth value set to 64, so it will not be stretched.

Layout Child Setup

Example Layouts

Vertical Leaderboard

Leaderboard

This Leaderboard is setup as vertical column aligned to the top center. We're using the Width Fitting property to stretch each item to be the full width. And using the Padding and Spacing properties to leave clear gaps between the cells.

Leaderboard Setup

Horizontal Buttons

Horizontal Buttons

This row of buttons is laid out using a Horizontal Layout Group with some Spacing and Padding settings to make the buttons fit the correct width. No width or height fitting is used.

Horizontal Setup

Grid

Grid

This row of buttons is laid out using a Layout Group with the Wrap setting enabled to set up a grid. The Group Element the Layout Group is attached to is set to the correct width (button width + spacing) to force the wrap to generate a two column grid. The Horizontal layout means that the grid fills in rows not columns and the Alignment property is set to [0.5, 1] which means that any "loose" elements (a row with only one element) will be centered in the X axis.

Setup