Component:HorizontalLayout

Component image 

HorizontalLayout component as seen in the Scene Inspector

Introduction

The HorizontalLayout component is used to layout child UIX element slots in a row, left to right.

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 vertically, use the VerticalLayout 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 HorizontalLayout component places its child layout elements next to each other, side by side. Their widths are determined by their respective minimum, preferred, and flexible widths according to the following model:

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

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

Examples

Videos

ProbablePrime's tutorial video on the Horizontal Layout:

Load video

YouTube

YouTube might collect personal data. Privacy Policy

ContinueDismiss