![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-hero.png?authuser=5&hl=el)
状态栏和导航栏统称为“系统栏”。它们显示电池电量、时间和通知提醒等重要信息,并随时随地提供直接的设备互动。
无论您是在设计与 Android OS 互动的界面、输入法还是其他设备功能,都务必要考虑系统栏的显眼程度。将系统栏置于大多数层的顶部,以确保系统栏能够将其考虑在内。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-image-behind.png?authuser=5&hl=el)
断球数
在设计中添加系统栏,以将界面安全区域、系统互动、输入法、刘海屏和其他设备功能考虑在内。将系统栏置于最顶层,以确保系统栏能够将其考虑在内。
正确做法:将系统栏设置为透明,并以全屏模式将应用布局,在栏下方继续显示界面,以提供完整的无边框体验。
如果您无法将两个栏都设置为透明,请确保这些栏的颜色与应用正文的颜色一致。例如,将底部导航栏颜色与手势栏颜色进行匹配,并将顶部状态栏的颜色与正文颜色进行匹配。
图 2:确保系统栏颜色与应用的正文颜色一致 避免在手势边衬区下添加点按手势或拖动目标,否则会与无边框和手势导航冲突。
图 3:系统手势边衬区。避免将点按目标放在这些区域下方
在系统栏后面绘制内容
借助无边框功能,Android 可以在系统栏下方绘制界面,以提供沉浸感更强的体验。我们建议使用无边框,因为将导航栏设为透明是用户的常见请求。(了解如何支持无边框)。
应用可以通过响应边衬区来解决内容重叠问题。边衬区描述了需要填充多少内容,以避免与 Android OS 界面的某些部分(如导航栏或状态栏)或实际设备功能(如刘海屏)重叠。
在针对无边框用例进行设计时,请注意以下类型的边衬区:
- 系统栏边衬区适用于可点按且不应被系统栏遮挡的界面。
- 系统手势边衬区适用于系统使用的手势导航区域,这些区域的优先级高于应用。
状态栏
在 Android 中,状态栏包含通知图标和系统图标。用户可通过下拉状态栏来访问通知栏。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-status-bar-region-highlighted.png?authuser=5&hl=el)
状态栏的显示方式可能会因上下文、一天中的时间、用户设置的偏好设置或主题以及其他参数而异。您还可以设置状态栏样式,如以下示例所示。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-status-bar-light-dark-theme.png?authuser=5&hl=el)
由于要求采用无边框,请确保您的应用内容横跨整个屏幕。使用透明系统栏显示无边框内容,如以下示例所示。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-transparent-edge-to-edge.png?authuser=5&hl=el)
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-do-and-dont.png?authuser=5&hl=el)
收到通知时,状态栏中通常会出现一个图标。这会向用户表明抽屉式通知栏中有内容可看。这可以是代表频道的应用图标或符号。请参阅通知设计。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-notification-icon.png?authuser=5&hl=el)
设置状态栏样式
使用自定义颜色或样式以及设置透明度和不透明度,将状态栏背景设置为应用主题的一部分。
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
如果您要手动设置背景颜色,可以选择将状态栏内容的样式设为浅色或深色,以实现最佳对比度。
刘海屏和状态栏
刘海屏是某些设备上的一个区域,延伸到显示屏表面,以便为前置传感器提供空间。它可能会影响状态栏的外观。刘海屏可能因制造商而异。
了解如何支持刘海屏。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-display-cutouts.png?authuser=5&hl=el)
导航栏
Android 允许用户使用“返回”“主屏幕”和“概览”控件来控制导航:
- “返回”会直接返回到上一个视图。
- 主屏幕从应用转换到设备主屏幕。
- 概览 (Overview) 显示应用处于打开状态且最近打开过。
用户可以从各种导航栏配置中进行选择,包括手势导航(推荐)和“三按钮”导航。
手势导航
Android 10(API 级别 29)引入了手势导航,这是推荐的导航类型,不过您无法替换用户的偏好设置。手势导航不使用“返回”“主屏幕”和“概览”按钮,而是显示单个手势句柄,以提供相应功能。用户可以通过从屏幕左侧或右侧边缘向后/向前滑动来进行互动,也可以从底部向上滑动回到主屏幕。向上滑动并按住可打开概览。
手势导航是一种扩缩能力更强的导航模式,适用于移动设备和较大屏幕的设计。为了提供最佳用户体验,请通过以下方式考虑手势导航:
- 支持无边框内容。
- 避免在手势导航边衬区下添加互动或触摸目标。
了解如何实现手势导航。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-gesture-handle.png?authuser=5&hl=el)
三按钮导航
“三按钮”导航提供了三个按钮,分别用于返回、主屏幕和概览。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-3-button-nav.png?authuser=5&hl=el)
其他导航栏变体
用户或许可以使用其他导航栏配置,具体取决于 Android 版本和设备。例如,“双按钮”导航提供两个按钮,分别对应于“主屏幕”和“返回”。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-2-button-nav.png?authuser=5&hl=el)
设置导航样式
以下示例展示了如何实现导航样式。
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
在手势导航模式或按钮模式下,Android 会处理界面的所有视觉保护。
手势导航模式:系统会应用动态配色调整,在这种模式下,系统栏的内容会根据其背后的内容改变颜色。在以下示例中,如果导航栏中的手柄被放置在浅色内容上方,该手柄将变为深色,反之亦然。
图 13:动态配色 按钮模式:系统在系统栏后面使用半透明的纱罩(适用于 API 级别 29 或更高版本)或透明系统栏(适用于 API 级别 28 或更低级别)。
图 14:动态配色,其中系统栏根据其后的内容更改颜色
键盘和导航
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-on-screen-keyboard.png?authuser=5&hl=el)
每种导航类型都会对屏幕键盘做出相应反应,以允许用户执行操作,例如关闭甚至更改键盘类型。为确保顺利的键盘过渡,如需在键盘从屏幕底部上下滑动时同步应用转换,请使用 WindowInsetsAnimationCompat
。
沉浸模式
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-immersive-mode.png?authuser=5&hl=el)
如果您需要全屏体验,例如当用户观看电影时,可以隐藏系统栏。用户应该仍然能够点按以显示系统栏和界面,以便进行导航或与系统控件互动。详细了解如何针对全屏模式进行设计,或了解如何针对沉浸模式隐藏系统栏。