Android 系统栏

状态栏和导航栏统称为系统栏。它们会显示电池电量、时间和通知提醒等重要信息,并支持从任何位置直接与设备互动。

无论您是设计用于与 Android OS、输入法或其他设备功能进行交互的界面,都必须考虑系统栏的重要性。

图 1:系统栏后面的图片

要点总结

  • 在设计应用时,请添加系统栏。请考虑界面安全区域、系统互动、输入法、显示屏缺口、状态栏、字幕栏、导航栏和其他设备功能。

  • 将系统状态栏和导航栏保持透明或半透明状态,并在这些栏后面绘制内容以实现全屏显示。

  • 避免在手势内边距下添加点按手势或拖动目标;这些操作会与边到边和手势导航冲突。

    图 2:系统手势内边距。避免将点按目标放置在这些区域下方

在系统栏后面绘制内容

借助边到边功能,Android 可以在系统栏下绘制界面,从而提供沉浸式体验,这是用户的常见要求。

应用可以通过响应内边距来解决内容重叠问题。边衬区用于说明应用内容需要的内边距,以避免与 Android OS 界面的部分(例如导航栏或状态栏)或实体设备功能(例如显示屏缺口)重叠。了解如何在 ComposeView 中支持无边框设计并处理边衬区。

在针对边到边用例进行设计时,请注意以下类型的内边距:

  • 系统栏边衬区适用于可点按且不应被系统栏遮挡的界面。
  • 系统手势内边距适用于系统使用的手势导航区域,这些区域的优先级高于您的应用。

状态栏

在 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:沉浸式模式,在横向的移动设备上显示全屏体验

当您需要全屏体验时(例如当用户观看电影时),可以隐藏系统栏。用户仍应能够点按以显示系统栏和界面,以便导航或与系统控件互动。详细了解如何针对全屏模式进行设计,或了解如何隐藏系统栏以实现沉浸模式