Создайте гибкий поток и ритм со структурой и методами сдерживания для вашего контента. Сначала создайте контейнеры макета, а затем добавьте контент.
1. Базовая структура: сетка макета для размещения контента
Чтобы создать прочную структуру с последовательными ограждениями, добавьте поля и столбцы в макеты.
Поля обеспечивают расстояние между левым и правым краями экрана и контентом. Стандартное значение полей для компактного размера составляет 16 dp, но поля должны адаптироваться к большим экранам. Основной контент и действия в приложении должны находиться в пределах этих полей и быть выровнены по ним.
На этом этапе вы также можете задать безопасные зоны или отступы. Отступы системных строк предотвращают попадание важных действий под системные строки. Контент должен отображаться за системными строками.
Используйте столбцы, чтобы создать гибкую сетку для выравнивания и разделить контент в основной области. Контент размещается в областях экрана, содержащих столбцы. Эти столбцы придают структуру вашему макету, обеспечивая удобную структуру для расположения элементов.
Важность контента или иерархия могут помочь определить тип сетки макета, чтобы придать больше структуры. Если у вашего контента есть четкая иерархия, подойдет иерархическая сетка макета, например макет редактора или экран сведений с большим заголовком и ключевым изображением.
Модульная сетка хорошо подходит для одинаково важного, но очень структурированного контента и макета, например фотогалереи.
Выберите сетку столбцов для последовательно адаптивных однонаправленных макетов или когда вам нужна большая гибкость.
Независимо от типа, сетка макета также должна адаптироваться к размерам и форм-факторам.
В этом примере используется сетка столбцов, чтобы выровнять контент по базовой сетке, сохраняя при этом гибкость размеров. Чтобы адаптироваться к различным форм-факторам, сетка столбцов изменяет размер столбца и количество столбцов в зависимости от размера экрана, что также позволяет масштабировать контент. Избегайте слишком детальной сетки макета. Вместо этого используйте базовую сетку, чтобы обеспечить согласованные единицы интервалов.
Начало добавления текста в структуру макета. Поля защищают контент от краев экрана. Столбцы обеспечивают согласованную структуру интервалов и выравнивания.
В качестве альтернативы используйте иерархическую сетку макета, чтобы упорядочить экран сведений.
Начните с согласованной сетки макета. Если этого требует контент, сетку можно нарушить. Но даже в этом случае вы можете обнаружить, что другая сетка лучше подходит для вашего контента.
Подробнее о контейнерах макетов, таких как пейджеры и макеты потока.
Рукопись и кладка – это другие типы сеток макета.
Какую бы сетку макета вы ни выбрали, вы также можете использовать концепцию контейнеров панелей для группировки контента для адаптивных макетов. Например, в качестве примера используется экран с подробными сведениями, одна панель, которая может быть показана в макете со списком и подробными сведениями.
2. Применить ограничение
Используйте контейнеры, чтобы визуально группировать элементы.
Ограничение – это использование пробелов и видимых элементов для создания визуальной группы. Контейнер – это фигура, представляющая собой замкнутую область. В одном макете вы можете сгруппировать элементы, которые имеют схожее содержимое или функциональность, и отделить их от других элементов, используя открытое пространство, типографику и разделители.
Android использует строки, столбцы и поля в качестве строительных блоков, поэтому вы можете проектировать сдерживание аналогичным образом. Группируйте похожие элементы вместе с пробелами или видимым разделением, чтобы помочь вам ориентироваться в контенте.
Неявное ограничение использует пробелы для визуальной группировки контента для создания границ контейнера, в то время как явное ограничение использует такие объекты, как разделительные линии и карточки, для группировки контента.
На рисунке ниже показан пример использования неявного контейнера для заголовка и основного текста. Сетка столбцов используется для выравнивания и создания группировок. Выделенные фрагменты явно содержатся в карточках. Использование иконографии и иерархии типов для большего визуального разделения.
3. Позиция контента
После выбора сетки макета и размещения контента в контейнерах Android предлагает различные способы обработки элементов контента и их позиционирования с помощью базовых строительных блоков и модификаторов или контейнеров макета, таких как сетка и flexbox.
Подумайте, является ли ваш контент одномерным или двумерным. Например, контент может прокручиваться по горизонтали, по вертикали или в обоих направлениях.
Как показано на рисунке ниже, в макете аутентификации можно использовать двухмерную сетку.
Элементы пользовательского интерфейса также могут изгибаться и перетекать в одном измерении, например фильтры или теги контента. Подробнее о Flexbox…
В макетах также можно использовать комбинацию типов макетов. Например, можно сочетать карусель или горизонтальную прокрутку с вертикальными карточками. Или вы можете представить пользовательскую диаграмму с данными вертикального списка.
Вы можете представить контент в виде прокручиваемых строк или столбцов с помощью LazyRow и LazyColumn.
Выравнивание
Как и в случае с направлением и выравниванием авторазметки, вы можете указать расположение и выравнивание элементов интерфейса.
Используйте AlignmentLine, чтобы создавать собственные линии выравнивания, которые родительские макеты могут использовать для выравнивания и позиционирования своих дочерних элементов.
Что следует делать
Чего делать нельзя
4. Масштабирование и кадрирование контента
Масштабирование имеет решающее значение для размещения динамического контента, ориентации устройства и размеров экрана. Элементы могут оставаться фиксированными или масштабироваться.
Укажите, как изображения должны масштабироваться и размещаться в контейнерах, чтобы они правильно отображались на любом устройстве. В противном случае основной объект на изображении может быть обрезан, а само изображение может оказаться слишком маленьким или слишком большим для макета.
Учитывайте разные соотношения сторон и ориентации устройств, используя подходящее масштабирование и кадрирование. Поскольку соотношения сторон могут значительно различаться, укажите, как ваш контент обрабатывает эти сценарии.
Например, главное изображение во всю ширину занимает весь экран телефона в горизонтальной ориентации.
Что следует делать
Чего делать нельзя
Если соотношение сторон должно быть сохранено, например для вертикального видео, ограничьте его и сбалансируйте пустое пространство.
Чего делать нельзя
Закрепленный контент
Многие компоненты имеют встроенные взаимодействия, прокрутку и позиционирование с помощью слотов или каркасов, например панели приложений. Некоторые элементы можно изменить, чтобы они оставались фиксированными, а не реагировали на прокрутку, например плавающие кнопки действий (FAB), в которых размещаются критические действия. Закрепляйте элементы, чтобы лучше фокусироваться на них в определенных сценариях. Например, закрепите поле ввода текста на клавиатуре, чтобы оно не скрывалось.
Для ввода текста, например сообщений и аутентификации, ввод прикрепляется к клавиатуре и получает единственный фокус.
Компоненты в макете
Компоненты Material 3 имеют собственные конфигурации и состояния для взаимодействия и контента.
Compose предоставляет удобные макеты для объединения компонентов Material в общие шаблоны экрана. Такие composable-функции, как Scaffold, предоставляют слоты для различных компонентов и других элементов экрана. Подробнее о компонентах и макетах Material Design…