Auto Layout: кнопки и карточки без ручной подгонки

Пусть контейнер учитывает содержимое

Auto Layout помогает располагать элементы внутри фрейма по заданным правилам. Начните с кнопки, затем переходите к карточке и группе карточек. Так проще увидеть, за что отвечают промежутки и внутренние отступы.

Соберите кнопку и карточку

1. Выделите текст кнопки и добавьте Auto Layout. Можно использовать Shift + A.
2. Задайте внутренние отступы, заливку и скругление. Измените подпись и проверьте, как ведёт себя контейнер.
3. Для карточки создайте вертикальную последовательность: изображение, заголовок, описание и действие.
4. Настройте расстояние между элементами и их выравнивание.
5. Сравните фиксированный размер, Hug contents и Fill container там, где эти режимы доступны. Выбирайте их по задаче, а не одинаково для всех слоёв.

Auto Layout не заменяет решение дизайнера. Если текст не помещается, проверьте ширину контейнера, настройки дочерних элементов и реальные ограничения экрана.

Практическое задание

Создайте две кнопки с короткой и длинной подписью. Затем соберите три карточки услуг, у одной из которых описание вдвое длиннее. Исправьте композицию без перемещения каждого слоя вручную.

Проверьте себя

• Текст не выходит за фон кнопки.
• Внутренние отступы сохраняются при редактировании.
• Вы можете объяснить выбранное направление и размеры контейнера.
• Карточки остаются читаемыми с разным объёмом текста.