Prototyping UI in Unity Part 4 — Layout Components
< Previous: Introduction to UI Components
In this article, we’ll be introducing layout components. These are the true building blocks to creating a dimension agnostic UI. Fully understanding the layout system in Unity will allow you to create flexible UI that adjusts to any device.
There are three layout group types in Unity:
- Grid Layout Group — Creates a grid of objects (rows and columns) of a fixed size
- Vertical Layout Group — Creates a vertical column of objects of any size
- Horizontal Layout Group — Creates a horizontal row of objects of any size
Grid Layout Group
Let’s start with the Grid, which is used when you need a grid of objects exactly the same size.
Using the project from the previous tutorial, delete the Text object in the Hierarchy. This should leave you with the Image only in the Canvas.
Now we’ll create an empty Rect Transform object by adding an Image through the GameObject UI menu.
Right-click the new object and rename it Grid.
With Grid selected in the Hierarchy, in the inspector on the left, right-click the Image component and Remove it.
Set the anchor presets of the Grid’s Rect Transform to Stretch both horizontally and vertically.
Then set the Left, Right, Top and Bottom offsets all to 0. This makes it full-screen.
In the inspector, click Add Component. Type Grid in the search bar and click Grid Layout Group.
In the Hierarchy, drag the Image object into the Grid object. Notice that it takes the settings defined in the Grid Layout Group component.
Select the image and duplicate it 9 times by pressing ⌘-D (Ctrl-D for Windows).
Change the source images to unique images from the Textures folder so they look visually distinct.
To adjust the size of the images and the spacing between rows or columns, select the Grid object in the hierarchy and look at the Grid Layout Group component in the inspector on the left.
Change the parameters to match these settings and notice how it updates:
Switch to the Game view to see how it would look on device.
Feel free to play around with all the settings to see what they do! You can adjust padding around the grid itself, change the direction the child objects display, or limit the amount of columns or rows.
If you want to change the order of the image in the grid, simply move them around in the Hierarchy. The top most image will be the first in the grid.
Horizontal and Vertical Layout Groups
Grids are perfect for simple layouts where the objects are all exactly the same size. But what if the objects are different sizes? Or you want one image to have a flexible size, but not another? With a grid, it will force all the objects to be size defined by the grid and will produce less than desirable results.
This is where the Horizontal and Vertical Layout Groups come in. Essentially they work the same, they just specifically align along a set axis. They also come with options to allow the child objects to control their own size, which allows more flexibility in your layout.
They are extremely useful when creating dimension agnostic UI, because the child objects can adjust their size depending on the anchoring of the parent group.
I typically find myself using these more than the Grid because of these reasons.
Vertical Layout Group
Since they both work the same, let’s start by showing how a Vertical Layout Group works. In the Hierarchy, right-click the Grid object and delete it.
Create an empty Rect Transform like we did earlier, by creating an Image from the GameObject UI menu.
Right-click the new object and call it Vertical Layout Group.
Again, right-click and remove the Image component in the inspector.
Then click Add Component, search for vertical and click Vertical Layout Group.
Set the Vertical Layout Group object’s Rect Transform parameters to stretch to the canvas with no offsets, like we did with the Grid.
Now we’ll add few images to the Vertical Layout Group. Select the Vertical Layout Group object and from the GameObject UI menu, add an image. Set the Width and Height to 200 and use Photo1 as the Source Image.
Drag the Image object into the Vertical Layout Group object.
Duplicate the object 3 times with ⌘-D (Ctrl-D for Windows).
Change the source textures of Image (1) and (2) to be unique.
Vertical and Horizontal Layout Groups can be pretty tricky to get the hang of, it takes a lot of experimentation to get right. There’ll be a lot of trial and error (and frustration), but once you get it, there’s no going back!
Let’s take a closer look at the Vertical Layout Group component in the inspector, by selecting the Vertical Layout Group object in the Hierarchy.
Flexible Layouts
Selecting Child Controls Size in addition to Child Force Expand makes the children fill up the parent object size:
Try hiding the Image object by toggling it in the Inspector.
Notice that the children expand to fill the missing space? By using Horizontal or Vertical Layout Groups, you can create UI that adjusts accordingly when elements are added or removed. Like a search bar that needs to push down the main content when displayed, or a side column that only shows up on specific use cases. These allow one interface to handle multiple use-cases, therefore eliminating any potential duplicate interfaces.
Partially Flexible Layouts
Let’s say you wanted 2 objects to expand to fully, but only one needed a fixed height. To do this you would add a Layout Element to the Image you want to keep a specific height.
Select Image in the Hierarchy, and in the inspector Add a Layout Element Component.
Check Preferred Height and type 100.
You’ll see that the first image will keep it’s height at 100, where the other two will expand to fill up the rest of the space.
Variable Sized Children
By deselecting everything in Child Controls Size and Child Force Expand, you give the ability for the children to control their own size.
Select the Image object in the Vertical Layout Group and set its Width and Height to 200 x 200.
Select the Image (1) object and set it’s Width and Height to 400 x 400.
Select the Image (2) object and set it’s Width and Height to 600 x 600.
Then change the Alignment to Middle Center and the Spacing to 20.
Select Image (2) and toggle it on and off in the inspector to see how it reacts.
Conclusion
This was a brief introduction to layout components. Really understanding them just takes experience using them. A lot of the knowledge I’ve gained was through trial and error, just tweaking values here and there and combining them in ways I didn’t intentionally set out to do.
In the next series, I’ll be taking a more practical approach to using layout groups to build a functional prototype.
Reminder if you want to skip ahead to the final project, you can see it here: https://github.com/marianomike/unity-prototype-photoapp
Otherwise, let’s start to apply these concepts!
