Справочный центр
Auto Layout в Zero Block
Продвинутые способы упорядочивания элементов внутри группы
Auto Layout — это инструмент, который позволяет упрощать верстку и выравнивание элементов внутри группы.
Он удобен для создания таких сложных элементов, как карточки, кнопки с несколькими элементами (например, с текстом и иконкой), пункты меню и другие элементы, где может понадобиться изменение длины текста и умное изменение размера элемента под эту длину.
Он удобен для создания таких сложных элементов, как карточки, кнопки с несколькими элементами (например, с текстом и иконкой), пункты меню и другие элементы, где может понадобиться изменение длины текста и умное изменение размера элемента под эту длину.
Переход к настройке Auto Layout
Для того, чтобы перейти к настройке функции, перейдите в настройки нужной вам группы элементов. Убедитесь что группа является объектной, а не логической, то есть, в ней вся группа элементов представляет собой объект, который имеет собственные настройки.
При добавлении Auto Layout появляются несколько настроек, которые позволяют управлять тем, как элементы будут выравниваться внутри группы. Мы рассмотрим все эти настройки c примерами их использования.
Управление высотой и шириной контейнера группы через параметр Hug
При добавлении Auto Layout у группы появляется 2 новых настройки для управления шириной и высотой контейнера группы.
По умолчанию всегда установлен параметр Hug, что означает, что размер у группы гибкий и зависит от внутренних отступов и размеров элемента.
Если потянуть за границу группы или вручную изменить ширину/высоту, то автоматически станет Fixed, что означает фиксированный размер группы, который не будет изменяться при изменении внутренних отступов между элементами или размеров самих элементов.
По умолчанию всегда установлен параметр Hug, что означает, что размер у группы гибкий и зависит от внутренних отступов и размеров элемента.
Если потянуть за границу группы или вручную изменить ширину/высоту, то автоматически станет Fixed, что означает фиксированный размер группы, который не будет изменяться при изменении внутренних отступов между элементами или размеров самих элементов.
Но теперь появляется еще дополнительное значение Hug. При его установке значение ширины или высоты пересчитывается и устанавливается минимальное возможное значение, чтобы уместить все элементы, учитывая их размер и параметр Gap (отступы между объектами). Также при изменении размера элементов параметр реагирует на это изменение и пересчитывает ширину или высоту, если это нужно.
Direction (направление)
Настройка Direction устанавливает, в каком направлении будет работать автоматическое выравнивание элементов в группе. Существует 3 направления: горизонтальное, вертикальное и перенос (Wrap).
При выборе горизонтального направления все элементы будут выравниваться по оси X. Это подходит для элементов, которые стоят в ряд по горизонтали, например, иконки, пункты меню или ряд кнопок.
При выборе горизонтального направления все элементы будут выравниваться по оси X. Это подходит для элементов, которые стоят в ряд по горизонтали, например, иконки, пункты меню или ряд кнопок.
При выборе вертикального направления все элементы в группе будут выравниваться по оси Y. Это может подойти для списков и элементов внутри карточек, которые идут друг под другом.
При выборе направления с переносом (Wrap) элементы могут переноситься на другую строку, если не умещаются в него по ширине. Это может подойти для фотогалереи, облака тегов, которое может быть в несколько строк и удобно для настройки адаптивов.
Параметр Gap (расстояние между элементами)
Параметр Gap устанавливает отступы между элементами группы. Отступы назначаются в зависимости от направления: для горизонтального это отступы по оси X, для вертикального это отступы по оси Y, для направления Wrap можно задать отступы по обеим осям.
При изменении этого параметра ширина или высота контейнера группы может меняться, если для нужного направления указан параметр Hug.
При изменении этого параметра ширина или высота контейнера группы может меняться, если для нужного направления указан параметр Hug.
Настройка Align Elements
Align Elements — это настройка выравнивания всех элементов группы по основной оси, по вертикали или горизонтали, в зависимости от направления в настройках Auto Layout.
То есть, в случае горизонтального направления элементы могут выравниваться по середине, верху и низу (по вертикали), а в случае вертикального — по середине, слева и справа (по горизонтали). Если включена опция Hug и все элементы имеют одинаковую ширину или высоту, то выравнивание не будет произведено.
То есть, в случае горизонтального направления элементы могут выравниваться по середине, верху и низу (по вертикали), а в случае вертикального — по середине, слева и справа (по горизонтали). Если включена опция Hug и все элементы имеют одинаковую ширину или высоту, то выравнивание не будет произведено.
Настройка Justify Content
Justify Content — это еще настройка выравнивания всех элементов группы, но уже по другой оси, отличной от той, которая была в настройке Align Elements. Она появляется, если для параметра (ширины или высоты) на этой оси не указан параметр Hug.
Кроме обычного выравнивания по середине и двум краям, она имеет еще 3 дополнительных режима выравнивания:
Space Between — распределение элементов равномерно без отступов по краям
Space Around — распределение элементов равномерно, но с отступами по краям, равными половине отступов между элементами
Space Evenly — распределение равномерно, с отступами по краям равными отступам между элементами.
Кроме обычного выравнивания по середине и двум краям, она имеет еще 3 дополнительных режима выравнивания:
Space Between — распределение элементов равномерно без отступов по краям
Space Around — распределение элементов равномерно, но с отступами по краям, равными половине отступов между элементами
Space Evenly — распределение равномерно, с отступами по краям равными отступам между элементами.
Настройка Align Content
Align Content — это настройка выравнивания всех элементов группы, доступная только для направления Wrap, когда есть несколько строк с элементами и выравнивает все строки относительно контейнера по оси Y, если не указан параметр Hug.
В этой настройке можно выровнять несколько строк по середине и двум краям, а также как и в предыдущей настройке с режимами Space Between (распределение элементов равномерно без отступов по краям), Space Around (распределение элементов равномерно, но с отступами по краям, равными половине отступов между элементами) и Space Evenly (распределение равномерно, с отступами по краям равными отступам между элементами).
В этой настройке можно выровнять несколько строк по середине и двум краям, а также как и в предыдущей настройке с режимами Space Between (распределение элементов равномерно без отступов по краям), Space Around (распределение элементов равномерно, но с отступами по краям, равными половине отступов между элементами) и Space Evenly (распределение равномерно, с отступами по краям равными отступам между элементами).
