Prototyping UI in Unity Part 4 — Layout Components

Prototyping UI in Unity Part 4 — Layout Components

Image for post

< 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:

  1. Grid Layout Group ? Creates a grid of objects (rows and columns) of a fixed size
  2. Vertical Layout Group ? Creates a vertical column of objects of any size
  3. 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.

Image for post

Now we?ll create an empty Rect Transform object by adding an Image through the GameObject UI menu.

Image for post

Right-click the new object and rename it Grid.

Image for post

With Grid selected in the Hierarchy, in the inspector on the left, right-click the Image component and Remove it.

Image for post

Set the anchor presets of the Grid?s Rect Transform to Stretch both horizontally and vertically.

Image for post

Then set the Left, Right, Top and Bottom offsets all to 0. This makes it full-screen.

Image for post

In the inspector, click Add Component. Type Grid in the search bar and click Grid Layout Group.

Image for post

In the Hierarchy, drag the Image object into the Grid object. Notice that it takes the settings defined in the Grid Layout Group component.

Image for post

Select the image and duplicate it 9 times by pressing ?-D (Ctrl-D for Windows).

Image for post

Change the source images to unique images from the Textures folder so they look visually distinct.

Image for post

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:

Image for postImage for post

Switch to the Game view to see how it would look on device.

Image for post

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.

Image for post

Create an empty Rect Transform like we did earlier, by creating an Image from the GameObject UI menu.

Image for post

Right-click the new object and call it Vertical Layout Group.

Image for post

Again, right-click and remove the Image component in the inspector.

Image for post

Then click Add Component, search for vertical and click Vertical Layout Group.

Image for post

Set the Vertical Layout Group object?s Rect Transform parameters to stretch to the canvas with no offsets, like we did with the Grid.

Image for post

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.

Image for post

Drag the Image object into the Vertical Layout Group object.

Image for post

Duplicate the object 3 times with ?-D (Ctrl-D for Windows).

Image for post

Change the source textures of Image (1) and (2) to be unique.

Image for post

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

Image for post

Selecting Child Controls Size in addition to Child Force Expand makes the children fill up the parent object size:

Image for postImage for post

Try hiding the Image object by toggling it in the Inspector.

Image for postImage for post

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.

Image for post

Check Preferred Height and type 100.

Image for postImage for post

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.

Image for post

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.

Image for post

Then change the Alignment to Middle Center and the Spacing to 20.

Image for post

Select Image (2) and toggle it on and off in the inspector to see how it reacts.

Image for post

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!

Next: Part 5 ? Creating the UI Navigation Bar

10

No Responses

Write a response