锐客网

  1. 首页 > 科技 > >

谷歌发布安卓折叠屏手机应用设计规范( 四 )

oled渲染图三星galaxy a53超炫屏

如上代码所示，您可以通过代码控制滑动窗格，当用户从列表中选择一个项目，我们从 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 的任何布局控件，都可以当作容器来定位面板。如下图所示，我们考虑一件事，当过渡到小屏幕尺寸时，面板上的内容应该放在哪里。我们有许多可选方案，比如使用屏幕尾侧的侧边抽屉式导航栏，或者使用上滑式底部动作条，或者使用选项菜单，甚至可以将内容完全隐藏起来。
谷歌发布安卓折叠屏手机应用设计规范
文章插图

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

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

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

推荐阅读


上一篇：专利|OPPO 折叠屏手机外观专利获授权，可折叠两次

下一篇：智能手机|荣耀成为中国第三大智能手机品牌，成为增长最快的手机公司之一