无边框设计

边到边应用通过在系统栏下方绘制界面来充分利用整个屏幕。

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

要点总结

  • 在系统栏下方绘制背景和滚动内容,以实现无边框显示效果。
  • 避免在系统边衬区下方添加点按手势或拖动目标;这些操作会与全面屏和手势导航发生冲突。
图 2. 突出显示了手势边衬区的应用。

在系统栏后面绘制内容

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

应用可以通过对边衬区做出反应来解决内容重叠问题。边衬区用于描述应用内容需要填充多少内边距才能避免与系统栏或实体设备功能(例如刘海屏)重叠。了解如何在 ComposeView 中支持无边框设计并处理边衬区。

在设计全屏用例时,请注意以下类型的边衬区:

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

状态栏注意事项

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

滚动内容

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

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

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

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

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

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

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

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

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

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

滚动内容

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

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

刘海屏

刘海屏可能会影响界面的外观。应用必须处理刘海屏边衬区,以免界面中的重要部分绘制在刘海屏下方。

使用刘海屏边衬区嵌入关键界面。
将关键界面放置在屏幕边缘。

不过,纯色应用栏背景应绘制到显示屏刘海区域,如下图所示。

图 5. 纯色应用栏背景会绘制到刘海屏区域,而重要的界面会进行内边距设置。

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

图 6. 从边缘到边缘的横向显示,轮播界面会滚动浏览刘海屏。

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

其他指导

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