常见布局

使用常用布局来帮助您针对常见使用场景和屏幕尺寸布局应用。 这些现成的合成效果是不错的起点。

常见布局

“列表-详情”布局

借助列表-详情布局,用户可以浏览包含描述性、解释性或其他补充信息(即“项详情”)的项列表。 对于较小尺寸的屏幕,只能看到列表视图或详情视图。列表以基于行的布局显示内容集合,是应用中最常见的布局形式。列表-详情布局非常适合即时通讯应用、通讯录管理器、文件浏览器或内容可整理为项列表(用于显示额外信息)的任何应用。

内容可以是静态的,也可以是动态的。

  • 动态内容是指您的应用即时提供的内容,非常适合用于显示用户生成的内容或反映用户的偏好或操作。例如,假设有一个照片应用,其中包含一个可滚动显示用户生成的照片的列表,该列表对于每个用户都是唯一的,并且会随着用户上传更多图片而发生变化。这些图片属于动态内容。
  • 静态内容表示硬编码的内容,只能通过直接更改应用的代码来修改。静态内容的示例包括每位用户都可能会看到的图片和文字。

Now in Android Figma 文件提供了多个布局示例。以下示例展示了一维内容集合。

一维内容集合

如需获取有关列表组件和规范的更多设计指南,请探索 Material 3 列表

超大屏幕上的列表-详情
超大屏幕上的“列表-详情”布局。

Feed 布局

Feed 布局能够以可配置网格的形式排列等效的内容元素,以便用户快速、方便地查看大量内容。详细了解有关在集合中使用卡片的 Material 3 准则。 Feed 可以是基于列表或网格的配置,在紧凑型显示屏上通常以卡片或平铺方式呈现。内容可以是动态的,这意味着它来自动态外部来源(例如 API)。

网格布局由隐含或显式包含原则构成的行和列组成。网格布局可以更严格地应用,也可以交错应用,以改变行和列。两者都应在间距和逻辑方面保持一致,以免让用户感到困惑。

您可以使用延迟列表或延迟网格来实现 Feed 布局。

Feed 布局

例如,采用网格布局的照片库和播客是常见的 Feed 格式。

支持窗格布局

移动版视图可能需要支持内容或控件,例如工作表或对话框。它们有助于使主视图保持专注且整洁。

底部动作条可充当主要视图的辅助内容

了解 M3 底部操作面板指南

播放列表的支持屏幕
在较大屏幕上,支持的表单可以作为窗格打开。

WebView

WebView 会显示应用内网页。在大多数情况下,我们建议使用标准 Web 浏览器(例如 Chrome)向用户提供内容。如需详细了解 Web 浏览器,请参阅有关使用 intent 调用浏览器的指南。