Направление, отступы и выравнивание

Направление, отступы и выравнивание — три ручки, которыми вы управляете потоком внутри авто-лейаута.

Освоив эти три настройки, вы соберёте 90% интерфейсных блоков: панели, списки, карточки, тулбары. Это рабочая лошадка.

В прошлом уроке мы включили авто-лейаут. Теперь разберём его настройки детально: как менять направление потока, задавать отступы по сторонам и выравнивать содержимое.

Направление потока

В секции авто-лейаута есть переключатель направления:

• Горизонтальное — элементы в ряд, слева направо.
• Вертикальное — элементы в колонку, сверху вниз.
• Wrap — элементы текут в ряд и переносятся на новую строку при нехватке места (об этом — отдельный урок).

Отступы по сторонам

Поле padding можно задать одним числом (одинаково со всех сторон) или раскрыть и задать каждую сторону отдельно: верх, право, низ, лево. Это удобно, когда, скажем, сверху нужно 24, а по бокам 16.

Выравнивание содержимого 3x3

Рядом с настройками есть сетка-квадрат 3x3 — это выравнивание дочерних элементов внутри фрейма. Кликая по точкам, вы прижимаете содержимое к нужному краю или центру.

Сетка выравнивания 3x3

  . . .        в-лево  в-центр  в-право
  . X .   ->   центр-лево  ЦЕНТР  центр-право
  . . .        низ-лево низ-центр низ-право

  пример: кнопка по центру фрейма = средняя точка

Распределение с автозазором

Если зазор выставить в режим Auto (иконка распределения), элементы прижмутся к краям, а свободное место распределится между ними. Так делают хедеры: логотип слева, меню справа.

Хедер с авто-зазором (space between)

  +---------------------------------------+
  | [Лого]                    [Меню][Вход]|
  +---------------------------------------+
   ^ gap: Auto распихивает по краям

Вертикальное выравнивание текста и иконок

Частая задача — выровнять иконку и текст по центру по вертикали в горизонтальном ряду. Решение: горизонтальный авто-лейаут плюс точка выравнивания «центр» в сетке 3x3. Тогда, даже если иконка 24px, а текст 16px, они встанут по общей средней линии. Это базовый паттерн любой кнопки, пункта меню или строки списка.

Если же нужно, чтобы текст прижимался к низу (например, подпись под крупной цифрой), переключите вертикальное выравнивание на нижнюю строку сетки. Эти мелочи выравнивания решают, выглядит блок собранным или разваленным.

Реальный пример: строка списка

Строка списка контактов (горизонтальный AL)

  +-----------------------------------------+
  | (●) -16- Имя Фамилия        -auto- [>]  |
  +-----------------------------------------+
   аватар   текст (Fill)         стрелка
   padding 16, выравнивание по центру 3x3

Здесь аватар фиксированный, текст в режиме Fill забирает всё свободное место, а стрелка прижата вправо благодаря Fill-распорке или авто-зазору. Поменяйте имя на длинное — строка не сломается, текст просто займёт доступную ширину. Это и есть сила авто-лейаута на практике.

Горячие клавиши

Частые ошибки

• Забывают про сетку 3x3. Если содержимое прижато не туда, проверьте точку выравнивания.
• Ставят зазор вручную там, где нужен space between. Для хедеров используйте режим Auto у зазора.
• Дублируют padding в каждом вложенном фрейме. Думайте про отступы системно, на нужном уровне.

Совет профи: думайте отступами системно

Отступы (padding) и зазоры (gap) — это не случайные числа, а часть системы. Заведите небольшую шкалу spacing: например 4 / 8 / 12 / 16 / 24 / 32 — и используйте только её значения. Тогда весь интерфейс будет дышать в едином ритме, а не вразнобой. Решите на каждом уровне вложенности, кто отвечает за отступ: обычно внешние поля задаёт padding фрейма, а расстояние между элементами — gap. Не дублируйте один и тот же отступ в нескольких местах. Позже эти значения станут number-переменными, и тогда плотность всего интерфейса можно будет менять централизованно. Системные отступы — невидимая основа, на которой держится ощущение качества и аккуратности продукта.

Чек-лист

• Переключаю горизонтальное и вертикальное направление.
• Задаю padding по сторонам раздельно.
• Выравниваю содержимое сеткой 3x3.
• Делаю space between через авто-зазор.

Итоги. Направление, отступы и выравнивание 3x3 — основные рычаги авто-лейаута. Плюс режим авто-зазора для распределения по краям. С ними вы собираете большинство блоков. Дальше — управление размерами дочерних элементов (resizing).