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