В этой статье снова поработаем с системой UI в unity, а точнее – разберем способы работы с группами элементов и их сортировкой. Научимся объединять элементы, задавать им формы и динамически изменять их в процессе игры. Для примера разберем два типа сортировки UI элементов в группе: вертикальную (Vertical Layout Group) и горизонтальную (Horizontal Layout Group).
Вертикальный тип сортировки группирует UI элементы внутри формы по вертикали, как можно увидеть на анимации ниже.
Горизонтальный тип сортировки, соответственно, группирует UI элементы по горизонтали в заданной форме.
Настройки компонентов
Для создания формы будущей группы, достаточно создать канвас и панель, внутри которой будут располагаться элементы.
Далее необходимо добавить этой панели один из двух компонентов Vertical Layout Group или Horizontal Layout Group.
В первом случае поработаем с компонентом вертикальной сортировки Vertical Layout Group.
Теперь разберем каждый параметр настроек компонента Vertical Layout Group:
-
Padding. Здесь можно задать параметры отступа от границ формы.
-
Spacing. Расстояние между элементами. Полезный параметр в котором можно указать размер пространства между элементами внутри формы.
-
Child alignment. Этот параметр привязки указывает откуда начинать построение группы элементов.
-
Child controls size. В этом параметре можно указать возможность форме контролировать размер элементов так, чтобы они не выступали за рамки по длине или высоте.
-
Child force expand. Параметр указывает возможность занимать элементу любое свободное пространство в форме по длине или высоте.
Эти настройки также аналогичны и для компонента горизонтальной сортировки Horizontal Layout Group, так что его мы детально разбирать не будем.
Теперь, чтобы протестировать работу системы можно добавить несколько простых UI элементов внутрь нашей формы, для этого достаточно создать пару изображений Image и убедится, что элементы группируются согласно заданным параметрам.
Как видно, при добавлении элементов в форму, они смещаются так, чтобы заполнить максимум свободного пространства и не пересекаться друг с другом.
Компонент сортировки Layout Element
По умолчанию, если добавлять простые UI элементы в группу для сортировки, форма, то есть, Layout Group сама определяет как ей сортировать элементы. Для того чтобы каждый элемент в группе можно было настраивать отдельно существует специальный компонент Layout Element.
Разберем теперь новый компонент группы Layout Element, его можно добавить любому элементу в группе.
Этот компонент имеет следующие параметры:
-
Ignore Layout. При включении этого параметра элемент полностью избегает сортировки в группе и будет отображаться как обычный UI элемент, а сам компонент сортировки Layout Group проигнорирует элемент в форме. Этот параметр удобно использовать в том случае когда вы перемещаете элемент из одной группы в другую – то есть, когда необходимо исключить его из текущей формы.
-
Min width и Min Height. При включении этого параметра можно указать элементу его минимальные размеры в группе.
-
Preferred width и Prefered height. Два параметра, где можно указать предпочитаемые размеры элемента в группе. В этом случае форма не будет изменять размеры элементов в группе пока это не станет критично.
-
Flexible width и Flexible height. Еще два параметра в которых можно указать в каких пределах размеры элемента могут изменяться во время сортировки в группе.
-
Layout priority. Простой числовой параметр, где можно указать номер при сортировке элемента в группе. Чем больше приоритет, тем выше элемент будет находится в иерархии.
Все эти параметры можно изменять и добиться необходимого результата при сортировке разных элементов в группе.
Если ваши элементы в группе статичны, никак не изменяются и одинаковы, то можно пропустить этот компонент Layout Element и использовать стандартную настройку сортировки сразу в группе, без указания дополнительных условий и параметров.
Контроль размеров
И так мы уже разобрали, что для сортировки статичных групп элементов необходимо в первую очередь форма с одним из трех компонентов Vertical Layout Group, Horizontal Layout Group или Grid Layout Group и сами элементы с дополнительным компонентом Layout Element. Теперь попробуем рассмотреть процесс создания динамической сортировки в группе.
Для того, чтобы можно было добавлять, изменять или удалять элементы из группы так , чтобы сортировка не распадалась необходимо добавить форме компонент Content Size Fitter который поможет нам контролировать размер формы независимо от того сколько элементов в ней находится.
Рассмотрим параметры этого компонента, их всего два: Horizontal Fit и Vertical Fit.
Оба этих параметра указывают как именно контролировать размер формы по длине и высоте.
-
Unconstrained. Это тип по умолчанию указывает, что форматирование отключено и размеры формы не контролируются.
-
Min Size. Следующий тип указывает, что форма контролируется ее минимальным допустимым размером.
-
Preferred Size. Последний тип, позволяет форме самой определять какой размер ей принять в не зависимости от каких либо изменений за ее пределами.
На примере будем использовать минимальный размер формы по вертикали Vertical Fit.
Здесь можно увидеть, как именно работает компонент Content Size Fitter, который автоматически растягивает форму по мере добавления в нее новых элементов.
Заключение
Вот такими простыми манипуляциями стандартных компонентов можно добиться необходимого результата, без использования дополнительных скриптов и единой строчки кода, достаточно просто знать как работают эти самые компоненты. Дальше можно добавить форме компонент скролла Scroll Rect и сделать из нее, к примеру, листаемый список.
Ознакомится с деталями статьи можно скачав исходник проекта.
Подписаться