Знакомая картина: вы собрали аккуратный список из пяти карточек, всё выровнено по сетке, отступы одинаковые. Приходит правка — добавить шестой пункт. И вы двигаете руками каждую карточку ниже, потом ещё раз, когда текст в одной из них стал на строку длиннее. К концу дня макет выглядит так же, как утром, только вы устали. Auto Layout придуман ровно для того, чтобы эта работа не была вашей.
Идея простая: вы описываете не координаты элементов, а правила, по которым они встают сами. Направление потока, отступы, выравнивание — и фрейм пересобирает содержимое при любом изменении. Добавили пункт — соседи подвинулись. Стал длиннее текст — контейнер подрос. Вручную вы больше ничего не равняете.
Три параметра, которые решают всё
За поведение авто-лейаута отвечают три вещи. Направление — горизонтальное, вертикальное или сетка: так задаётся, вдоль какой оси выстраиваются дети. Отступы — внешние (padding самого фрейма) и внутренние (gap между элементами); именно они дают тот самый ровный ритм, который на глаз никогда не выходит с первого раза. Выравнивание — к какому краю и как прижаты дети внутри контейнера.
Возьмите обычную кнопку. Положите текст «Отправить» в горизонтальный авто-лейаут с padding по 12 и 20 пикселей — и кнопка начнёт обнимать надпись сама. Смените текст на «Сохранить черновик» — кнопка станет шире ровно настолько, насколько нужно, сохранив отступы. Это режим hug: контейнер подстраивается под контент, а не наоборот. Больше никаких «нарисовал прямоугольник, вписал текст, не влез — перерисовал».
Fill, Fixed и Hug — кто кем управляет
У каждого дочернего элемента по оси есть один из трёх режимов размера. hug — сжаться по содержимому (кнопка по тексту). fixed — держать заданный размер, что бы ни происходило вокруг (иконка 24×24 остаётся 24×24). fill — растянуться и занять всё свободное место (поле ввода тянется на всю ширину формы).
Соберите из этого карточку товара — и увидите магию. Картинка сверху — fixed по высоте. Название и описание — fill по ширине, так что перенос строки не ломает вёрстку. Кнопка «В корзину» прижата к низу выравниванием. Теперь меняйте что угодно: длину названия, размер карточки, количество карточек в ряду — вёрстка держится, потому что вы задали не пиксели, а намерение.
Вложенность — где начинается настоящая сила
Один авто-лейаут — это удобно. Авто-лейаут внутри авто-лейаута — это уже система. Строка списка: слева аватар (fixed), справа блок из имени и статуса (вертикальный авто-лейаут, fill), с краю — время (hug). Оберните десять таких строк в вертикальный контейнер с gap — и получите ленту, которая переживёт любую правку контента без единого ручного сдвига.
Здесь помогает «Привязка к сетке» (G) и «Умные направляющие» (Shift+G) — пока вы приноровитесь, они подсказывают, куда встают элементы. А сгруппировать готовый блок и размножить его — это привычные Ctrl+G и Ctrl+D.
Попробуйте прямо сейчас. Откройте редактор, нарисуйте три прямоугольника-«карточки», выделите их и заверните в вертикальный авто-лейаут. Поставьте gap 16. Теперь нажмите Ctrl+D на любой карточке — новая встанет в ряд сама, с тем же отступом. Удалите одну — соседи сомкнутся. Вот это ощущение «оно само» и есть то, ради чего стоит перестать двигать пиксели.
Адаптив почти бесплатно
Самая недооценённая выгода авто-лейаута — он экономит вам вторую версию макета. Когда ширины заданы через fill, а не жёсткими числами, один и тот же экран разумно ведёт себя и на 1440, и на 768. Растяните фрейм формы — поля растянутся вместе с ним, кнопка останется по правому краю, отступы не поедут. Это не полноценный responsive за вас, но 80% рутинной подгонки исчезает: вам остаётся принять пару осознанных решений на узких ширинах, а не перевыравнивать всё заново.
Тот же принцип спасает на этапе правок от заказчика. «Сделайте карточки повыше», «добавьте бейдж над ценой», «поменяйте местами кнопки» — в жёсткой вёрстке каждая такая правка тянет за собой полдня равнения. В авто-лейауте вы меняете один параметр или перетаскиваете один элемент, и всё остальное встаёт на место само. Скорость правок — это то, что заказчик замечает сразу, даже если слова «Auto Layout» никогда не услышит.
Частые ошибки новичка
Две вещи сбивают всех в начале. Первая — путать fixed и hug: если кнопка не обнимает текст, а торчит пустотой, почти всегда у неё случайно стоит фиксированная ширина. Вторая — забывать про режим размера у родителя: контейнер тоже может быть hug или fill, и если лента «не тянется на всю ширину», проверьте сам фрейм, а не его детей. Разобравшись с этими двумя, вы перестанете драться с редактором.
Когда авто-лейаут мешает
Честно: не всё нужно заворачивать. Свободная композиция — иллюстрация, коллаж, артборд с произвольно раскиданными элементами — живёт без авто-лейаута, и это нормально. Правило простое: если элементы выстроены в ряд или колонку с повторяющимся ритмом — им место в авто-лейауте. Если это уникальная сцена — оставьте свободу.
Освоив это, вы естественно придёте к следующему шагу — компонентам и вариантам, где один авто-лейаут становится переиспользуемым кирпичом. А чтобы отступы и размеры не приходилось помнить наизусть, их стоит вынести в сетку из кратных значений. Но начните с малого: заверните в авто-лейаут одну карточку — и вы уже не захотите обратно.