With the increasing interest in game development, it's essential to design and implement a UI that reflects the game settings and shows the right information to the player.
Often, we need to place a lot of objects in their correct and symmetric positions within our UI or in a nested element. Luckily, Unity has an auto-layout system that provides ways to nest UI elements into other UI elements. It is controlled by the UI layouts components that allow us to structure our UI. Learning how to master them is crucial for quickly creating clean UIs and achieving our design goals. This is the purpose of this recipe. UI Online Course
How to do it...
- As the first step, we need a panel to apply the layout controllers to, and we have to restructure its children objects. To create this panel, right-click on the Hierarchy panel and then go to UI | Panel. We should also rename it to First Panel.
- Then, we need to fill in our First Panel with some elements. In this recipe, we will use buttons. So let's start creating one of them inside the panel by right-clicking on the panel and then navigating to UI | Button.
- Since just one button is not enough to see how layout controllers work, we need to add more panels. Therefore, we duplicate the button by pressing Ctrl + D as many times we want. Of course, we don't worry about the layout; the layout controls will do this for us.
- Because we want to test different layout controllers, we also need to duplicate the panel, using Ctrl + D. Finally, rename it to Second Panel.
- We also need a third panel. Therefore, we can rename it to the External Panel and put inside it the other two panels. Now, we should have the following structure:
- Next, simply add Horizontal Layout Group (Script) to External Panel and then Vertical Layout Group (Script) to First Panel. Finally, add Grid Layout Group (Script) to Second Panel. Now, we can see the Auto-Layout system doing all the work for us. To better understand how the system works, just add the buttons, or duplicate them, and watch how the Auto-Layout system re-organizes the entire layout for us. As the final result, we should see something similar to this:
How it works...
The Auto-Layout system is composed of two different kinds of elements: Layout Elements and Layout Controllers. To understand the former, note that every game object that has a Rect Transform, and eventually other components, is a layout element. These types have certain knowledge about what size they should be off, but they do not control it directly. Layout controllers, instead, are components that control sizes and also positions of one or more layout elements. They can control their Layout Element or child Layout Elements of the game object to which they are attached. For more info to click here UI design course
In this example, we used Horizontal Layout Group (Script), Vertical Layout Group (Script) and Grind Layout Group (Script). They work in similar ways. Furthermore, they take care of the layout of the children inside the game object to which they are attached and restructure the positions of the UI elements.
If you want to learn more about layout controllers, you can go to the official Unity documentation at the following links:
- Horizontal layout group:
- Vertical layout group:
- Grid layout group:
- Content size fitter:
- Aspect ratio fitter: