文章图片

△ SlidingPaneLayout 中空间分配结果
viewModel.selectedItemFlow.collect { item -> // 更新详情窗格的内容 detailPane.showItem(item) // 将详细信息窗格滑动到视图中 // 如果并排放置两个窗格 // 并不会产生实际效果 slidingPaneLayout.openPane }
如上代码所示 ， 您可以通过代码控制滑动窗格 ， 当用户从列表中选择一个项目 ， 我们从 ViewModel 的 Kotlin 流中接收到该项目 ， 然后更新详情窗格的内容 ， 并通过调用 openPane 将其滑入视图 。 在 Trackr 应用中效果如下图所示:

文章图片

关于如何使用 SlidingPaneLayout 实现双窗格布局的相关内容 ， 请参阅 Android 开发者网站: 创建双窗格布局 ， 该页面还介绍了其他内容 ， 例如集成系统返回按钮以实现侧滑回退窗格等 。
Trackr 应用
【谷歌发布安卓折叠屏手机应用设计规范】https://github.com/android/trackr
创建双窗格布局
https://developer.android.google.cn/guide/topics/ui/layout/twopane
信息流
我们可以通过信息流沉浸式地展示一个数据集 ， 因此 RecyclerView 是非常适合的选择 ， 我们可以通过改变 RecyclerView 使用的 LayoutManager 来改变其展现形式 。 LinearLayoutManager 适合用于较小型宽度 ， 但在中等宽度和展开型宽度场景下 ， 页面内容则会出现过度拉伸和变形的情况 ， 这时改用 GridLayoutManager ， 或 StaggeredGridLayoutManager 甚至 FlexBoxLayoutManager ， 可能会更合适 。

文章图片

△ 通过更换 RecyclerView 的 LayoutManager 来改变其展现形式
主页横幅
我们还可以改变单项布局 ， 使某些项比其他项更高或更宽 ， 以此凸显其重要性 ， 打造更有趣的视觉效果 。 在主页横幅布局中 ， 我们强调某个特定元素 ， 重新排布它周围的其他支持元素 。 当然我们有很多方法可以实现这一点 ， 但 ConstraintLayout 的灵活性最大 ， 因为它提供了很多种方式来约束子元素的尺寸 ， 以及相对于其他子元素的位置 。 在如下媒体类示例应用 ， 它的首图限制在 16:9 的宽高比内 ， 描述窗格占 60% 宽度 ， 剩余空间留给其他元素 。 约束条件可以改变甚至还可以用 MotionLayout 设置动画 ， 它是一个特殊的 ConstraintLayout 。

文章图片

△ 主页横幅示例
对于支持面板而言 ， 从 LinearLayout 到 ConstraintLayout 的任何布局控件 ， 都可以当作容器来定位面板 。 如下图所示 ， 我们考虑一件事 ， 当过渡到小屏幕尺寸时 ， 面板上的内容应该放在哪里 。 我们有许多可选方案 ， 比如使用屏幕尾侧的侧边抽屉式导航栏 ， 或者使用上滑式底部动作条 ， 或者使用选项菜单 ， 甚至可以将内容完全隐藏起来 。

文章图片

适配可折叠设备
可折叠设备不仅配备了更大的屏幕 ， 它们还可以根据设备的折叠方式和用户的使用方式调整设备的方向 / 姿势 。
目前有三种常见的设备形态: 折叠、未折叠和桌面模式 (悬停) 。 另外 ， 我们稍后也将看到其他理论上存在的状态 ， 例如书本模式 。

文章图片