刘海屏是某些设备上延伸到显示屏表面的区域。它可以实现无边框体验,同时在设备正面为重要传感器提供空间。
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 中的窗口边衬区
- 图形修饰符
- 设置段落样式