Безрамочный дизайн

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

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

Основные выводы

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

Размещайте свой контент за системными панелями

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

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

При проектировании сценариев использования, охватывающих всю поверхность экрана, следует учитывать следующие типы вставок:

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

Вопросы, касающиеся строки состояния

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

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

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

Делать

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

Делать

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

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

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

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

Не

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

Делать

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

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

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

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

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

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

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

Делать

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

Делать

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

Вырезки для дисплея

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

Делать

Встраивание критически важных элементов пользовательского интерфейса с помощью вырезов в экранах.

Не

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

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

Рисунок 5. Фоновые изображения панели приложений, выполненные в сплошном цвете, встраиваются в вырез на экране, в то время как важные элементы пользовательского интерфейса остаются внутри.

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

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

Узнайте, как поддерживать вырезы на экране в Compose и Views .

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

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