Создавайте гибкий поток и ритм с помощью методов структуры и ограничения вашего контента.
1. Базовая структура
Чтобы приступить к созданию прочной структуры с последовательными ограждениями, добавьте в свои макеты поля и столбцы.
Поля задают отступы слева и справа от экрана и содержимого. Стандартное значение поля для компактного размера составляет 16 dp, но поля должны адаптироваться к размерам экранов большего размера. Содержимое и действия вашего приложения должны оставаться в пределах этих полей и соответствовать им.
На этом этапе вы также можете настроить безопасные зоны или вставки. Вставки системных панелей предотвращают попадание важных действий под системные панели. Подробнее см. в разделе «Размещение содержимого за системными панелями» .
Используйте столбцы для создания гибкой сетчатой структуры, обеспечивающей единообразное выравнивание, а также для обеспечения вертикальной четкости макета путем разделения контента в области основного текста. Контент размещается в областях экрана, содержащих столбцы. Эти столбцы структурируют макет, обеспечивая удобную структуру для размещения элементов.
Используйте сетку колонок для выравнивания контента по базовой сетке , сохраняя при этом гибкость в выборе размера. Сетка колонок может адаптироваться к различным форм-факторам, изменяя размеры и количество колонок в зависимости от размера экрана в определённые моменты, при этом позволяя масштабировать контент. Избегайте слишком детальной сетки колонок, именно для этого и предназначена базовая сетка: для обеспечения единообразных интервалов.
Будьте осторожны при создании сопутствующей сетки строк, поскольку она может ограничить горизонтальное масштабирование содержимого в зависимости от ориентации и форм-фактора; обычно установление правил отступов обеспечивает необходимую визуальную согласованность.
Начинаем добавлять текст в структуру макета. Поля защищают контент от краев экрана. Столбцы обеспечивают единообразие интервалов и выравнивания.
2. Применить меры сдерживания
Используйте сдерживание для визуальной группировки элементов.
Контейнирование подразумевает совместное использование свободного пространства и видимых элементов для создания визуальной группировки. Контейнер — это фигура, представляющая собой замкнутую область. В одном макете можно группировать элементы со схожим содержанием или функциональностью и отделять их от других элементов с помощью открытого пространства, типографики и разделителей.
Вы можете группировать похожие элементы вместе, используя белое пространство или видимое разделение, чтобы помочь пользователю ориентироваться в контенте.
Неявное сдерживание использует белое пространство для визуальной группировки контента с целью создания границ контейнера, в то время как явное сдерживание использует такие объекты, как разделительные линии и карточки, для группировки контента.
На следующем рисунке показан пример использования неявного ограничения для размещения заголовка и основного текста. Сетка столбцов используется для выравнивания и группировки. Выделенные элементы явно содержатся в карточках. Для лучшего визуального разделения используются иконография и иерархия шрифтов.
3. Позиционирование контента
В Android предусмотрено несколько способов обработки элементов контента в соответствующих контейнерах, которые помогают правильно их позиционировать, включая гравитацию, отступы и масштабирование.
Гравитация — это стандарт для размещения объекта в потенциально более крупном контейнере в особых случаях. На следующем рисунке показаны примеры размещения объектов: в начале и центре ( 1 ), вверху и по центру по горизонтали ( 2 ), внизу слева ( 3 ) и в конце и справа ( 1 ).
4. Масштабируемое содержание
Масштабирование критически важно для адаптации к динамическому контенту, ориентации устройства и размерам экрана. Элементы могут оставаться фиксированными или масштабироваться.
Важно учитывать, как изображения отображаются в своих контейнерах с учетом масштабирования и положения, чтобы гарантировать, что они будут выглядеть именно так, как вы хотите, независимо от контекста устройства. В противном случае основной фокус изображения может оказаться обрезанным, изображения могут оказаться слишком маленькими или слишком большими для макета, или возникнут другие нежелательные эффекты.
Неотмеченный контент может выглядеть иначе, чем вы ожидаете или хотите.
Закрепленный контент
Многие элементы имеют встроенные функции взаимодействия, прокрутки и позиционирования с помощью слотов или каркасов. Некоторые элементы можно модифицировать так, чтобы они оставались неподвижными, а не реагировали на прокрутку, например, плавающие кнопки действий (FAB), которые содержат критически важные действия.
Выравнивание
Используйте AlignmentLine для создания пользовательских линий выравнивания, которые родительские макеты могут использовать для выравнивания и позиционирования своих дочерних элементов.
Делать
Не
Компоновка компонентов
Компоненты Material 3 предоставляют собственные конфигурации и состояния для взаимодействия и контента.
Compose предоставляет удобные макеты для объединения компонентов материалов в общие шаблоны экранов. Компоновочные элементы, такие как Scaffold, предоставляют слоты для различных компонентов и других элементов экрана. Подробнее о компонентах материалов и макетах .