Строка состояния, строка заголовков и панель навигации — это системные панели . Они отображают важную информацию, такую как уровень заряда батареи, время и уведомления, и обеспечивают прямое взаимодействие с устройством из любого места.
При проектировании макетов, методов ввода или других возможностей устройства всегда учитывайте наличие и заметность системных панелей.
Основные выводы
Включите системные панели в макеты для разных размеров экрана и форм-факторов. Учитывайте безопасные зоны пользовательского интерфейса, взаимодействие с системой, методы ввода, вырезы в экране, строки состояния, строки подписей, панели навигации и другие возможности устройства.
Оставьте панели состояния системы и навигации прозрачными или полупрозрачными и размещайте контент за этими панелями так, чтобы он занимал всю площадь экрана.
Используйте
WindowInsetsдля корректной обработки вторжений системной панели и обеспечения того, чтобы ваш контент не был перекрыт в адаптивных макетах.Используйте канонические макеты , которые эффективно используют пространство экрана.
Строка состояния
Строка состояния содержит значки уведомлений и системные значки. Пользователь взаимодействует со строкой состояния, потянув её вниз, чтобы получить доступ к панели уведомлений. Строка состояния может быть прозрачной или полупрозрачной.
Значки строки состояния
Значки в строке состояния могут отображаться по-разному в зависимости от контекста, времени суток, пользовательских настроек или тем оформления, а также других параметров. Для получения дополнительной информации см. раздел «Значки в системной строке» .
Когда приходит уведомление, в строке состояния обычно появляется значок. Это сигнализирует пользователю о том, что в панели уведомлений есть что-то интересное. Это может быть значок вашего приложения или символ, представляющий канал. См. раздел «Дизайн уведомлений» .
Установить стиль строки состояния
Сделайте строку состояния прозрачной или полупрозрачной, чтобы содержимое вашего приложения занимало весь экран. Затем настройте стиль значков системной панели так, чтобы они имели правильный контраст.
В Android 15 функция отображения от края до края экрана по умолчанию делает строку состояния прозрачной. Для обеспечения обратной совместимости вызовите функцию enableEdgeToEdge() .
На изображении слева строка состояния прозрачна, а зеленый фон TopAppBar отображается за строкой состояния.
Прозрачные строки состояния идеально подходят, когда пользовательский интерфейс не отображается под строкой состояния или под ней отображается изображение. Полупрозрачные строки состояния идеально подходят, когда пользовательский интерфейс прокручивается под строкой состояния. Подробнее о защите градиента см. в разделе «Дизайн от края до края» .
Навигация
В Android пользователи могут управлять навигацией с помощью кнопок «Назад», «Домой» и «Обзор»:
- Назад возвращает к предыдущему виду.
- При переходе с приложения на главный экран устройства происходит плавный переход.
- В разделе «Обзор» отображаются активные приложения и недавно закрытые приложения.
Пользователи могут выбирать из различных конфигураций навигации, включая навигацию жестами и адаптивную навигацию. Для обеспечения оптимального пользовательского опыта необходимо учитывать несколько типов навигации.
Навигация с помощью жестов
В навигации с помощью жестов не используются кнопки «назад», «домой» и «обзор», вместо этого отображается единый манипулятор для управления жестами. Пользователи взаимодействуют, проводя пальцем от левого или правого края экрана, чтобы вернуться назад, и вверх от нижнего края, чтобы вернуться на главный экран. Проведение пальцем вверх и удержание открывает обзор.
Навигация с помощью жестов — это более масштабируемый шаблон навигации, подходящий для мобильных устройств и экранов больших размеров. Для обеспечения наилучшего пользовательского опыта учитывайте навигацию с помощью жестов, выполняя следующие действия:
- Поддержка контента от края до края.
- Избегайте добавления элементов взаимодействия или мишеней для касания во вставки навигации жестами.
Для получения дополнительной информации см. раздел «Добавление поддержки навигации жестами» .
Адаптивная навигация
Еще один распространенный способ навигации на Android — переключение между навигационной панелью и панелью навигации в зависимости от размера окна дисплея. Адаптивные компоненты навигации в Jetpack Compose поддерживают различные форм-факторы, при этом предотвращая конфликт системных панелей с расположением компонентов навигации.
При адаптивной компоновке следует учитывать, как панели инструментов могут вести себя или оформляться по-разному в различных контекстах, например, при компактных или расширенных размерах окон или в разных положениях при складывании.
Для получения дополнительной информации см. раздел «Создание адаптивной навигации» .
Значки навигации
Значки навигации также могут отображаться по-разному в зависимости от пользовательских настроек или тем оформления. Для получения дополнительной информации см. раздел «Значки системной панели» .
Задайте стиль навигации
Android обеспечивает визуальную защиту пользовательского интерфейса в режиме жестовой навигации и в кнопочном режиме. Система применяет динамическую адаптацию цвета, при которой содержимое системных панелей меняет цвет в зависимости от содержимого, находящегося за ними.
Режим навигации жестами
После выбора Android 15 или вызова метода enableEdgeToEdge для Activity система отрисовывает прозрачную панель навигации жестами и применяет динамическую адаптацию цвета. В следующем примере ползунок на панели навигации меняет цвет на темный, если он расположен над светлым содержимым, и наоборот.
Всегда рекомендуется использовать прозрачные панели навигации с помощью жестов.
Делать
Не
Режимы кнопок
После перехода на Android 15 или вызова enableEdgeToEdge для Activity система применяет полупрозрачную завесу за панелями навигации с кнопками, которую можно удалить, установив для параметра Window.setNavigationBarContrastEnforced() значение false.
Используйте прозрачные панели навигации с тремя кнопками, если есть нижняя панель приложения или нижняя панель навигации приложения, или если пользовательский интерфейс не прокручивается под панелью навигации с тремя кнопками. Чтобы получить прозрачную панель навигации, установите Window.setNavigationBarContrastEnforced() в значение false и добавьте отступы к нижним панелям приложений, чтобы они отображались под системными панелями навигации, как показано на рисунках 7, 8 и 9. Дополнительную информацию см. в разделе «Защита системной панели» .
Для прокрутки контента используйте полупрозрачную панель навигации с тремя кнопками. Более подробную информацию о выборе полупрозрачной панели навигации см. в разделе «Дизайн от края до края» .
Клавиатура и навигация
Каждый тип навигации соответствующим образом реагирует на экранную клавиатуру, позволяя пользователю выполнять такие действия, как закрытие или даже изменение типа клавиатуры. Для обеспечения плавного перехода, синхронизирующего переход приложения с перемещением клавиатуры вверх и вниз от нижнего края экрана, используйте WindowInsetsAnimationCompat .
Макеты
Адаптивные макеты оптимизируют доступное пространство на экране. Они упорядочивают пользовательский интерфейс приложения, перемещая контент во второстепенные или третьестепенные панели.
При разработке адаптивных макетов учитывайте взаимодействие системных панелей с контентом. Используйте WindowInsets , чтобы гарантировать, что ваш пользовательский интерфейс не будет перекрыт системными панелями на таких дисплеях, как большие экраны, складные устройства и окна приложений в многооконном и оконном режимах рабочего стола.
Когда ваше приложение отображается от края до края, убедитесь, что содержимое и элементы управления не перекрываются системным пользовательским интерфейсом. Например, если панель навигации закрывает кнопку, пользователь может не иметь возможности нажать на нее.
Для получения более подробной информации см. раздел «Канонические макеты» .
Вырезки для дисплея
Вырез в дисплее — это область на некоторых устройствах, которая выступает за пределы поверхности дисплея, обеспечивая пространство для фронтальных датчиков. Размеры вырезов в дисплее могут различаться в зависимости от производителя. Следует учитывать, как вырезы в дисплее будут взаимодействовать с контентом, ориентацией и расстоянием от края до края.
Иммерсивный режим
Вы можете скрыть системные панели, когда вам нужен полноэкранный режим, например, при просмотре фильма. Пользователь по-прежнему должен иметь возможность касаться экрана, чтобы отобразить системные панели, а также перемещаться по меню или взаимодействовать с элементами управления системы. Для получения дополнительной информации см. разделы «Иммерсивный контент» и «Скрытие системных панелей для иммерсивного режима» .