内容构成和结构

利用结构和包含方法,为您的内容打造灵活的流程和节奏。

1. 基本结构

如需开始创建具有一致安全措施的坚实结构,请向布局添加边距和列。

边距可在屏幕和内容的左侧边缘和右侧边缘提供间距。 紧凑尺寸的标准边距值为 16 dp,但边距应进行调整以适应更大的屏幕。应用的正文内容和操作必须位于这些边距内,并与这些边距对齐。

您还可以在此步骤中确保内边距安全区或内边距。系统栏边衬区可防止关键操作落入系统栏下方。如需了解详情,请参阅在系统栏后方绘制内容

图 8:边距 (1) 和系统栏边衬区 (2)

使用可构建灵活的网格结构,实现一致的对齐效果,并通过划分正文区域内的内容来为布局提供垂直定义。内容会显示在包含列的屏幕区域中。这些列可为布局提供结构,从而为排列元素提供便捷的结构。

图 9:移动设备屏幕通常分为四列

使用列网格可将内容与底层网格对齐,同时保持灵活的尺寸调整。列网格可以根据需要在特定点更改列大小和列数,以适应不同的设备规格,同时还允许内容进行缩放。避免列网格过于精细,基准网格的作用是提供一致的间距单位。

请注意,建立伴随的行网格可能会限制不同屏幕方向和设备规格下的横向内容缩放,通常建立内边距规则即可提供所需的视觉一致性。

放置内容

开始向布局结构添加广告文案。 边距可防止内容与屏幕边缘重叠。列可提供一致的间距和对齐结构。

2. 应用包含

使用划归功能以直观方式对元素进行分组。

划归是指将留白和可见元素结合使用,以创建视觉分组。容器是一种表示封闭区域的形状。在单个布局中,您可以将具有相似内容或功能的元素归为一组,并使用空白区域、排版和分隔线将它们与其他元素分开。

您可以用空白空间或可见的分隔线将类似的内容分组在一起,从而引导用户浏览内容。

图 10:将内容分为标题和正文两大组

隐式划归使用空白空间对内容进行分组,以形成容器边界,而显式划归使用分隔线和卡片等对象对内容进行分组。

下图展示了使用隐式包含来包含标题和主要内容。列网格用于对齐和创建分组。突出显示的内容明确包含在卡片中。使用图标和类型层次结构来增强视觉分离效果。

图 11:隐式包含示例

3. 定位内容

Android 有多种方法来处理各自容器中的内容元素,这些方法有助于适当地定位内容元素,包括 gravity、spacing 和 scaling。

图 12:布局示例,显示了包含边界和元素位置

Gravity 是一种标准,用于在可能更大的容器中放置对象,以满足特定使用情形。下图显示了将对象放置在开始位置和中心位置 (1)、顶部和水平中心位置 (2)、左下角 (3) 以及结束位置和右侧位置 (1) 的示例。

图 13:子内容和父视图的定位重心

4. 缩放内容

缩放对于适应动态内容、设备屏幕方向和屏幕尺寸至关重要。元素可以保持固定大小,也可以进行缩放。

请务必注意图片在其容器中如何通过缩放和定位进行显示,以确保图片在设备情境中以您希望的方式呈现,否则图片的主要焦点可能会被截断,图片可能会过小或过大而无法适应布局,或者出现其他不良效果。

图 14:居中裁剪的图片,可确保无论设备尺寸如何,植物都位于容器的中心

未添加注释的内容的显示效果可能与您的预期或期望有所不同。

图 15:未添加注释的内容可能会以意想不到的方式显示

已固定的内容

许多元素都内置了与 slot 或 scaffold 的互动、滚动和定位。您可以修改某些元素,使其保持固定状态,而不是对滚动做出反应,例如包含关键操作的悬浮操作按钮 (FAB)。

对齐方式

使用 AlignmentLine 创建自定义对齐线,供父布局用来对齐和定位其子项。

在类似元素之间建立一致的间距。
通过不一致地设置类似元素的间距来破坏可读性,这可能会使设计显得随意。

组件布局

Material 3 组件为互动和内容提供自己的配置和状态。

Compose 提供了便捷的布局,用于将 Material 组件组合成常见的屏幕图案。可组合项(例如 Scaffold)提供了适用于各种组件和其他屏幕元素的槽。详细了解 Material 组件和布局