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