△ 折叠设备的三种常见姿态
与其他大屏幕设备一样 ， 我们需要多想想用户会怎样握持未折叠设备？如平板电脑 ， 部分屏幕区域难以用大拇指触及 ， 用户也很难腾出整只手来自由操控屏幕 。 用户轻易就能触及屏幕的底部角落 ， 但可能无法触及屏幕最顶端 ， 尤其是在竖屏模式下 。 这意味着如果您使用 Navigation rail 这类组件 ， 将导航按钮居中或固定在屏幕底部 ， 这会更便于用户的操作 。

文章图片

△ 大屏设备中的用户操作热区
同时 ， 我们还需要考虑铰链位置对交互的影响 。 铰链会带来明显的触觉差异 ， 甚至两个屏幕会存在物理分离 。 因此 ， 请您避免将按钮和其他重要操作项直接放在铰链区域 。 大多数设备上的铰链区域宽度约为 48 dp ， 在桌面模式下也请避免将界面元素放在铰链区域 ， 因为在这种设备模式下 ， 用户几乎无法使用该区域的任何功能 。

文章图片

△ 铰链区域
当设备从折叠模式转换到非折叠模式时 ， 有两种主要的技术方案可用于设计布局 。 第一种是扩大屏幕 ， 该方案采用了一种简单的响应式布局 ， 在该布局下应用会扩展内容并填充到屏幕上 。 通常情况下 ， 我们会根据前面提到的 Material 指南来扩展栏式网格:
https://m3.material.io/foundations/adaptive-design/foldables/compositions
第二种是增加另一个页面 ， 根据您构建的应用不同 ， 可以采用与列表 / 详情或者以另一个面板补充主面板功能相同的方案 。
△ 情境 1: 扩大屏幕 (图左) 情境 2: 增加页面 (图右)
在这两种情况下 ， 根据 material.io 的指南 ， 您需要创建一个平均分布在铰链区域两侧的八栏网格 ， 当添加 Navigation rail 等导航容器时 ， 屏幕起始侧会被压缩以容纳导航容器 。

文章图片

△ 平均分布在铰链两侧的八栏网格 (蓝背景)
适配示例
现在我们来看如何在运行期间利用好折叠状态 。 Jetpack Window Manager 库提供了相应的 API ， 可以检测应用窗口是否存在折叠 。 任何 Activity 都可以获得一个 WindowInfoRepository 实例 。 然后 ， 在 Started 和 Stopped 这两种生命周期状态之间 ， 我们可以安全地从窗口布局信息流中收集信息 。 每当流发射一个值时 ， 我们都可以检查 displayFeature ， 然后有针对性地寻找 FoldingFeature 。
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val windowInfoRepo = windowInfoRepository // 在 STARTED 和 STOPPED 这两种生命周期状态之间安全地从 windowInfoRepo 中收集数据 lifecycleScope.launch(Dispatchers.Main) { lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) { windowInfoRepo.windowLayoutInfo.collect { info -> for (feature in info.displayFeatures) { val fold = feature as? FoldingFeature ?: continue // 使用 FoldingFeature } } } } }
△ 识别折叠姿态
掌握了折叠姿态的相关信息后 ， 我们可以通过一些方法来查看设备是否处于前面提及的某种姿态 。 在书本模式下 ， 设备的状态为 HALF_OPENED ， 且其方向为 VERTICAL；在桌面模式下的状态为 HALF_OPENED ， 且其方向为 HORIZONTAL 。
// 书本模式是半打开的垂直折叠模式 fun FoldingFeature.isBookMode = state == FoldingFeature.State.HALF_OPENED && orientation == FoldingFeature.Orientation.VERTICAL // 桌面模式是半打开的水平折叠模式 fun FoldingFeature.isTableTopMode = state == FoldingFeature.State.HALF_OPENED && orientation == FoldingFeature.Orientation.HORIZONTAL