刘海屏是某些设备上延伸到显示屏表面的一个区域。它可以提供无边框体验,同时为设备正面的重要传感器提供空间。
Android 支持在搭载 Android 9(API 级别 28)及更高版本的设备上使用刘海屏。不过,设备制造商也可以在搭载 Android 8.1 或更低版本的设备上支持刘海屏。
本页介绍了如何在 Compose 中实现对有刘海屏的设备的支持,包括如何使用刘海区域,即显示屏上包含刘海屏的无边框矩形。
默认大小写
默认情况下,刘海屏包含在窗口边衬区信息中。因此,当您按照使应用无边框操作的指南操作时,您的应用不会在刘海屏区域中绘制。
例如,当您使用 Modifier.windowInsetsPadding(WindowInsets.safeContent)
或 Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
时,您的应用会自动不会在刘海屏的区域中绘制。WindowInsets.safeContent
和 WindowInsets.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 } } }
如需进一步自定义此行为,您需要自行处理刘海屏信息。
手动处理刘海屏信息
您可以通过以下任一方式处理刘海屏:
使用
android:windowLayoutInDisplayCutoutMode
在主题清单中进行设置使用
window.attributes.layoutInDisplayCutoutMode
以编程方式在Window
上设置选项使用
LocalView.current.rootWindowInsets.displayCutout
访问刘海屏Path
对象
对于 Compose,建议在整体主题中将 windowLayoutInDisplayCutoutMode
设置为 default
,然后利用 WindowInsets.displayCutout
处理可组合项中的边衬区:
Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) { drawRect(Color.Red, style = Stroke(2.dp.toPx())) }
此方法可让您在需要时遵循 displayCutout
内边距,或在不需要内边距时忽略它。
或者,您也可以应用 Views Cutout 文档中描述的相同设置,方法是将 activity 主题 android:windowLayoutInDisplayCutoutMode
设置为其他选项,或使用 window.attributes.layoutInDisplayCutoutMode =
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
设置窗口属性。不过,刘海模式随后会应用于整个 activity,无法按单个可组合项进行控制。
若要在某些可组合项(而非其他可组合项)中遵从刘海屏,请使用 WindowInset.displayCutout
。借助此 API,您可以根据需要访问刘海屏信息。
最佳实践
使用刘海屏时,请考虑以下事项:
- 请注意界面中关键元素的放置位置。不要让刘海区域遮盖任何重要的文本、控件或其他信息。
- 不要将任何需要精细触摸识别的互动元素放置或扩展到刘海区域。刘海区域的触摸灵敏度可能较低。
- 遵循无边框指南时,刘海屏信息包含在
safeDrawing
/safeContent
边衬区中。 - 请尽可能使用
Modifier.windowInsetsPadding(WindowInsets.safeDrawing)
确定要应用于内容的适当内边距。避免对状态栏高度进行硬编码,因为这可能会导致内容重叠或截断。
测试您的内容在刘海屏下的呈现效果
请务必测试应用的所有屏幕和体验。如果可能,请在具有不同类型刘海屏的设备上进行测试。如果您没有带刘海屏的设备,可以在搭载 Android 9 或更高版本的任何设备或模拟器上模拟常见的刘海屏配置,具体操作步骤如下:
- 启用开发者选项。
- 在开发者选项屏幕中,向下滚动到绘制部分,然后选择模拟刘海屏。
- 选择刘海屏类型。
为您推荐
- 注意:当 JavaScript 处于关闭状态时,系统会显示链接文字
- Compose 中的窗口边衬区
- 图形修饰符
- 设置段落样式