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

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

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

Выводы

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

Как отрисовывать контент за системными строками

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

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

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

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

Строка состояния

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

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

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

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

Свернуть небольшую верхнюю панель приложения до высоты строки состояния, если панель приложения закреплена.

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

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

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

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

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

Не следует

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

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

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

Аналогичным образом следует защитить и панель навигации.

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

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

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

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

Нижние панели приложений должны сворачиваться при прокрутке.

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

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

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

Не добавляйте дополнительный экран, чтобы не мешать навигации жестами.

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

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

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

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

Не следует

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

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

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

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

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

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

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

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