Unity version：6000.0.31f1
When creating UI for games or apps in Unity, you often want to neatly arrange buttons and images. However, manually adjusting positions is time-consuming, and the layout can break if screen size or resolution changes.
That’s where Unity’s Layout Components come in handy. This article focuses on the Horizontal Layout Group, providing a detailed explanation so even beginners can use it without confusion. You’ll also understand the differences from Vertical Layout and Grid Layout, so even those unsure about UI creation can feel confident.
What is a layout component?
Unity has a mechanism that automatically aligns UI objects.
For example, when you want to arrange five buttons side by side, manually adjusting their positions can be quite tedious. Aligning them pixel-perfectly is difficult, and if the screen size changes, you’ll need to readjust everything.
The Layout Component solves this problem. It automatically aligns objects, making your workflow much more efficient.
The three main Layout Components are:
| Component | Alignment Direction | Use Case |
|---|---|---|
| Horizontal Layout Group | Horizontal | When you want buttons or images arranged side by side |
| Vertical Layout Group | Vertical | When you want menus or lists arranged vertically |
| Grid Layout Group | Grid | Item lists or inventory UI |
Benefits
- Significantly reduces the effort required for manual position adjustments
- Makes it easier to support multiple screen sizes
- Enables consistent alignment of UI appearance
Basic Usage of Horizontal Layout Group
1. Create a Panel on the Canvas
First, create a Panel as the parent object for the UI.
A Panel acts as a container to group child objects together.
For example, buttons or images you want to arrange side-by-side should be placed inside this Panel.
2. Add a Horizontal Layout Group to the Panel
Next, select the Panel and add a Horizontal Layout Group via Inspector → Add Component → Layout.
This automatically aligns all child objects within the Panel horizontally.
3. Place child objects
Place buttons and images as child objects of the panel.
Adding a Horizontal Layout Group automatically arranges them horizontally, aligning them sequentially from left to right.
4. Adjust spacing, padding, and positioning
The Horizontal Layout Group contains options for fine-tuning adjustments.
- Spacing
You can specify the distance between child objects. For example, setting Spacing to 10 creates a 10px gap between buttons. - Padding
Adjusts the margin from the Panel edge to child objects. Can be set individually for top, bottom, left, and right.
This adjustment alone will instantly make the UI look cleaner and easier to read.
Additionally, for positioning, you can choose where to place the Panel from Child Alignment.
To center align, select Middle Center or similar.
Automatically adjust the size of child objects
The Horizontal Layout Group also has an option to automatically align the sizes of child objects.
| Options | Description |
|---|---|
| Child Control Width / Height | Automatically adjusts the width and height of child objects |
| Child Force Expand (Up to Unity5.x) | Check this to force child objects to expand evenly within the Panel |
| Use Child Scale (From Unity 6) | Layout considers the scale values of child objects’ RectTransform. |
Using this setting automatically adjusts buttons and images to a uniform size, even if they are currently different sizes.
This is especially useful when adapting to different resolutions and screen sizes.
About Using Child Scale
For example, if one button’s scale is smaller than the others, it is typically laid out at the same size as the other buttons without considering the scale.
Checking the “Use Child Scale” option will create a layout that also takes scale values into account.
Differences from Vertical Layout and Grid Layout
Vertical Layout Group
- Automatically aligns vertically
- Useful for UI elements like menus and chat lists
- Allows adjustment of spacing and padding, similar to Horizontal Layout
Grid Layout Group
- Align both vertically and horizontally
- Ideal for item lists and shop UI
- Fine-tune with Cell Size and Spacing
Summary
- Horizontal Layout Group automatically aligns elements horizontally
- Spacing and size can be easily adjusted
- Combining it with Vertical or Grid Layout makes UI creation significantly easier
Manually aligning UI elements can be surprisingly tedious, but using layout components allows you to efficiently create clean UI.
Choose components based on your specific use case.
