Compose 中的刘海屏

刘海屏是某些设备上延伸到显示屏上的一个区域 。这样既能为用户提供全面屏体验,又能为设备正面的重要传感器留出空间。

竖屏模式下的刘海区域示例
图 1. 竖屏模式下的刘海屏示例
横屏模式下的刘海区域示例
图 2.横屏模式下的刘海区域示例

Android 在搭载 Android 9(API 级别 28)及更高版本的设备上支持刘海屏。不过,设备制造商也可以 搭载 Android 8.1 或更低版本的设备。

本页介绍了如何支持带刘海屏的设备: Compose,包括如何使用刘海区域(即无边框) 矩形。

默认情况

默认情况下,窗口内边信息中包含显示屏缺口。 因此,当您按照以下方式操作时,您的应用不会在刘海屏区域中绘制 请参阅关于如何设置应用的无边框指南。

例如,当您使用 Modifier.windowInsetsPadding(WindowInsets.safeContent)Modifier.windowInsetsPadding(WindowInsets.safeDrawing),您的应用 不会在有刘海屏的区域绘制。 WindowInsets.safeContentWindowInsets.safeDrawing 都包含刘海屏信息,但不会在设备刘海屏的位置绘制 。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}

如需进一步自定义此行为,您需要自行处理剪裁信息。

手动处理剪裁信息

您可以通过以下任一方式处理刘海屏:

对于 Compose,建议将 windowLayoutInDisplayCutoutMode 设置为 在您的整体主题中default,然后利用WindowInsets.displayCutout 处理可组合项中的边衬区:

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}

通过这种方法,您可以在需要时遵循 displayCutout 内边距,或在不需要时忽略它。

或者,您也可以采用与视图刘海屏相同的设置 请参阅文档中的说明, 将 activity 主题 android:windowLayoutInDisplayCutoutMode 关联到另一个 activity 主题 选项,或使用 window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT。不过,剪裁模式会应用于整个 activity,而无法按各个可组合项进行控制。

如需在某些可组合项中遵循显示屏缺口,但在其他可组合项中不遵循,请使用 WindowInset.displayCutout。您可以使用此 API 访问刘海屏 必要时。

最佳做法

使用刘海屏时,请考虑以下事项:

  • 请注意界面中关键元素的位置。不要让剪裁区域遮盖任何重要的文本、控件或其他信息。
  • 请勿将任何需要精细轻触识别的交互式元素放置或延伸到刘海区域。刘海区域中的轻触灵敏度可能要比其他区域低一些。
  • 如果遵循无边框指南,刘海屏信息会包含在 safeDrawing / safeContent 边衬区。
  • 请尽可能使用 Modifier.windowInsetsPadding(WindowInsets.safeDrawing) 来确定适合应用于内容的内边距。避免对状态栏高度进行硬编码,因为这样做可能会导致内容重叠或被切断。

使用刘海屏测试内容的呈现效果

请务必测试应用的所有屏幕和体验。在以下设备上测试: 制作不同类型的刘海屏如果您没有安装 刘海屏,您可以在任何设备或模拟器上模拟常见的刘海配置 运行 Android 9 或更高版本,请执行以下操作:

  1. 启用开发者选项
  2. 开发者选项界面中,向下滚动到绘制部分,然后选择模拟刘海屏
  3. 选择刘海类型。
    在模拟器中模拟刘海屏
    图 3. 使用开发者选项测试内容的呈现方式。