Дизайн от края до края

Приложение, работающее в режиме без полей, использует весь экран, размещая элементы интерфейса под системными строками.

Рисунок 1. Слева. Приложение, которое не поддерживает режим во весь экран. Справа. Приложение, которое поддерживает режим без полей.

Выводы

  • Чтобы контент отображался от края до края, нарисуйте фон и прокручиваемый контент под системными строками.
  • Не добавляйте жесты нажатия или перетаскивания в системные вставки, так как они конфликтуют с полноэкранным режимом и навигацией жестами.
Рисунок 2. Области для жестов выделены зеленым.

Отрисовывайте контент за системными строками

Функция "От края до края" позволяет размещать элементы интерфейса под системными строками, чтобы обеспечить эффект погружения.

Приложение может устранять перекрытия контента, реагируя на вставки. Отступы определяют, насколько нужно сдвинуть контент приложения, чтобы он не перекрывался системными строками или физическими элементами устройства, например вырезами на экране. Узнайте, как поддерживать полноэкранный режим и обрабатывать вставки в Compose и Views.

При разработке вариантов использования от края до края учитывайте следующие типы вставок:

  • Отступы системных строк применяются к элементам интерфейса, которые должны быть доступны для нажатия и не должны быть скрыты системными строками.
  • Отступы для системных жестов применяются к областям навигации жестами, используемым ОС, которые имеют приоритет над вашим приложением.
  • Отступы выреза на экране применяются к областям устройства, которые заходят на поверхность экрана, например к вырезу для камеры.

Особенности строки состояния

Основные рекомендации по дизайну системных строк приведены в статье Системные строки Android. В следующем разделе рассматриваются дополнительные соображения по поводу строки состояния.

Прокручиваемый контент

Верхние панели приложений должны сворачиваться при прокрутке. Узнайте, как свернуть верхнюю панель приложения Material 3. В Material 3 маленькие верхние панели приложений могут сворачиваться до высоты строки состояния или прокручиваться за пределы экрана. Средние и большие верхние панели приложений можно свернуть до меньшего размера. Ознакомьтесь с [руководством по Material Design][10].

Что следует делать

Если верхняя панель приложения закреплена, сверните ее до высоты строки состояния.

Что следует делать

Добавьте подходящий градиент цвета фона, если маленькая верхняя панель приложения не закреплена.

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

  • Положитесь на автоматическую защиту Material 3 TopAppBar при прокрутке, если применимо.
  • Создайте собственную composable-функцию градиента или используйте GradientProtection для представлений. Подробнее о том, как это сделать в Compose…
Рисунок 3. Области для жестов выделены зеленым.

Для адаптивных макетов убедитесь, что для панелей с разными цветами фона предусмотрены отдельные средства защиты.

Не надо

Иметь градиентную защиту, которая не соответствует фону каждой панели.

Что следует делать

Иметь градиентную защиту, соответствующую фону каждой панели.

Аналогично, панели навигации должны быть защищены отдельно от остальной части приложения.

Рисунок 4. Полупрозрачная строка состояния для панели навигации. На этом изображении показана защита строки состояния для панели навигации, но не для приложения.

Не используйте несколько способов защиты строки состояния одновременно, например встроенную защиту TopAppBar в Material 3 и собственную защиту.

Основные рекомендации по дизайну панели навигации можно найти в статье Системные строки Android. В следующем разделе приведены дополнительные рекомендации по работе с панелью навигации.

Прокручиваемый контент

[BottomAppBar][10] должен сворачиваться при прокрутке с помощью параметра scrollBehavior.

Что следует делать

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

Что следует делать

Оставьте навигацию жестами прозрачной и не добавляйте дополнительный полупрозрачный слой.

Однако [NavigationBar]11 остается видимым при прокрутке, поскольку у него нет параметра scrollBehavior.

Вырезы на экране

Вырезы на экране могут влиять на внешний вид интерфейса. Приложения должны обрабатывать вставки выреза на экране, чтобы важные части интерфейса не отображались под вырезом.

Что следует делать

Используйте отступы выреза на экране, чтобы важные элементы интерфейса не попадали в область выреза.

Не надо

Размещать важные элементы интерфейса у самого края экрана.

Однако сплошной фон панели приложения должен заходить в область выреза на экране, как показано на изображении ниже.

Рисунок 5. Сплошной фон панели приложения заходит на вырез на экране, а важные элементы интерфейса смещены.

Убедитесь, что горизонтальные карусели заходят на вырез на экране.

Рисунок 6. Горизонтальный экран от края до края, где карусель прокручивается через вырез на экране.

Подробнее о том, как поддерживать вырезы на экране в Compose…

Другие рекомендации

Как правило, фоны и разделительные линии также должны отображаться от края до края, а контент, например текст и кнопки, должен быть вставлен так, чтобы не перекрывать системный интерфейс и аппаратные элементы.