沉浸式设计

沉浸式应用通过在系统栏下方绘制 UI 来利用整个屏幕。

图 1. 左图:未采用沉浸式设计的应用。右图:采用沉浸式设计的应用。

要点

  • 在系统栏下方绘制背景和滚动内容,以获得沉浸式体验。
  • 避免在系统内边距下方添加点按手势或拖动目标;这些会与沉浸式和手势导航发生冲突。
图 2. 突出显示绿色手势内边距的应用。

将您的内容绘制在系统栏后面

沉浸式功能可让您在系统栏下方绘制 UI,以获得沉浸式体验。

应用可以通过响应内边距来解决内容重叠问题。内边距描述了应用内容需要填充多少空间才能避免与系统栏或物理设备功能(如屏幕刘海)重叠。请阅读有关如何在 ComposeViews 中支持沉浸式并处理内边距的说明。

在设计沉浸式用例时,请注意以下内边距类型

  • 系统栏内边距适用于既可点按又不应被系统栏在视觉上遮挡的 UI。
  • 系统手势内边距适用于 OS 使用且优先于您的应用的手势导航区域。
  • 屏幕刘海内边距适用于延伸到显示屏表面的设备区域,例如相机刘海。

状态栏注意事项

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

滚动内容

顶层应用栏应在滚动时折叠。了解如何折叠 Material 3 TopAppBar。

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

当 UI 在下方滚动时,状态栏应该是半透明的,这样状态栏图标看起来才不会杂乱无章。为此,首先按照 LazyColumnRecyclerView 文档中的步骤,使可滚动 UI 变为沉浸式。然后,通过执行以下任一操作,确保系统栏是半透明的

  • 如果适用,依赖 Material 3 TopAppBar 在滚动时提供的自动保护。
  • 创建一个自定义渐变可组合项,或使用 GradientProtection 用于 Views。有关在 Compose 中执行此操作的更多信息,请参阅系统栏保护
图 3. 突出显示绿色手势内边距的应用。

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

使用与各窗格背景不匹配的渐变保护
使用与各窗格背景匹配的渐变保护。

同样,导航抽屉也应该与应用的其他部分有单独的保护。

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

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

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

滚动内容

底部应用栏应在滚动时折叠。

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

屏幕刘海

屏幕刘海可能会影响您的 UI 外观。应用必须处理屏幕刘海内边距,以便 UI 的重要部分不会绘制在屏幕刘海下方。

使用屏幕刘海内边距来内嵌重要的 UI。
将重要 UI 放置在屏幕的最边缘。

但是,实心应用栏背景应绘制到屏幕刘海中,如下图所示。

图 5. 实心应用栏背景绘制到屏幕刘海中,同时重要 UI 被内嵌。

确保水平轮播绘制到屏幕刘海中。

图 6. 沉浸式横向显示,轮播内容滚动穿过屏幕刘海。

阅读有关如何在 ComposeViews 中支持屏幕刘海的说明。

其他指南

一般来说,背景和分割线也应绘制到边缘,而文本和按钮等内容则应内嵌,以避开系统 UI 和硬件元素。