Карточка состоит из отношений
Представим заголовок, описание и кнопку внутри прямоугольного блока. Между соседними элементами есть промежутки, а между содержимым и внешней границей — внутренние отступы. Это разные параметры. Вертикальное направление означает, что части следуют одна под другой. Если описание становится выше, следующая часть должна переместиться вместе с ним, сохранив договорённое расстояние. Такая логика важнее конкретных координат исходного макета. Полезно заранее решить, какие элементы обязательны и что произойдёт при отсутствии описания. Тогда пустое место не будет случайным следствием скрытого слоя или ручного смещения.
Кто определяет размер
В Auto layout режим Hug contents связывает размер контейнера с его содержимым и отступами. Fill container позволяет вложенному элементу занять доступное пространство родительского контейнера, а Fixed задаёт фиксированный размер по выбранной оси. Ширину и высоту рассматривают отдельно. Например, карточка может иметь заданную ширину и высоту по содержимому, а текст — переноситься внутри доступной ширины. Важно понимать направление зависимости: нельзя рассчитывать, что родитель одновременно свободно измеряет ширину по ребёнку, а ребёнок независимо заполняет ещё не определённую ширину родителя. Выбор режима должен соответствовать понятному правилу, а не случайному удачному виду.
Проверять неудобное содержимое
Короткий заголовок скрывает многие проблемы. Для проверки полезны длинное название, описание из нескольких строк, отсутствие необязательной части и более узкая карточка. Нужно смотреть, сохраняется ли порядок, не перекрывается ли текст и остаётся ли кнопка понятной. При этом Auto layout не выбирает за дизайнера смысловую иерархию, читаемый размер шрифта или подходящие слова. Он помогает выразить расположение, но сам по себе не доказывает удобство интерфейса. После технической проверки стоит вернуться к задаче человека: какая информация нужна первой, какое действие предлагается и хватает ли сведений для осмысленного выбора.
Попробуйте на практике
Составьте бумажную схему карточки события и проверьте четыре варианта содержимого. Figma можно использовать дополнительно, если она уже доступна, но регистрация для задания не нужна.
- Нарисуйте карточку с заголовком, описанием и кнопкой. Обозначьте вертикальное направление, одинаковые боковые отступы и промежутки между частями.
- Запишите правило размеров: ширина карточки задана, высота зависит от содержимого, текст переносится. Для каждого элемента укажите, от чего зависит его размер.
- Сделайте второй вариант с заголовком в две строки и более длинным описанием. Переместите последующие элементы по записанным правилам, сохранив промежутки.
- Проверьте ещё два случая: карточка стала уже и описание отсутствует. Укажите, какое пространство должно исчезнуть вместе с необязательной частью.
- Сравните варианты по порядку чтения, отсутствию пересечений и понятности действия. Отдельно отметьте решение, которое зависит от смысла, а не от настройки расположения.
Как проверить результат. Схема готова, если каждое изменение объясняется правилом, текст не перекрывает соседей и карточка сохраняет понятную последовательность. Успешная проверка четырёх случаев не означает, что предусмотрены все возможные размеры и состояния.
Частые вопросы
Нужно ли применять Auto layout ко всему?
Нет. Важно понимать назначение элемента и ожидаемое поведение. Для группы с последовательным расположением он полезен, но декоративная композиция может требовать другой организации.
Почему макет нужно проверять с длинным текстом?
Реальное содержимое редко совпадает по длине с удобным примером. Длинные подписи помогают обнаружить зависимость от случайных размеров и уточнить правила до передачи макета в разработку.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.