Системные панели Android

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

Крайне важно учитывать значимость системных панелей, разрабатываете ли вы пользовательский интерфейс для взаимодействия с ОС Android, методы ввода или другие возможности устройства.

Рисунок 1. Изображения за системными панелями

Вынос

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

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

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

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

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

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

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

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

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

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

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

Рис. 3. Область строки состояния, выделенная в верхней части верхней панели приложения.

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

Рис. 4. Значки строки состояния в светлой и темной теме.

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

Рисунок 5. Безрамочное приложение с прозрачными системными панелями идеально подходит для того, чтобы ваш контент был виден, используя большую часть экранного пространства.

В Android 15 применяется сквозное изображение, поэтому системные панели по умолчанию прозрачны или полупрозрачны. В более ранних версиях Android не оставляйте системные панели непрозрачными.

Рисунок 6. Используйте все возможности для улучшения контента. Не используйте непрозрачные системные панели.

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

Рисунок 7. Значок уведомления в строке состояния.

Установите стиль строки состояния

Убедитесь, что строка состояния прозрачна во всех версиях, вызвав enableEdgeToEdge() . Обязательно обновите цвета значков строки состояния для контрастности. Например, чтобы создать темные значки:

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

Вырезы дисплея и строка состояния

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

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

Рис. 8. Примеры вырезов дисплея.

Android позволяет пользователям управлять навигацией с помощью элементов управления «Назад», «Домой» и «Обзор»:

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

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

Навигация с помощью жестов

Навигация с помощью жестов, представленная в Android 10 (уровень API 29), является рекомендуемым типом навигации, хотя вы не можете переопределить предпочтения пользователя. В навигации с помощью жестов не используются кнопки «Назад», «Домой» и «Обзор», вместо этого для удобства отображается один дескриптор жеста. Пользователи взаимодействуют, проводя пальцем от левого или правого края экрана, чтобы вернуться назад, и вверх снизу, чтобы вернуться домой. Смахивание вверх и удерживание открывает обзор.

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

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

Прочтите о реализации навигации с помощью жестов .

Рис. 9. Панель навигации с помощью жестов.

Трехкнопочная навигация

Трехкнопочная навигация обеспечивает три кнопки: «Назад», «Домой» и «Обзор».

Рисунок 10: Трехкнопочная панель навигации.

Другие варианты панели навигации

В зависимости от версии Android и устройства вашим пользователям могут быть доступны другие конфигурации панели навигации. Например, двухкнопочная навигация предоставляет две кнопки: «Домой» и «Назад».

Рис. 11. Двухкнопочная панель навигации.

Установить стиль навигации

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

На устройствах Android 15 и более поздних версий или после вызова enableEdgeToEdge() навигация с помощью жестов по умолчанию прозрачна. Трехкнопочная навигация по умолчанию полупрозрачна или непрозрачна, если она находится внутри панели задач на устройстве с большим экраном.

Если в вашем приложении есть нижняя панель приложения, задайте для Window.setNavigationBarContrastEnforced() значение false , чтобы нижняя панель приложения могла отображаться под панелью навигации системы без применения полупрозрачного экрана при трехкнопочной навигации.

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

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

    Рисунок 12. Динамическая адаптация цвета.
  • Режимы кнопок : система применяет полупрозрачную сетку за панелями навигации по кнопкам, которую можно удалить, установив для Window.setNavigationBarContrastEnforced() значение false .

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

Клавиатура и навигация

Рис. 14. Экранная клавиатура с панелями навигации.

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

Режим погружения

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

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