Getting Started꞉ Item Layouts - aestheticinteractive/Hover-UI-Kit GitHub Wiki

On this page, you'll learn how to automatically arrange items via layouts.

Instructions

:camera: Arranging items manually, within a row layout, and within a nested column layout

Please note: the following instructions do not exactly match the animation. Most of the following steps can be performed in a different order. For example, you can configure a layout's settings before adding any items into it.

1. Complete the Scene Setup step.
2. Add some items to your scene. See the Checkbox Item or Slider Item instructions for assistance.
3. To position an item individually, move or rotate its transform to the desired position.
4. Create an empty GameObject named RowLayout.
5. Attach the HoverLayoutRectRow component to RowLayout.
6. Drag item objects to become children of RowLayout.
   1. Attach the HoverShapeRect component to each item. The layout cannot find or adjust an item until it has the shape component attached.
7. Select the RowLayout object.
   1. Move or rotate its transform to the desired position.
   2. Set the HoverLayoutRectRow properties for the desired size and padding.
8. Select, then duplicate, the RowLayout object (using "Edit > Duplicate" or "Ctrl+D" in Unity). This also duplicates the object's children (in this case, creating additional items in the scene).
   1. Move it to become a child of the original RowLayout object. Note that the child index (within the list of elements within the row) determines the element's position within the layout.
   2. Rename the duplicated layout to ColumnLayout.
   3. Set the HoverLayoutRectRow "Arrangement" property to "Top To Bottom".
9. Attach the HoverLayoutRectRelativeSizer component to ColumnLayout.
   1. Set the "Relative Size X" property to control the amount of horizontal space it consumes within the parent row layout.