布局基础知识

布局定义了用户与应用交互的视觉结构(例如 activity 中的视觉结构)。Android 提供了一系列库、规范化起点和技术来显示和定位内容。

要点总结

  • 遵循设备安全区域,其中包括界面部分,例如显示屏缺口、边到边内嵌、边缘显示屏、软件键盘和系统栏。

  • 正确做法:提供灵活的布局,让用户能够与键盘互动。

    视频 1 :为用户提供灵活的布局以便互动
  • 将主要导航等基本互动放在可触及的屏幕区域。

    图 1:悬浮操作按钮 (FAB) 提供了醒目且可触及的互动点
  • 使用封装容器对相关内容进行分组,引导用户浏览内容和执行操作。

    图 2:使用显式划归对包含相关操作的内容进行分组的卡片
  • 确保类似内容和界面元素的对齐方式一致。

    不建议:通过不一致地设置类似元素的间距来干扰可读性,这可能会使设计看起来杂乱无章。

    正确做法:在类似元素之间建立一致的间距。

    图 3:不要干扰可读性
  • 不要局限于纵向或理想化的布局:请考虑用户可能会遇到的不同宽高比、大小类别和分辨率。

  • 避免因每次查看时可执行的操作过多而让用户应接不暇。

  • 构建自定义布局时,请使用对齐方式、约束条件或重心术语指明内容应如何在布局中放置。说明图片应如何响应其容器以正确显示。

典型 Android 应用屏幕的各个部分

大多数 Android 应用都由以下几个区域组成:系统栏、导航栏区域和正文。

图 4:Android 应用的各个部分:系统栏 (1)、导航区域 (2) 和正文 (3)

系统栏

状态栏和导航栏(统称为系统栏)用于显示电池电量、时间和通知提醒等重要信息,并支持从任何位置直接与设备互动。详细了解系统栏

图 5:系统栏 (1)

导航栏用于展示各种功能,用户可以通过这些功能在应用中导航、访问重要操作或跨 Android 平台进行操作。

图 6:导航区域 (2)

身体部位

正文区域用于容纳屏幕内容。正文内容由其他分组和布局参数组成。它必须延续到导航栏区域和系统栏区域的下方。

为边到边内边距声明 WindowCompat.setDecorFitsSystemWindows(window, false)

图 7:身体区域

如需确定布局的适当组成和导航模式,请尝试了解用户如何与您的内容互动,以及他们如何浏览应用的信息架构。通过创建用户可以执行操作的界面,这种理解可以引导您的设计更加注重用户。

内容组成和结构

为内容采用结构和容器方法,打造灵活的流程和节奏。

基本结构:使用边距和列作为视觉护栏

如需开始创建具有一致护栏的稳固结构,请向布局添加边距和列。

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

您还可以在此步骤中确保内嵌安全区域或内嵌。系统栏内嵌可防止重要操作位于系统栏下方。如需了解详情,请参阅在系统栏后面绘制内容

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

使用构建灵活的网格结构以实现一致的对齐,并通过在正文区域内划分内容来为布局提供垂直定义。内容位于屏幕中包含列的区域。这些列为布局提供了结构,为排列元素提供了方便的结构。

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

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

请谨慎设置随附的行网格,因为它可能会限制横向内容在不同屏幕方向和设备类型中的缩放,通常,设置内边距规则即可提供所需的视觉一致性。

视频 2:开始向布局结构添加副本。 边距可保护内容免受屏幕边缘的影响。列可提供一致的间距和对齐结构。

使用划归对元素进行视觉分组

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

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

图 10:将内容划分为标题和主要文案这两个较大的组合

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

下图展示了使用隐式封装容纳标题和主要文案的示例。列网格用于对齐和创建分组。亮点会明确显示在卡片中。使用图标和类型层次结构来实现更好的视觉分隔。

图 11:隐式封装示例

内容定位

Android 提供了多种处理各自容器中内容元素的方式,这些方式有助于正确定位内容元素,包括重力、间距和缩放。

图 12:显示元素的容器边界和位置的布局示例

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

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

扩缩

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

请注意图片在容器中以何种缩放比例和位置显示,这对确保图片始终以您期望的方式显示非常重要,否则图片的主要焦点可能会被截断、图片可能过小或过大而无法适应布局,或者出现其他不良效果。

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

未注释的内容可能会与您预期或希望的显示方式不同。

图 15:未注释的内容可能会以意外的方式显示

已固定的内容

许多元素都内置了通过槽或框架进行交互、滚动和定位的功能。某些元素可以修改为保持固定状态,而不是响应滚动,例如包含重要操作的悬浮操作按钮 (FAB)。

对齐方式

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

图 16:不要干扰可读性

不建议:通过不一致地设置类似元素的间距来干扰可读性,这可能会使设计看起来杂乱无章。

正确做法:在类似元素之间建立一致的间距。

组件布局

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

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

布局和导航模式

如果您的应用包含供用户浏览的多个目的地,我们建议您采用其他应用常用的布局和导航配对。由于许多用户已经具备这些配对的心理模型,因此您的应用对他们来说会更直观。

布局和导航配对

标题栏和模态抽屉式导航栏用作父布局视图和主要导航目的地的首选导航模式。

导航栏可容纳同一层次结构中的三到五个导航目的地。此组件会转换为适用于大屏幕的侧边导航栏。

虽然抽屉式导航栏可以容纳超过 5 个导航目的地,但由于用户需要在小屏设备上触及顶部导航栏,因此这种模式不如导航栏理想。

图 17:导航栏中的主导航目的地

Material 3 标签页底部应用栏是辅助导航模式,可用于补充主要导航栏或显示在子视图上。

图 18:标签页可用作辅助导航层,用于对同级内容进行分组(辅助)

布局操作

提供控件,以便用户执行操作。常见模式包括顶栏操作、悬浮操作按钮 (FAB) 和菜单。

对于最重要的操作,FAB 会为用户提供一个大而醒目的按钮。在此级别,一次只能提供一项操作。FAB 可以有多种尺寸,并且可以以展开的形式显示,其中包含标签。使用 Scaffold 固定 FAB,确保它始终可见,即使在滚动时也是如此。

图 19:悬浮操作按钮 (FAB),可让用户快速将植物添加到植物图库

您可以将次要操作放置在顶部菜单栏中,也可以放置在页面中(如果次要操作与相关内容分组在一起)。

图 20:显示详情时顶栏中的提醒操作(左)和列表项行中的菜单图标(右)

对于不经常或不立即需要的任何其他操作,请将这些操作添加到菜单中。

规范布局

将规范布局作为起点,这些布局是可供直接使用的组合,可帮助布局适应常见用例和屏幕尺寸。此类布局遵循 Material 3 指南,不仅十分美观,而且功能强大。

图 21:规范布局

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

列表-详情布局

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

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

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

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

图 22:一维内容集合

如需有关列表组件和规范的更多设计指南,请参阅 Material 3 列表

Feed 布局

图 23:网格布局的照片库是一种常见的 Feed 格式

Feed 布局能够以可配置网格的形式排列等效的内容元素,以便用户快速、方便地查看大量内容。(请参阅有关在集合中使用卡片的 Material 3 准则。)在小屏设备上,Feed 可以采用列表或网格形式的配置,通常采用卡片或功能块的形式。内容可以是动态的,也就是说,它是从动态外部来源(例如 API)“提取”的。

网格布局由行和列组成,这些行和列由隐式或显式封装原则构成。(如需了解详情,请参阅本页中的控制部分。)网格布局可以更严格地应用,也可以错开应用,以便调整行和列。这两种类型的按钮应采用一致的间距和逻辑,以免让用户感到困惑。探索 Material 3 指南中有关设计 Feed 的内容

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

辅助窗格布局

移动视图可能需要支持内容或控件。这些视图通常采用表格或对话框的形式,有助于保持主要视图的清晰和专注。请参阅有关使用辅助窗格规范布局的 M3 指南

图 24:底部动作条可以作为主要视图的辅助内容

了解适用于底部动作条的 M3 指南

相对布局

输入、内容或其他操作可能会相对于彼此显示,或受父级容器的约束。布局可以更加自定义,但请务必遵循一致的分组、列和间距。

布局也可以结合使用不同的布局类型。例如,您可以将轮播界面或水平滚动与垂直卡片搭配使用。或者,您也可以显示包含垂直列表数据的自定义图表。

您可以使用延迟行和延迟列在滚动行或列中呈现内容。

详细了解 Compose 布局基础知识以及可组合项的组成部分。

图 25:布局可以组合使用分组、列表和网格

身份验证是一种常见的相对布局,如下图所示。

图 26:将 Authentication 用作常规布局

全屏布局是另一种常见的布局,用于沉浸式模式。

图 27:全屏布局(在沉浸式模式下使用)

如果您使用的是 View 而非 Compose,则可以使用 ConstraintLayout 根据同级视图与父布局之间的关系来布局视图,从而实现大型复杂布局。借助 ConstraintLayout,您可以完全通过拖放来构建布局,而无需使用布局编辑器修改 XML。详细了解如何使用布局编辑器构建界面

自适应布局

自适应设计是一种针对特定断点和设备调整布局的做法。通常,我们会根据设备的宽度来确定布局应在何处更改或调整。Web 和 Android 都利用自适应设计概念(例如灵活的网格和图片)来创建更好地响应其上下文的布局。

INSERT ALT TEXT HERE

如需了解有关将布局调整为适应展开的屏幕尺寸的设计准则,请参阅 Compose 中的支持不同的屏幕尺寸开发者指南以及 M3 的应用布局页面。您还可以查看 Android 大屏幕规范图库,获取大屏幕布局的灵感和实现方式。

虽然并非所有应用都需要支持每种屏幕尺寸,但它确实能为用户提供更多的自由,从工效学设计、易用性和应用质量方面改善用户体验。

  • 您可以将类大小作为断点来设计关键屏幕(传达基本概念或应用),以用作准则。
  • 或者,通过指定内容应如何受限、展开或重新流动,使内容具有响应能力。

如需详细了解布局,请参阅 Material Design 3 (M3)“了解布局”页面

网页视图

WebView 是一种用于显示应用内网页的视图。在大多数情况下,我们建议使用标准网络浏览器(例如 Chrome)向用户传送内容。如需详细了解网络浏览器,请参阅有关使用 intent 调用浏览器的指南。