Using UI layout components

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. In fact, this is the purpose of this recipe.

How to do it...

1. 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.
2. 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.
3. 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.
4. Considering the fact that we want to test different layout controllers, we also need to duplicate the panel, using Ctrl + D. Finally, rename it to Second Panel.
5. We also need a third panel. Therefore, we can rename it to External Panel and put inside it the other two panels. Now, we should have the following structure:
   
6. 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. In order 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 of, 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 own Layout Element or child Layout Elements of the game object to which they are attached.

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.

See also

If you want to learn more about layout controllers, you can go to the official Unity documentation at the following links:

• Horizontal layout group: http://docs.unity3d.com/Manual/script-HorizontalLayoutGroup.html
• Vertical layout group: http://docs.unity3d.com/Manual/script-VerticalLayoutGroup.html
• Grid layout group: http://docs.unity3d.com/Manual/script-GridLayoutGroup.html
• Content size fitter: http://docs.unity3d.com/Manual/script-ContentSizeFitter.html
• Aspect ratio fitter: http://docs.unity3d.com/Manual/script-AspectRatioFitter.html

Tip

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.