Попробуйте поиграть с файлом из видео, чтобы понимать, о чем идет речь.
Ограничители работают по-другому, когда объекты находятся во фрейме с резиновой сеткой. Колонки и строки сетки в режиме Stretch будут создавать границы, относительно которых начнут работать все свойства Constraints. Ограничители применятся относительно самой ближайшей колонки или строчки в сетке.
Если же сетка работает в режиме Top, Left, или Center, то такого не происходит — эти сетки фиксированные и все свойства Constraints работают относительно своих родительских фреймов.
Когда нужно использовать сетки в режиме Stretch
Когда при ресайзе фрейма нужно синхронно изменять ширину или высоту сразу нескольких блоков с отступами. Это могут быть сложные компоненты или страницы, где есть несколько колонок.
Сразу напомню: сейчас нет никакого способа реализовать автоматическое смещение одного блока при изменении высоты другого. Поэтому увидеть, как будут сжиматься колонки на десктопной или планшетной версии сайта может быть полезно, но в конечном итоге все равно придется двигать вручную, ведь блоки текста и части интерфейса будут налезать друг на друга (сверху вниз) при таком ресайзе.
Stretch сетки работают даже когда спрятаны
Иногда их приходится использовать во вложенных фреймах, делать что-то похожее на
.container в верстке. Из-за этого они часто накладываются на другие сетки. Это может раздражать, если прозрачность колонок будет слишком низкой. В таком случае сетку можно просто спрятать с помощью иконки глаза, все равно все свойства Constraints будут работать с ее учетом. Но не рекомендую так делать, потому что можно быстро запутаться. Вместо этого лучше давать колонкам цвет с высокой прозрачностью.
Почему свойства Constraints странно работают без резиновой сетки
Когда нужно растягивать или сжимать одновременно 2+ объекта внутри фрейма, может показаться, что ограничители Left & Right или Top & Bottom начинают работать как-то неадекватно. На самом деле функция отрабатывает как надо.
Цель ограничителей Left & Right или Top & Bottom — сохранять отступы относительно родительского фрейма или ближайшей резиновой колонки. Им все равно какие там отступы от соседних объектов — вы их видите, а они нет.
Виновато абсолютное позиционирование
Тем, кто знаком с версткой это кажется странным — объекты ведь лежат внутри одного контейнера, почему они не учитывают пространство и отступы от соседей? Судя по всему, вкладка Code действительно не врет — все объекты используют что-то вроде
position: absolute, а отступы в контейнерах соблюдаются благодаря свойствам left, right, top, bottom.Почему нельзя обойтись свойствами Constraints в режими Scale
Объекты с ограничителями в режиме Scale сохраняют свое процентное соотношение размера и отступов относительно их родительского фрейма. Если блок занимает 50% всей ширины фрейма, а отступы слева и справа по 25%, то именно такими они останутся после ресайза блока. Это приводит к дробным числам размера и отступов, даже когда отступов между соседними объектами фрейма вовсе не было.
Функционал открыт и протестирован совместно с @starkovskyblg ✌️
Знали об этой фиче?
😳 – не знал(а)
🤓 – уже знал(а)
Есть интересные кейсы использования или вопросы по этому функционалу? Можете написать в комментариях.