规范布局

规范布局是经过验证、功能多样的布局,可在各种外形规格上提供最佳用户体验。

Depiction of large screen devices showing the canonical layouts.

规范布局支持小屏手机、平板电脑、折叠屏设备和 ChromeOS 设备。这些布局源自 Material Design 指南,兼具美观和功能性。

Android 框架包含专用组件,可使布局的实现变得简单可靠。

规范布局可创建引人入胜、提高工作效率的界面,是优秀应用的基础。

列表-详情

Wireframe of list-detail layout.

列表-详情布局让用户可以浏览具有描述性、解释性或其他补充信息(即项目详情)的项目列表。

该布局将应用窗口分成两个并排的面板:一个用于列表,一个用于详情。用户从列表中选择项目以显示项目详情。详情中的深层链接会在详情面板中显示更多内容。

宽屏显示(请参阅使用窗口尺寸类别)可同时容纳列表和详情。选择列表项目会更新详情面板以显示所选项目的相关内容。

中等和紧凑宽度显示会根据用户与应用的交互情况显示列表或详情。当只有列表可见时,选择列表项目会显示详情以替换列表。当只有详情可见时,按下返回按钮会重新显示列表。

设备方向更改或应用窗口尺寸更改等配置更改可能会改变显示器的窗口尺寸类别。列表-详情布局会相应地做出响应,并保留应用状态。

  • 如果显示列表和详情面板的宽屏显示器变窄到中等或紧凑宽度,详情面板会保持可见,列表面板会隐藏。
  • 如果中等或紧凑宽度显示器只有详情面板可见,并且窗口尺寸类别变宽到宽屏,则列表和详情会一起显示,并且列表会指示已选择与详情面板中内容对应的项目。
  • 如果中等或紧凑宽度显示器只有列表面板可见并变宽到宽屏,则列表和占位符详情面板会一起显示。

列表-详情非常适合消息应用、联系人管理器、文件浏览器或任何内容可以组织成项目列表以显示额外信息的应用。

图 1. 消息应用显示会话列表和所选会话的详情。

实现

Compose 的声明式范例支持窗口尺寸类别逻辑,该逻辑可确定是同时显示列表和详情面板(当宽度窗口尺寸类别为“扩展”时),还是仅显示列表或详情面板(当宽度窗口尺寸类别为“中等”或“紧凑”时)。

为确保单向数据流,请提升所有状态,包括当前窗口尺寸类别和所选列表项目的详情(如有),以便所有可组合项都能访问数据并正确渲染。

在小窗口尺寸上仅显示详情面板时,添加一个 BackHandler 以移除详情面板并仅显示列表面板。BackHandler 不属于整体应用导航的一部分,因为该处理程序取决于窗口尺寸类别和所选详情状态。

有关实现示例,请参阅使用 Compose 的列表-详情示例。

Feed

Wireframe of feed layout.

Feed 布局以可配置的网格排列等效内容元素,以便快速便捷地查看大量内容。

大小和位置建立了内容元素之间的关系。

通过使元素大小相同并将它们放置在一起,创建内容组。通过使元素大于附近元素来吸引对其的注意力。

卡片和列表是 Feed 布局的常见组件。

Feed 布局支持几乎任何尺寸的显示器,因为网格可以从单个滚动列适应到多列滚动内容 Feed。

Feed 特别适合新闻和社交媒体应用。

图 2. 社交媒体应用显示不同大小卡片中的帖子。

实现

Feed 由垂直滚动容器中的大量内容元素组成,这些元素以网格形式布局。Lazy 列表高效地在列或行中渲染大量项目。Lazy 网格在网格中渲染项目,支持配置项目大小和跨度。

根据可用的显示区域配置网格布局的列,以设置网格项目的最小允许宽度。定义网格项目时,调整列跨度以突出显示某些项目。

对于节标题、分隔线或其他旨在占据 Feed 完整宽度的项目,使用 maxLineSpan 来占据布局的完整宽度。

在没有足够空间显示多列的紧凑宽度显示器上,LazyVerticalGrid 的行为与 LazyColumn 完全一样。

有关实现示例,请参阅使用 Compose 的 Feed示例。

辅助面板

Wireframe of supporting pane layout.

辅助面板布局将应用内容组织到主显示区域和辅助显示区域。

主显示区域占据应用窗口的大部分(通常约三分之二),并包含主要内容。辅助显示区域是一个面板,占据应用窗口的剩余部分,并呈现支持主要内容的内容。

辅助面板布局在横向的宽屏显示器(请参阅使用窗口尺寸类别)上效果良好。如果内容可以适应较窄的显示空间,或者如果额外内容可以最初隐藏在可通过菜单或按钮等控件访问的底部或侧边工作表中,则中等或紧凑宽度显示器支持同时显示主显示区域和辅助显示区域。

辅助面板布局与列表-详情布局的不同之处在于主内容和辅助内容之间的关系。辅助面板内容仅与主内容相关联才有意义;例如,辅助面板工具窗口本身是无关紧要的。然而,列表-详情布局中详情面板的补充内容即使没有主内容也具有意义,例如产品列表中的产品描述。

辅助面板的用例包括:

  • 生产力应用:文档或电子表格,附有辅助面板中的审阅者评论
  • 媒体应用:流媒体视频,辅以辅助面板中相关视频的列表,或音乐专辑的描绘,辅以播放列表
  • 搜索和参考应用:查询输入表单,结果显示在辅助面板中
图 3. 购物应用,产品描述在辅助面板中。

实现

Compose 支持窗口尺寸类别逻辑,这使您能够确定是同时显示主内容和辅助内容,还是将辅助内容放置在替代位置。

提升所有状态,包括当前窗口尺寸类别以及与主内容和辅助内容中的数据相关的信息。

对于紧凑宽度显示器,将辅助内容放置在主内容下方或底部抽屉式菜单中。对于中等和扩展宽度,将辅助内容放置在主内容旁边,并根据内容和可用空间适当调整大小。对于中等宽度,将显示空间平均分配给主内容和辅助内容。对于扩展宽度,将 70% 的空间分配给主内容,30% 分配给辅助内容。

有关实现示例,请参阅使用 Compose 的辅助面板示例。

其他资源