信息流
我们可以通过信息流沉浸式地展示一个数据集,因此 RecyclerView 是非常适合的选择,我们可以通过改变 RecyclerView 使用的 LayoutManager 来改变其展现形式。LinearLayoutManager 适合用于较小型宽度,但在中等宽度和展开型宽度场景下,页面内容则会出现过度拉伸和变形的情况,这时改用 GridLayoutManager,或 StaggeredGridLayoutManager 甚至 FlexBoxLayoutManager,可能会更合适。
△ 通过更换 RecyclerView 的 LayoutManager 来改变其展现形式
主页横幅
我们还可以改变单项布局,使某些项比其他项更高或更宽,以此凸显其重要性,打造更有趣的视觉效果。在主页横幅布局中,我们强调某个特定元素,重新排布它周围的其他支持元素。当然我们有很多方法可以实现这一点,但 ConstraintLayout 的灵活性最大,因为它提供了很多种方式来约束子元素的尺寸,以及相对于其他子元素的位置。在如下媒体类示例应用,它的首图限制在 16:9 的宽高比内,描述窗格占 60% 宽度,剩余空间留给其他元素。约束条件可以改变甚至还可以用 MotionLayout 设置动画,它是一个特殊的 ConstraintLayout。
△ 主页横幅示例
对于支持面板而言,从 LinearLayout 到 ConstraintLayout 的任何布局控件,都可以当作容器来定位面板。如下图所示,我们考虑一件事,当过渡到小屏幕尺寸时,面板上的内容应该放在哪里。我们有许多可选方案,比如使用屏幕尾侧的侧边抽屉式导航栏,或者使用上滑式底部动作条,或者使用选项菜单,甚至可以将内容完全隐藏起来。
适配可折叠设备可折叠设备不仅配备了更大的屏幕,它们还可以根据设备的折叠方式和用户的使用方式调整设备的方向 / 姿势。
目前有三种常见的设备形态: 折叠、未折叠和桌面模式 (悬停)。另外,我们稍后也将看到其他理论上存在的状态,例如书本模式。
△ 折叠设备的三种常见姿态
与其他大屏幕设备一样,我们需要多想想用户会怎样握持未折叠设备?如平板电脑,部分屏幕区域难以用大拇指触及,用户也很难腾出整只手来自由操控屏幕。用户轻易就能触及屏幕的底部角落,但可能无法触及屏幕最顶端,尤其是在竖屏模式下。这意味着如果您使用 Navigation rail 这类组件,将导航按钮居中或固定在屏幕底部,这会更便于用户的操作。
△ 大屏设备中的用户操作热区
同时,我们还需要考虑铰链位置对交互的影响。铰链会带来明显的触觉差异,甚至两个屏幕会存在物理分离。因此,请您避免将按钮和其他重要操作项直接放在铰链区域。大多数设备上的铰链区域宽度约为 48 dp,在桌面模式下也请避免将界面元素放在铰链区域,因为在这种设备模式下,用户几乎无法使用该区域的任何功能。
△ 铰链区域
当设备从折叠模式转换到非折叠模式时,有两种主要的技术方案可用于设计布局。第一种是扩大屏幕,该方案采用了一种简单的响应式布局,在该布局下应用会扩展内容并填充到屏幕上。通常情况下,我们会根据前面提到的 Material 指南来扩展栏式网格:
https://m3.material.io/foundations/adaptive-design/foldables/compositions第二种是增加另一个页面,根据您构建的应用不同,可以采用与列表 / 详情或者以另一个面板补充主面板功能相同的方案。
△ 情境 1: 扩大屏幕 (图左) 情境 2: 增加页面 (图右)
在这两种情况下,根据 material.io 的指南,您需要创建一个平均分布在铰链区域两侧的八栏网格,当添加 Navigation rail 等导航容器时,屏幕起始侧会被压缩以容纳导航容器。
△ 平均分布在铰链两侧的八栏网格 (蓝背景)