Автолейаут — это способ группировки n-ного количества элементов между собой, с сохранением одинаковых отступов внутри данной группы. Этот способ очень удобен для создания однотипных компонентов (различные карточки товаров, новостей, вакансий; сущности, в которых может меняться и ресайзиться контент) и дальнейшего объединения их в блоки.

Автолейауты бывают горизонтальные, вертикальные и с использованием перестроения на следующую строку. Они также отличаются по типу отступов. Бывают с положительным и отрицательным интервалом. Какой тип автолейаута необходим, зависит от решаемой задачи.

При хорошей прокачке скила, на автолейаутах можно собирать целые страницы, это очень удобно для дальнейшей замены, добавления новых блоков, а также в случае пересмотра структуры страницы.

Чтобы применить автолейаут к группе, необходимо нажать сочетание Shift+A. После чего в правой панели инструментов появятся окна его настройки:

• В верхнем правом углу будут указаны размеры по ширине и высоте автолейаута, а также настройки поведения элементов внутри данной группы. Всего есть три настройки: fixed, hug и fill. Эти настройки определяют свойства поведения объектов. Fixed — фиксированная ширина или высота контента (часто применяется для создания блоков одного размера), hug — контент внутри адаптируется под ширину/высоту, fill — контент заполняет все отведенное пространство внутри фрейма.

• Ниже блока с настройками свойств располагается панель настройки самой группы с автолейаутом. Здесь можно задать направление (вертикальное, горизонтальное, перенос на следующую строку) внутренний отступ между объектами, а также внешние отступы вокруг объектов (горизонтальные и вертикальные). Некоторым объектам можно присваивать абсолютное позиционирование. Данная настройка позволяет игнорировать правила автолейаута, но при этом объекты будут подчиняться установленным ограничениям (constraints).

• Также есть окошко в правой панели, позволяющее наглядно увидеть позиционирование и порядок расположения элементов в автолейауте.

Используем внутренние отступы в лейаутах, чтобы сократить количество вложенных слоёв.

При организации пространства в макетах важно начинать с внутренних компонентов и постепенно двигаться к внешним. Это помогает учитывать такие аспекты, как область клика, вариативность и завершённость компонента как самостоятельной единицы интерфейса. Кроме того, такой подход уменьшает количество слоёв и делает макет более удобным для работы и восприятия.

Например, задав внутренние отступы для блока Assets, мы можем избежать создания дополнительного вертикального лейаута с отступом 16, который в противном случае пришлось бы привязывать к верхним табам.