Component:VerticalLayout

From Resonite Wiki
Revision as of 23:43, 28 July 2024 by AmasterAmaster (talk | contribs) (Added a video.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Component image 
VerticalLayout component as seen in the Scene Inspector


The VerticalLayout component is used to layout child UIX element slots in a column, top to bottom.

The order of the objects depends on each child's OrderOffset property. Normally these are 0, but if you change it, the children will be ordered by increasing OrderOffset, with children of equal OrderOffset being ordered by the time they were added to that parent slot.

If you want to layout the UIX elements horizontally, use the HorizontalLayout component instead.
Fields
Name Type Description
persistent Bool Determines whether or not this item will be saved to the server.
UpdateOrder Int Controls the order in which this component is updated.
Enabled Bool Controls whether or not this component is enabled.
PaddingTop Float The padding to add, in pixels, at the top of the entire layout.
PaddingRight Float The padding to add, in pixels, at the right of the entire layout.
PaddingBottom Float The padding to add, in pixels, at the bottom of the entire layout.
PaddingLeft Float The padding to add, in pixels, at the left of the entire layout.
Spacing Float The padding to add, in pixels, between each object.
HorizontalAlign LayoutHorizontalAlignment The horizontal alignment to use for the child objects in the layout.
VerticalAlign LayoutVerticalAlignment The vertical alignment to use for the child objects in the layout.
ForceExpandWidth Bool Whether to force the children to expand to fill the available horizontal space.
ForceExpandHeight Bool Whether to force the children to expand to fill the available vertical space.

Usage

The VerticalLayout component places its child layout elements on top of each other. Their heights are determined by their respective minimum, preferred, and flexible heights according to the following model:

  1. The minimum heights of all the child layout elements are added together and the spacing between them plus the top and bottom padding is added as well. The result is the minimum height of the VerticalLayout.
  2. The preferred heights of all the child layout elements are added together and the spacing between them plus the top and bottom padding is added as well. The result is the preferred height of the VerticalLayout.
  3. If the VerticalLayout is at its minimum height or smaller, all the child layout elements will also have their minimum height.
  4. The closer the VerticalLayout is to its preferred height, the closer each child layout element will also get to their preferred height.
  5. If the VerticalLayout is taller than its preferred height, it will distribute the extra available space proportionally to the child layout elements according to their respective flexible heights.

For minimum, preferred, and flexible heights of child slots, use LayoutElement.

Padding and spacing

Examples

This example shows a VerticalLayout with two children. Each child is just an Image, with the first child being red and the second being green. Note that since Images have no minimum or preferred size, the VerticalLayout's ForceExpandWidth and ForceExpandHeight properties must be set, otherwise the children will simply have a width or height of zero. The VerticalLayout is as big as its parent allows.

VerticalLayout in the inspector:

The first child in the inspector:

The result:

If we add LayoutElements to each child, we can affect the sizes. Here, we add a LayoutElement to the first child, setting its FlexibleHeight to 2, and also to the second child, setting its FlexibleHeight to 1:

The result shows that the child heights are proportional, 2 to 1:

By specifying a preferred width for each child and turning off ForceExpandWidth on the VerticalLayout, we can have each child stick to its preferred width. Here, we set the first child's preferred width to 100 and the second child's preferred width to 50:

Videos

ProbablePrime's tutorial video on the Vertical Layout:

Related Components