Created by Robert Burdick, last modified by Michael Allen on Jul 05, 2017
Table of Contents
Extends: Group
Description
The LayoutGroup node class manages the position of its child nodes by arranging them in a row from left to right (horizontal layout), or in a column from top to bottom (vertical layout). Fields provide options to control the spacing between children, the horizontal and vertical alignment, and the margins around the edges of the group.
Fields
| Field | Type | Default | Use |
|---|
| layoutDirection | string | "vert" | Controls the layout direction. | Value | Use |
|---|
| horiz | Positions the children in a row from left to right | | vert | Positions the children in a column from top to bottom |
|
| horizAlignment | string | "left" | Specifies the alignment point in the horizontal direction. The effect of the value set depends on the whether the layoutDirection field value is set to either horiz or vert. | Value | layoutDirection | Use |
|---|
| left | vert | Aligns the left edges of each child in the column, and sets the LayoutGroup node local x-coordinate origin at the left edge of the children | | horiz | Sets the LayoutGroup node local x-coordinate origin at the left edge of the first child | | center | vert | Aligns the centers of each child in the column, and sets the LayoutGroup node local x-coordinate origin at the center alignment point | | horiz | Sets the LayoutGroup node local x-coordinate origin at the center of the horizontal row of children | | right | vert | Aligns the right edges of each child in the column, and sets the LayoutGroup node local x-coordinate origin is at the right edge of the children | | horiz | Sets the LayoutGroup node local x-coordinate origin at the right edge of the last child | | custom | vert | Explicitly set the x translation of each child of the LayoutGroup. If the layoutDirection is "horiz", custom will not be a valid setting. Instead, "left" will be used to do the child layout. Available since firmware version 7.5 |
|
| vertAlignment | string | "top" | Specifies the alignment point in the vertical direction. The effect of the value set depends on the whether the layoutDirection field value is set to either horiz or vert. | Value | layoutDirection | Use |
|---|
| top | horiz | Aligns the top edges of each child in the row, and sets the LayoutGroup node local y-coordinate origin at the top edge of the children | | vert | Sets the LayoutGroup node local y-coordinate origin at the top edge of the first child | | center | horiz | Aligns the centers of each child in the row, and sets the LayoutGroup node local y-coordinate origin at the center alignment point | | vert | Sets the LayoutGroup node local y-coordinate origin at the center of the vertical column of children | | bottom | horiz | Aligns the bottom edges of each child in the row, and sets the LayoutGroup node local y-coordinate origin at the bottom edge of the children | | vert | Sets the LayoutGroup node local y-coordinate origin at the bottom edge of the last child | | custom | horiz | Explicitly set the y translation of each child of the LayoutGroup. If the layoutDirection is "vert", custom will not be a valid setting. Instead, "top" will be used to do the child layout. Available since firmware version 7.5 |
|
| itemSpacings | array of floats | [ ] | Controls the spacing before or after each child in the layout direction. By default, no space is added between the children. If the field value array is set with a single value, and the addItemSpacingAfterChild field value is set to true, that amount of space is inserted after each child is positioned. If the addItemSpacingAfterChild field value is set to false, the space is inserted before each child is positioned. If the field value array has more than one value, the first value specifies the spacing before or after the first item, the second value specifies the spacing before or after the second item, and so on. If there are fewer values in the field value array than needed, the final value is repeated as needed. If there are more values in the field value array than needed, the extra values are ignored. |
| addItemSpacingAfterChild | Boolean | true | Controls how the spaces specified in the itemSpacings field are inserted. By default, the field value is set to true. This causes the specified spaces to be inserted after the child is positioned. If the field value is set to false, the specified item space is inserted before the child is positioned. |