Unity UGUI's VerticalLayoutGroup Vertical Layout Component Introduction

Introduction and use of VerticalLayoutGroup components of Unity UGUI

1. What is the VerticalLayoutGroup component?

VerticalLayoutGroup is a layout component in Unity UGUI for automatically arranging child objects in a vertical direction. It can automatically adjust the position and size of the sub-object according to the size and layout settings of the sub-object to achieve vertical layout effect.

2. How the VerticalLayoutGroup component works

The VerticalLayoutGroup component implements a vertical layout through the following steps:

Gets the RectTransform component of all child objects.
Calculate the position and size of the child object according to the size and layout settings of the child object.
Adjust the position and size of the sub-objects so that they are arranged according to the layout requirements in the vertical direction.

3. Common properties of VerticalLayoutGroup components

Padding: Inner margin, controls the spacing between the child object and the VerticalLayoutGroup.
Spacing: The spacing between sub-objects.
Child Force Expand: Whether the child object automatically expands to fill the width of the VerticalLayoutGroup.
Child Control Height: Whether the child object automatically adjusts the height to suit the height of the VerticalLayoutGroup.
Child Alignment: The alignment of the child objects.

4. Common functions of VerticalLayoutGroup component

CalculateLayoutInputHorizontal(): Calculate the layout requirements in the horizontal direction of the vertical layout.
CalculateLayoutInputVertical(): Calculate the layout requirements in the vertical direction of the vertical layout.
SetLayoutHorizontal(): Set the layout in the horizontal direction of the vertical layout.
SetLayoutVertical(): Set the layout in the vertical direction of the vertical layout.

5. Example code

Example 1: Create a vertically layout panel

using UnityEngine;
using ;
public class VerticalLayoutExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    private void Start()
    {
         = 10f;
         = false;
         = false;
         = true;
         = ;
    }
}

Operation steps:

Create an empty object and add the VerticalLayoutGroup component to the object.
Add the child objects that need to be vertically laid out to the VerticalLayoutGroup object.
Add the VerticalLayoutExample script to the VerticalLayoutGroup object.
In the Inspector panel, set the spacing of VerticalLayoutGroup to 10, childForceExpandWidth and childForceExpandHeight to false, childControlHeight to true, childAlignment to UpperCenter.

Example 2: Dynamically add sub-objects

using UnityEngine;
using ;
public class AddChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    public GameObject childPrefab;
    private void Start()
    {
        for (int i = 0; i < 5; i++)
        {
            GameObject child = Instantiate(childPrefab, );
            <Text>().text = "Child " + (i + 1);
        }
    }
}

Operation steps:

Create an empty object and add the VerticalLayoutGroup component to the object.
Create a prefab of a child object and assign it to the childPrefab variable of the AddChildExample script.
Add the AddChildExample script to an empty object.
In the Inspector panel, adjust the spacing and other layout settings of VerticalLayoutGroup appropriately.

Example 3: Dynamically delete sub-objects

using UnityEngine;
using ;
public class RemoveChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    private void Start()
    {
        for (int i = 0; i < ; i++)
        {
            Destroy((i).gameObject);
        }
    }
}

Operation steps:

Create an empty object and add the VerticalLayoutGroup component to the object.
Add the RemoveChildExample script to an empty object.
In the Inspector panel, adjust the spacing and other layout settings of VerticalLayoutGroup appropriately.
Run the game and all child objects will be deleted.

Example 4: Dynamically resize sub-objects

using UnityEngine;
using ;
public class ResizeChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    private void Start()
    {
        for (int i = 0; i < ; i++)
        {
            RectTransform childRectTransform = (i).GetComponent<RectTransform>();
             = new Vector2(, 100f);
        }
    }
}

Operation steps:

Create an empty object and add the VerticalLayoutGroup component to the object.
Add the ResizeChildExample script to an empty object.
In the Inspector panel, adjust the spacing and other layout settings of VerticalLayoutGroup appropriately.
Run the game and the height of all child objects will be adjusted to 100.

Example 5: Dynamically adjust the alignment of sub-objects

using UnityEngine;
using ;
public class AlignChildExample : MonoBehaviour
{
    public VerticalLayoutGroup verticalLayoutGroup;
    private void Start()
    {
         = ;
    }
}

Operation steps:

Create an empty object and add the VerticalLayoutGroup component to the object.
Add the AlignChildExample script to an empty object.
In the Inspector panel, adjust the spacing and other layout settings of VerticalLayoutGroup appropriately.
Run the game, and the alignment of all child objects will be adjusted to MiddleCenter.

Things to note

The VerticalLayoutGroup component can only be used for vertical layouts, if you need horizontal layout, use the HorizontalLayoutGroup component.
When using the VerticalLayoutGroup component, make sure that the anchor points and position of the RectTransform component of the child object are set correctly so that the position and size of the child object are calculated correctly.

References

Unity official documentation:VerticalLayoutGroup

Unity official tutorial:Layout Groups

The above is the detailed introduction to the VerticalLayoutGroup Vertical LayoutGroup Vertical Layout Component of Unity UGUI. For more information about Unity UGUI Vertical Layout Components, please follow my other related articles!