无边框设计

边到边应用会在系统栏下绘制界面,从而充分利用整个屏幕。

图 1. 左。应用采用非无边框设计。行。无边框应用。

要点总结

  • 在系统栏下方绘制背景和滚动内容,以实现边到边的体验。
  • 避免在系统内嵌下方添加点按手势或拖放目标;这些手势会与边到边导航和手势导航冲突。
图 2. 手势内嵌的应用突出显示为绿色。

在系统栏后面绘制内容

借助边到边功能,您可以在系统栏下绘制界面,从而打造沉浸式体验。

应用可以通过响应内边距来解决内容重叠问题。边衬区用于说明应用内容需要的内边距,以避免与系统栏或物理设备功能(例如显示屏缺口)重叠。了解如何在 ComposeView 中支持无边框设计并处理边衬区。

设计边到边用例时,请注意以下类型的内边距:

  • 系统栏边衬区适用于可点按且不应被系统栏遮挡的界面。
  • 系统手势内边距适用于操作系统使用的手势导航区域,这些区域的优先级高于您的应用。
  • 显示屏刘海屏内嵌适用于延伸到显示屏表面的设备区域,例如摄像头刘海屏。

状态栏注意事项

如需了解系统栏的基本设计指南,请参阅 Android 系统栏。以下部分将讨论其他状态栏注意事项。

滚动内容

顶部应用栏应在滚动时收起。了解如何收起 Material 3 TopAppBar。

如果应用栏固定,则将顶部应用栏收起到状态栏高度。
如果顶部应用栏不是固定的,请添加匹配的背景颜色渐变。

当界面滚动到下方时,状态栏应为半透明状态,以免状态栏图标看起来杂乱无序。为此,请先按照 LazyColumnRecyclerView 文档中的步骤操作,将可滚动界面设置为从边到边。然后,执行以下任一操作,确保系统栏是半透明的:

  • 滚动时依赖 Material 3 TopAppBar 自动保护功能(如果适用)。
  • 创建具有 60% 透明度的自定义可组合项,或对 View 使用 GradientProtection
图 3. 手势内嵌的应用突出显示为绿色。

对于自适应布局,请确保为具有不同背景颜色的窗格提供单独的保护。

渐变保护与每个窗格的背景不匹配
具有与每个窗格的背景相匹配的渐变保护。

同样,抽屉式导航栏也应与应用的其余部分分开保护。

图 4. 抽屉式导航栏的半透明状态栏。此图片显示了抽屉式导航栏的状态栏保护,但未显示应用的状态栏保护。

请勿堆叠状态栏保护,例如同时使用 Material 3 TopAppBar 内置保护和自定义保护。

如需了解导航栏的基本设计准则,请参阅 Android 系统栏。 以下部分包含其他导航栏注意事项。

滚动内容

底部应用栏应在滚动时收起。

在底部应用栏以动画效果消失时,为三按钮导航栏添加系统栏遮罩。
保持手势导航的透明度,不要添加额外的遮罩。

刘海屏

显示屏缺口可能会影响界面的外观。应用必须处理显示屏切口内嵌,以免界面的重要部分在显示屏切口下方绘制。

使用显示屏刘海内嵌重要界面。
将重要的界面放在屏幕边缘。

不过,纯色应用栏背景应绘制到显示屏切口中,如下图所示。

图 5. 实心应用栏背景绘制到显示屏切口中,而重要界面则内嵌。

确保横向轮播界面绘制到刘海屏中。

图 6. 边到边的横向显示屏,轮播界面会在显示屏刘海屏中滚动。

了解如何在 ComposeView 中支持刘海屏。

其他指南

一般来说,背景和分隔线也应从边到边绘制,而文本和按钮等内容应内嵌,以免遮挡系统界面和硬件元素。