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

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

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

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

Вынос

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

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

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

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

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

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

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

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

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

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

Статус бар

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

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

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

Рисунок 5. Строка состояния в светлой и темной теме.

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

Рис. 6. Прозрачные полосы с использованием функции «от края до края» , идеально подходящие для того, чтобы ваш контент был виден, используя большую часть экранного пространства.


Рисунок 7. Настройте системные панели так, чтобы они улучшали контент или соответствовали фирменному оформлению вашего приложения. Не оставляйте системные панели с атрибутами по умолчанию.

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

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

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

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

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В следующем примере показано, как реализовать стиль навигации.

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

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

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

    Рисунок 13. Динамическая адаптация цвета.
  • Режимы кнопок : система применяет полупрозрачную сетку за системными панелями (для уровня API 29 или выше) или прозрачную системную панель (для уровня API 28 или ниже).

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

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

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

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

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

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

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