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

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

Рисунок 1. Слева. Приложение, которое не является безграничным. Верно. Приложение, которое работает от края до края.

Вынос

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

Нарисуйте свой контент за системными панелями

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

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

При разработке сценариев использования от края до края помните о следующих типах вставок:

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

Рекомендации по строке состояния

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

Прокрутка контента

Верхние панели приложений должны сворачиваться при прокрутке. Узнайте, как свернуть TopAppBar Материала 3.

Делать

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

Делать

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

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

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

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

Не

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

Делать

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

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

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

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

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

Прокрутка контента

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

Делать

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

Делать

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

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

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

Делать

Вставьте критический пользовательский интерфейс, используя вставки вырезов дисплея.

Не

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

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

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

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

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

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

Другое руководство

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