LayoutGroup — это компонент, который используется в PlayCanvas для управления расположением дочерних элементов в интерфейсах. Он автоматически расставляет элементы в виде вертикального или горизонтального списка, управляя их позициями и размерами на основе заданных параметров. В PlayCanvas компонент LayoutGroup является мощным инструментом для организации UI-элементов, таких как кнопки, панели и текстовые блоки, в динамических интерфейсах.
Компонент LayoutGroup имеет несколько важных параметров, которые влияют на поведение элементов внутри группы. Наиболее значимые из них:
LayoutType — определяет ориентацию элементов. Значение может быть:
Padding — отступы между элементами внутри LayoutGroup. Это позволяет управлять расстоянием между соседними объектами, независимо от их размеров.
Align — выравнивание элементов относительно контейнера:
Spacing — задаёт отступ между элементами внутри LayoutGroup. Это значение указывает на минимальное расстояние между объектами, независимо от их размеров.
Child Force Width/Height — позволяет принудительно задать одинаковую ширину или высоту для всех дочерних объектов в группе. Это полезно, если требуется, чтобы все элементы имели одинаковые размеры.
При использовании LayoutGroup с вертикальной ориентацией, элементы располагаются один под другим. Это полезно для создания списков, колонок или интерфейсов с вертикальной прокруткой.
Пример использования:
var layout = new pc.LayoutGroup();
layout.layoutType = pc.LAYOUT_VERTICAL;
layout.spacing = 10; // Устанавливаем отступ между элементами
layout.align = pc.VALIGN_TOP; // Выравнивание по верхнему краю контейнера
layout.padding = 20; // Устанавливаем отступы по краямЭтот код создаёт вертикальную группу с отступами между элементами и выравниванием по верхнему краю.
Когда LayoutGroup используется в вертикальном режиме, компонент
автоматически адаптирует расположение всех дочерних элементов в
контейнере. Каждый элемент будет располагаться ниже предыдущего с
заданным отступом. Выравнивание дочерних объектов (например, кнопок или
панелей) можно легко настроить с помощью параметра
align.
Для горизонтального расположения элементов используется значение
pc.LAYOUT_HORIZONTAL. В этом случае элементы располагаются
рядом друг с другом, что подходит для создания панелей с кнопками или
навигационных баров.
Пример использования:
var layout = new pc.LayoutGroup();
layout.layoutType = pc.LAYOUT_HORIZONTAL;
layout.spacing = 15; // Отступ между элементами
layout.align = pc.HALIGN_CENTER; // Выравнивание по центру
layout.padding = 10; // Установка отступов по краямЗдесь элементы будут располагаться горизонтально с отступами между ними, а выравнивание будет по центру контейнера. Компонент автоматически вычисляет пространство между элементами и их позицию на экране, учитывая размеры каждого из них.
Один из главных аспектов LayoutGroup — это возможность автоматической настройки размеров дочерних элементов. Компонент сам управляет размерами объектов, что значительно упрощает разработку интерфейсов. Например, если задано выравнивание по центру или по правому краю, компонент будет автоматически корректировать их положение, обеспечивая нужное пространство для отображения.
Чтобы элементы занимали одинаковую ширину или высоту, можно использовать параметр Child Force Width/Height:
layout.childForceWidth = true; // Принудительное изменение ширины всех элементов
layout.childForceHeight = true; // Принудительное изменение высоты всех элементовПри этом все дочерние элементы будут иметь одинаковые размеры, что полезно, например, при создании кнопок с одинаковыми размерами в меню.
Когда используется компонент LayoutGroup, важно учитывать размеры самого контейнера. Компонент не только управляет расположением дочерних элементов, но и может адаптировать их размеры в зависимости от доступного пространства. Если пространство ограничено, элементы могут быть сжаты или растянуты, чтобы соответствовать размеру контейнера.
Пример 1: Вертикальный список кнопок
Предположим, необходимо создать меню с несколькими кнопками, расположенными вертикально. Каждый элемент в этом списке будет иметь одинаковую ширину, но высоту можно будет настраивать в зависимости от содержимого.
var button1 = new pc.Entity();
var button2 = new pc.Entity();
var button3 = new pc.Entity();
var layout = new pc.LayoutGroup();
layout.layoutType = pc.LAYOUT_VERTICAL;
layout.spacing = 20;
layout.padding = 10;
layout.childForceWidth = true;
button1.addChild(button2);
button2.addChild(button3);В этом примере кнопки будут выровнены по вертикали с одинаковыми размерами и отступами между ними.
Пример 2: Горизонтальная панель с кнопками
В следующем примере создаём панель с кнопками, расположенными горизонтально, и выравниваем их по центру.
var button1 = new pc.Entity();
var button2 = new pc.Entity();
var button3 = new pc.Entity();
var layout = new pc.LayoutGroup();
layout.layoutType = pc.LAYOUT_HORIZONTAL;
layout.spacing = 10;
layout.align = pc.HALIGN_CENTER;
button1.addChild(button2);
button2.addChild(button3);Здесь кнопки будут располагаться по горизонтали с равными промежутками между ними, а сама панель будет выравниваться по центру.
Компонент LayoutGroup является мощным инструментом для создания гибких и удобных интерфейсов в PlayCanvas. Возможность настроить ориентацию элементов, их отступы и выравнивание позволяет быстро и эффективно решать задачи по организации UI-элементов. Вертикальная и горизонтальная ориентация LayoutGroup предоставляют разработчикам широкие возможности для работы с различными типами интерфейсов, от простых списков до сложных панелей с кнопками и элементами управления.