无边框设计

全面屏应用会利用整个屏幕，在系统栏下方绘制界面。

图 1.左图。非全面屏应用。右图。全面屏应用。

要点总结

  • 在系统栏下方绘制背景和滚动内容，以实现全面屏体验。
  • 避免在系统边衬区下方添加点按手势或拖动目标；这些手势或目标与全面屏和手势导航冲突。
图 2.应用，其中手势边衬区以绿色突出显示。

在系统栏后面绘制内容

借助全面屏功能，您可以在系统栏下方绘制界面，以获得沉浸式体验。

应用可以通过对 边衬区做出反应来解决内容重叠问题。边衬区描述了 应用内容需要填充多少，以避免与 系统栏或实体设备功能（例如刘海屏）重叠。了解如何在 Compose 和 View 中支持全面屏和处理边衬区。

在设计全面屏用例时，请注意以下类型的边衬区：

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

状态栏注意事项

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

滚动内容

顶部应用栏应在滚动时收起。了解如何收起 Material 3 TopAppBar。在 Material 3 中，小型顶部应用栏可以收起到状态栏高度或滚动到屏幕外。中型和大型顶部应用栏可以收起到较小的应用栏。请参阅 Material 指南。

正确做法

如果应用栏 是固定的，请将小型顶部应用栏收起到状态栏高度。

正确做法

如果小型顶部应用栏不是固定的，请添加匹配的背景颜色渐变。

当界面在状态栏下方滚动时，状态栏应为半透明，这样状态栏图标就不会显得杂乱。如需实现此目的，请先按照 LazyColumn 或 RecyclerView 文档中的步骤，使可滚动的界面实现全面屏显示。然后，通过执行以下任一操作，确保系统栏是半透明的：

  • 如果适用，请依赖 Material 3 TopAppBar 在 滚动时自动保护 。
  • 创建自定义渐变可组合项，或对 View 使用 GradientProtection。如需详细了解如何在 Compose 中执行此操作，请参阅系统栏 保护。
图 3.应用，其中手势边衬区以绿色突出显示。

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

错误做法

渐变保护与每个窗格的背景不匹配

正确做法

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

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

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

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

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

滚动内容

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

正确做法

当底部应用栏动画消失时，为三按钮导航添加系统栏遮罩层。

正确做法

保持手势导航透明，不要添加额外的遮罩层。

刘海屏

刘海屏可能会影响界面的外观。应用必须处理刘海屏边衬区，这样界面的重要部分就不会绘制在刘海屏下方。

正确做法

使用刘海屏边衬区插入关键界面。

错误做法

将关键界面放置在屏幕边缘。

不过，实心应用栏背景应绘制到刘海屏中，如下图所示。

图 5.实心应用栏背景绘制到刘海屏中，而重要界面则插入到刘海屏中。

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

图 6.全面屏水平显示，其中轮播界面在刘海屏中滚动。

了解如何在 Compose 和 View 中支持刘海屏。

其他指南

一般来说，背景和分隔线也应绘制到屏幕边缘，而文本和按钮等内容应插入到边衬区，以避开系统界面和硬件元素。