边到边应用通过在系统栏下方绘制界面来充分利用整个屏幕。
要点总结
- 在系统栏下方绘制背景和滚动内容,以实现无边框显示效果。
- 避免在系统边衬区下方添加点按手势或拖动目标;这些操作会与全面屏和手势导航发生冲突。
在系统栏后面绘制内容
借助全面屏功能,您可以在系统栏下方绘制界面,从而打造沉浸式体验。
应用可以通过对边衬区做出反应来解决内容重叠问题。边衬区用于描述应用内容需要填充多少内边距才能避免与系统栏或实体设备功能(例如刘海屏)重叠。了解如何在 Compose 和 View 中支持无边框设计并处理边衬区。
在设计全屏用例时,请注意以下类型的边衬区:
- 系统栏边衬区适用于可点按且不应被系统栏在视觉上遮挡的界面。
- 系统手势边衬区适用于操作系统使用的手势导航区域,这些区域的优先级高于您的应用。
- 刘海屏边衬区适用于延伸到显示屏表面的设备区域,例如摄像头刘海。
状态栏注意事项
如需查看基本的系统栏设计指南,请参阅 Android 系统栏。下一部分将讨论有关状态栏的其他注意事项。
滚动内容
顶部应用栏应在滚动时折叠。了解如何收起 Material 3 TopAppBar。
正确做法
正确做法
当界面在状态栏下方滚动时,状态栏应为半透明,这样状态栏图标就不会显得杂乱。为此,请先按照 LazyColumn 或 RecyclerView 文档中的步骤操作,使可滚动界面实现全屏显示。然后,执行以下操作之一,确保系统栏是半透明的:
- 如果适用,请在滚动时依赖 Material 3 TopAppBar 自动保护功能。
- 创建自定义渐变可组合项,或为 View 使用 GradientProtection。如需详细了解如何在 Compose 中执行此操作,请参阅系统栏保护。
对于自适应布局,请确保为具有不同背景色的窗格提供单独的保护。
错误做法
正确做法
同样,抽屉式导航栏也应与应用的其余部分分开保护。
请勿叠加状态栏保护措施,例如同时使用 Material 3 TopAppBar 内置保护措施和自定义保护措施。
导航栏注意事项
如需了解基本的导航栏设计指南,请参阅 Android 系统栏。 以下部分包含有关导航栏的其他注意事项。
滚动内容
底部应用栏应在滚动时收起。
正确做法
正确做法
刘海屏
刘海屏可能会影响界面的外观。应用必须处理刘海屏边衬区,以免界面中的重要部分绘制在刘海屏下方。
正确做法
错误做法
不过,纯色应用栏背景应绘制到显示屏刘海区域,如下图所示。
确保横向轮播界面绘制到刘海屏中。
其他指导
一般来说,背景和分隔线也应绘制到边缘,而文本和按钮等内容应内边距,以避开系统界面和硬件元素。