Введение и использование компонента HorizontalLayoutGroup (горизонтальная компоновка) Unity UGUI

Введение и использование компонента HorizontalLayoutGroup (горизонтальная компоновка) Unity UGUI

1. Что такое компонент HorizontalLayoutGroup?

HorizontalLayoutGroup — это компонент компоновки в Unity UGUI, который используется для упорядочивания и компоновки подобъектов в горизонтальном направлении. Он может автоматически регулировать положение и размер подобъектов по определенным правилам, чтобы они были равномерно распределены в горизонтальном направлении.

2. Как работает HorizontalLayoutGroup

Компонент HorizontalLayoutGroup обеспечивает горизонтальную компоновку с помощью следующих шагов:

• Получите компоненты RectTransform всех дочерних объектов.
• Рассчитайте положение и размер каждого подобъекта в соответствии с размерами и правилами компоновки подобъекта.
• Отрегулируйте положение и размер дочерних объектов, чтобы они были равномерно распределены по горизонтали.

3. Общие атрибуты HorizontalLayoutGroup

• Spacing: Расстояние между дочерними объектами.
• ChildForceExpandWidth: следует ли принудительно увеличивать ширину дочернего объекта, чтобы заполнить всю горизонтальную компоновку.
• ChildForceExpandHeight: следует ли принудительно увеличивать высоту дочернего объекта, чтобы заполнить всю горизонтальную компоновку.
• ChildControlWidth: контролировать ли ширину дочернего объекта.
• ChildControlHeight: контролировать ли высоту дочернего объекта.

4. Общие функции HorizontalLayoutGroup

• CalculateLayoutInputHorizontal(): ввод для расчета горизонтального расположения.
• CalculateLayoutInputVertical(): вычисляет ввод для вертикального макета.
• SetLayoutHorizontal(): установка горизонтального макета.
• SetLayoutVertical(): установка вертикального макета.

5. Пример кода

Пример 1. Создание горизонтального макета и добавление трех дочерних объектов

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;

    void Start()
    {
        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

Шаги:

1. Создайте пустой объект и добавьте компонент HorizontalLayoutGroup.
2. Создайте префаб подобъекта, который содержит текстовый компонент.
3. Перетащите префаб дочернего объекта в свойство Child Prefab группы layoutGroup.
4. Запустив игру, вы увидите, что три подобъекта равномерно распределены по горизонтали.

Пример 2: Установите расстояние между подобъектами

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;

    void Start()
    {
        layoutGroup.spacing = 20f;

        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

Шаги:

1. Создайте пустой объект и добавьте компонент HorizontalLayoutGroup.
2. Создайте префаб подобъекта, который содержит текстовый компонент.
3. Перетащите префаб дочернего объекта в свойство Child Prefab группы layoutGroup.
4. Задайте для свойства Spacing группы layoutGroup значение 20.
5. Запустите игру, и вы увидите, что расстояние между подобъектами изменилось на 20.

Пример 3. Заставить дочерние элементы увеличить ширину, чтобы заполнить всю горизонтальную компоновку.

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;

    void Start()
    {
        layoutGroup.childForceExpandWidth = true;

        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

Шаги:

1. Создайте пустой объект и добавьте компонент HorizontalLayoutGroup.
2. Создайте префаб подобъекта, который содержит текстовый компонент.
3. Перетащите префаб дочернего объекта в свойство Child Prefab группы layoutGroup.
4. Задайте для свойства Child Force Expand Width группы layoutGroup значение true.
5. Запустите игру, и вы увидите, что ширина дочернего объекта увеличилась, чтобы заполнить всю горизонтальную компоновку.

Пример 4: Управление шириной и высотой дочерних объектов

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;

    void Start()
    {
        layoutGroup.childControlWidth = false;
        layoutGroup.childControlHeight = false;

        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

Шаги:

1. Создайте пустой объект и добавьте компонент HorizontalLayoutGroup.
2. Создайте префаб подобъекта, который содержит текстовый компонент.
3. Перетащите префаб дочернего объекта в свойство Child Prefab группы layoutGroup.
4. Задайте для свойств ширины дочернего элемента управления и высоты дочернего элемента управления layoutGroup значение false.
5. Запустив игру, вы увидите, что ширина и высота подобъекта не контролируются, а исходный размер сохраняется.

Пример 5: Пользовательские правила макета

using UnityEngine;
using UnityEngine.UI;

public class Example : MonoBehaviour
{
    public HorizontalLayoutGroup layoutGroup;
    public GameObject childPrefab;

    void Start()
    {
        layoutGroup.childAlignment = TextAnchor.MiddleCenter;

        for (int i = 0; i < 3; i++)
        {
            GameObject child = Instantiate(childPrefab, layoutGroup.transform);
            child.GetComponent<Text>().text = "Child " + (i + 1);
        }
    }
}

Шаги:

1. Создайте пустой объект и добавьте компонент HorizontalLayoutGroup.
2. Создайте префаб подобъекта, который содержит текстовый компонент.
3. Перетащите префаб дочернего объекта в свойство Child Prefab группы layoutGroup.
4. Задайте для свойства Child Alignment группы layoutGroup значение по центру посередине.
5. Запустите игру, и вы увидите, что подобъекты выровнены по центру по горизонтали.

Меры предосторожности

• Компонент HorizontalLayoutGroup можно использовать только для горизонтальной компоновки, если вам нужна вертикальная компоновка, вы можете использовать компонент VerticalLayoutGroup.
• Точка привязки и положение компонента RectTransform дочернего объекта повлияют на эффект макета и должны быть скорректированы в соответствии с фактическими потребностями.

Рекомендации

• Официальная документация Unity — HorizontalLayoutGroup