Layouts

Layouts provide an automatic way to arrange items. There are various shapes and patterns available, with configurable settings for each. Layouts can be nested within each other, allowing for complex (and sometimes, mixed-shape) arrangements.

The layout system is calculated in a top-down manner, using relative sizes to arrange, resize, pad, and offset items (or child layouts). In both the Unity editor and at runtime, layouts are immediately responsive and reactive to size and settings changes. This is especially helpful in the Unity editor, allowing for precise layout adjustments at design-time.

Layout Overview

Nested Layouts

All layouts can contain child layouts of the same shape. A parent layout can contain a mix of items and child layouts. From the parent layout's perspective, the children are all the same (they all implement the same "layoutable" interface).

In some scenarios, a parent layout can support a child layout of a different shape. Each shape defines its own rules for fitting itself within a different parent shape. For example, when an arc-shaped item or layout is placed within a rectangular-shaped layout, the arc is treated as a full circle, sized to fit as large as possible, and centered within the rectangular space.

Shapes

For an item to become a layout element, it must have a "shape" component (for example, HoverShapeRect or HoverShapeArc) attached to it. The shape to be attached to the item will typically match the item renderer's shape type. With a "shape" component attached to the item, the layout will include the item (due to the shape's "layoutable" interface) when sizing and positioning its layout elements.

When creating a new item, a "shape" component is not attached by default. This is because the item itself, by default, is independent from the shape (and size, appearance, etc.) of its item renderer. The item's renderer will always have a "shape" component attached to it.

Relative Sizes

A "relative sizer" component can adjust an element's size within a layout. The term "size" may mean different things based on the layout's shape. There are two scenarios that occur.

In the basic scenario, the relative size is a multiplier for the element's original size. For example, an element in a vertical row, given a relative width of 2, will be sized using 200% of its original width.

A more complex scenario occurs when the adjusted size affects the "axis" of the layout's arrangement (the element's width within a horizontal row, the element's arc of an element within a radial row, etc.). In this scenario, the layout compares the relative sizes of all its child elements, and divides the space along its "axis" accordingly. For example, a horizontal row has four elements, given relative widths of 4, 1, 1, and 2. By comparing these sizes against the sum, the layout calculates element widths of 50%, 12.5%, 12.5%, and 25%, respectively.

Relative Offsets

A "relative sizer" component can offset an element's position within a layout. The term "offset" may mean different things based on the layout's shape.

In all scenarios, the relative offset value acts a multiplier. The actual offset applied to an element is equal to its relative offset multiplied by its relevant "size" value. For example, an "X" offset of 0.5 will shift the element by 50% of its width to the right. An "X" offset of -2 will shift the element by 200% of its width to the left.

Anchors

Most layouts provide some form of "Anchor" property, which specifies the location of the layout's pivot point. For example, a "bottom-left" anchor will cause the layout to be positioned relative to its lowest, left-most corner. All layouts use a "center" anchor by default. The available anchor types may vary between different layout shapes.

The use of anchors within nested layouts can become confusing. Unless complex anchoring is required, the recommended approach is for child layouts to use the same anchor type as their parent layout.

Rectangular-Shaped Layouts

Rectangular-shaped layouts (which use "Rect" in their component names) always form a horizontal or vertical row. These can be nested together to form grids and other more complex layouts.

Rect Row

The HoverLayoutRectRow component is responsible for creating horizontal or vertical row arrangements. It can contain and arrange any GameObject with a component that implements ILayoutableRect. This includes the HoverLayoutRectRow component itself, allowing for nested rectangular-shaped layouts.

This component has several properties:

• The "Arrangement" property specifies whether a row should flow from the right or left (for horizontal rows) or flow from the top or bottom (for vertical rows).
• The "SizeX" and "SizeY" property specifies the horizontal and vertical size (respectively) of the layout. For nested layouts, this property is always controlled by the parent layout component.
• The "Padding" property group specifies the amount of padding around and between the layout elements.
• The "Anchor" property specifies the location of the layout's pivot point.

Rect Padding Settings

The HoverLayoutRectPaddingSettings class provides padding-related settings for rect-shaped layouts. Padding is always applied to the interior of a layout; it never increases the layout's size.

This component has several properties:

• The "Top" property applies padding to the top edge of the rect shape.
• The "Bottom" property applies padding to the bottom edge of the rect shape.
• The "Left" property applies padding to the left edge of the rect shape.
• The "Right" property applies padding to the right edge of the rect shape.
• The "Between" property applies padding evenly between the layout elements. The result of this padding varies based on the layout type.

Rect Relative Sizer

The HoverLayoutRectRelativeSizer component is responsible for adjusting the size and position of an element within a layout.

This component has several properties:

• The "Relative Size X" property specifies how wide the element should be within the layout:
  • Within a horizontal row, this is weighted against the relative widths of its siblings.
  • Within a vertical row, this is a multiplier for the element's original width.
• The "Relative Size Y" property specifies how tall the element should be within the layout:
  • Within a horizontal row, this is a multiplier for the element's original height.
  • Within a vertical row, this is weighted against the relative heights of its siblings.
• The "Relative Position Offset X" property specifies how much to shift the element horizontally within the layout. The effect of this value is relative to the element's width.
• The "Relative Position Offset Y" property specifies how much to shift the element vertically within the layout. The effect of this value is relative to the element's height.

Arc-Shaped Layouts

Arc-shaped layouts (which use "Arc" in their component names) always form a radial/circular pattern. There are two main types of arc-shaped layouts, called a "row" and a "stack". These can both be nested together to form complex radial layouts.

Arc Row

The HoverLayoutArcRow component is responsible for creating radial row arrangements, which divides elements via degrees. Each element in the layout receives a "slice" of the layout's available arc. This layout can contain and arrange any GameObject with a component that implements ILayoutableArc. This includes both HoverLayoutArcRow and HoverLayoutArcStack components, allowing for nested radial layouts.

This component has several properties:

• The "Arrangement" property specifies whether the layout elements should flow clockwise or counter-clockwise.
• The "OuterRadius" property specifies the radius for the outside edge of the arc shape.
• The "InnerRadius" property specifies the radius for the inside edge of arc shape.
• The "ArcDegrees" property specifies the span of the arc shape, from very thin (a few degrees) to a full circle (360 degrees).
• The "Padding" property group specifies the amount of padding around and between the layout elements.
• The "StartingDegree" property rotates the layout.
• The "RectAnchor" property specifies the location of the layout's pivot point within a rectangular layout.

Arc Stack

The HoverLayoutArcStack component is responsible for creating radial stack arrangements, which divides elements via radius. Each element in the layout receives a "slice" of the layout's available thickness. This layout can contain and arrange any GameObject with a component that implements ILayoutableArc. This includes both HoverLayoutArcStack and HoverLayoutArcRow components, allowing for nested radial layouts.

This component has several properties:

• The "Arrangement" property specifies whether the layout elements should flow from the inner or outer position.
• The "OuterRadius" property specifies the radius for the outside edge of the arc shape.
• The "InnerRadius" property specifies the radius for the inside edge of arc shape.
• The "ArcDegrees" property specifies the span of the arc shape, from very thin (a few degrees) to a full circle (360 degrees).
• The "Padding" property group specifies the amount of padding around and between the layout elements.
• The "StartingDegree" property rotates the layout.
• The "RectAnchor" property specifies the location of the layout's pivot point within a rectangular layout.

Arc Padding Settings

The HoverLayoutArcPaddingSettings class provides padding-related settings for arc-shaped layouts. Padding is always applied to the interior of a layout; it never increases the layout's size.

This component has several properties:

• The "Outer Radius" property applies padding to the outside edge of the arc shape.
• The "Inner Radius" property applies padding to the inside edge of the arc shape.
• The "Start Degree" property applies padding to the starting degree of the arc shape.
• The "End Degree" property applies padding to the end degree of the arc shape.
• The "Between" property applies padding evenly between the layout elements. The result of this padding varies based on the layout type.

Arc Relative Sizer

The HoverLayoutArcRelativeSizer component is responsible for adjusting the thickness, angle, and position of an element within a layout.

This component has several properties:

• The "Relative Thickness" property specifies how thick (the distance between the arc's inner and outer radius) the element should be within the layout:
  • Within a row, this is a multiplier for the element's original thickness.
  • Within a stack, this is weighted against the relative thicknesses of its siblings.
• The "Relative Arc Degrees" property specifies how broad (the amount of degrees the arc spans) the element should be within the layout:
  • Within a row, this is weighted against the relative arc degrees of its siblings.
  • Within a stack, this is a multiplier for the element's original arc degrees.
• The "Relative Radius Offset" property shifts the element's inner radius, inward or outward, by an amount relative to the thickness of the element.
• The "Relative Start Degree Offset" property rotates the element, clockwise or counterclockwise, by an amount relative to the arc degrees of the element.