规范布局

利用规范布局作为起点,这些现成的组合可帮助布局适应常见的使用场景和屏幕尺寸。这些布局不仅美观实用,而且遵循 Material 3 指南

图 21:规范布局

Android 框架包含专门的组件,让您可以使用 Jetpack Composeview API 方便而可靠地实现此类布局。

“列表-详情”布局

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

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

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

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

图 22:一维内容集合

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

Feed 布局

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

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

您可以在 Compose 中使用延迟列表或延迟网格实现 Feed 布局,也可以在视图中使用 RecyclerViewCardView 实现 Feed 布局。

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

支持窗格布局

移动视图可能需要支持内容或控件。它们通常以工作表或对话框的形式呈现,有助于保持主视图的专注性和整洁性。请参阅 M3 指南:使用支持窗格规范布局

图 24:底部工作表可作为主要视图的辅助内容

了解 M3 底部工作表指南