布局定义了用户与您的应用程序交互的视觉结构，例如在活动中。Android 提供了一系列库、规范起点和技术来显示和定位内容。
要点
尊重设备安全区域，其中包括 UI 的部分，例如显示切口、边缘到边缘内边距、边缘显示、软件键盘和系统栏。
执行操作： 为用户提供灵活的布局以与键盘交互。
视频 1： 为用户提供灵活的布局以进行交互
将重要的交互（如主要导航）保持在可触及的屏幕区域内。
图 1： 浮动操作按钮 (FAB) 提供了一个突出且可触及的交互点 使用包含来对相关内容进行分组，以引导用户完成内容和操作。
图 2： 使用显式包含的卡片将内容与相关操作分组 在类似内容和 UI 元素之间提供一致的对齐。
不要： 通过不一致地对齐类似元素来破坏可读性，这会使设计看起来杂乱无章。
执行操作： 在类似元素之间建立一致的间距。
图 3： 不要破坏可读性 不要拘泥于纵向或理想化的布局：考虑用户可能遇到的不同纵横比、尺寸类别和分辨率。
不要在每个视图中用过多的操作来淹没用户。
在构建自定义布局时，使用对齐、约束或重力术语来标记内容如何在布局中放置。包括图像如何响应其容器以正确显示。
典型 Android 应用程序屏幕的组成部分
大多数 Android 应用程序由称为 系统栏、导航区域和主体的区域组成。
系统栏
状态栏和导航栏（统称为系统栏）显示电池电量、时间和通知提醒等重要信息，并提供从任何位置直接进行设备交互。详细了解 系统栏。
系统栏是设备界面的一个组成部分。将它们添加为设计的顶层，以确保在屏幕布局中考虑到它们。否则，用户可能会错误地认为您的意图是隐藏它们，您会错过对它们的样式设置，并且间距最终会出错。
将栏添加为顶层。使用 android:navigationBarColor 和 android:statusBarColor 在您的应用程序主题中应用颜色到系统栏。
导航区域
导航代表允许用户在您的应用程序中导航、访问重要操作或跨 Android 平台的各种功能。
主体区域
主体区域包含屏幕内容。主体内容由其他分组和布局参数组成。它必须在导航和系统栏区域下方继续。
为边缘到边缘内边距声明 WindowCompat.setDecorFitsSystemWindows(window, false)。
要确定布局的适当组成和导航模式，请了解用户如何与您的内容交互，以及他们如何浏览应用程序的信息架构。这种理解可以引导您的设计更加以用户为中心，通过创建用户可以采取行动的 UI 来实现这一点。
内容组成和结构
使用内容的结构和包含方法构建灵活的流程和节奏。
基本结构：使用边距和列作为视觉护栏
要开始使用一致的护栏创建坚固的结构，请在您的布局中添加边距和列。
边距 在屏幕和内容的左侧和右侧提供间距。紧凑尺寸的标准边距值为 16 dp，但边距应适应以容纳更大的屏幕。应用程序的主体内容和操作必须保留在这些边距内并与这些边距对齐。
您还可以在此步骤中确保内边距安全区或内边距。系统栏内边距可防止关键操作落在系统栏下方。有关详细信息，请参阅 在系统栏后面绘制内容。
使用列 为一致的对齐构建灵活的网格结构，并通过将主体区域内的内容进行划分来为布局提供垂直定义。内容位于包含列的屏幕区域中。这些列为您的布局提供结构，为排列元素提供便捷的结构。
使用列网格将内容与底层的网格对齐，但保持灵活的大小。列网格可以通过更改列的大小和列的数量来适应不同的外形尺寸，并在特定点根据屏幕尺寸进行调整，同时允许内容也进行缩放。避免对列网格过于细化，这是基线网格的作用：提供一致的间距单位。
注意不要建立一个伴随的行列网格，因为它会限制跨方向和外形尺寸的水平内容缩放，通常建立填充规则会提供所需的视觉一致性。
使用包含来视觉上对元素进行分组
包含指的是使用空白和可见元素一起创建视觉分组。容器是一个代表封闭区域的形状。在一个布局中，你可以将具有相似内容或功能的元素分组在一起，并使用空白、排版和分隔符将它们与其他元素隔开。
你可以使用空白或可见的分隔符将类似的项目分组在一起，以帮助引导用户浏览内容。
隐式包含使用空白来视觉上对内容进行分组以创建容器边界，而显式包含使用分隔线和卡片之类的对象将内容分组在一起。
下图显示了一个使用隐式包含来包含标题和主要内容的示例。列网格用于对齐和创建分组。突出显示的内容被显式地包含在卡片中。使用图标和类型层次结构来实现更好的视觉分离。
内容定位
Android 提供了多种方法来处理其各自容器中的内容元素，以帮助适当地定位它们，包括重力、间距和缩放。
重力是一种标准，用于将对象放置在可能更大的容器中以进行特定用例。下图显示了定位对象的示例，开始和居中（1）、顶部和水平居中（2）、底部左侧（3）以及结束和右侧（1）。
缩放
缩放对于适应动态内容、设备方向和屏幕尺寸至关重要。元素可以保持固定或缩放。
注意图像如何在容器中使用缩放和位置显示，这一点很重要，可以确保它在设备上下文之外按预期显示，否则图像的主要焦点可能会被截断，图像对于布局而言可能过小或过大，或者出现其他不良效果。
未被标注的内容可能会以与你预期或想要的方式不同。
固定内容
许多元素具有内置的交互、滚动和定位，带有槽或脚手架。一些元素可以被修改为保持固定，而不是对滚动做出反应，例如包含关键操作的浮动操作按钮（FAB）。
对齐
使用AlignmentLine创建自定义对齐线，父布局可以使用这些对齐线来对齐和定位子元素。
不要： 通过不一致地对齐类似元素来破坏可读性，这会使设计看起来杂乱无章。
执行操作： 在类似元素之间建立一致的间距。
组件布局
Material 3 组件为交互和内容提供自己的配置和状态。
Compose 为将 Material 组件组合成常见的屏幕模式提供了方便的布局。诸如Scaffold之类的可组合项为各种组件和其他屏幕元素提供了槽位。了解有关 Material 组件和布局的更多信息。
布局和导航模式
如果你的应用程序包含用户要遍历的多个目的地，我们建议采用其他应用程序常用的布局和导航配对。由于许多用户已经拥有这些配对的心理模型，因此你的应用程序将对他们而言更加直观。
布局和导航配对
导航栏和模态导航抽屉用作父布局视图和主要导航目的地的主要导航模式。
导航栏可以在同一层次结构级别上保存 3 到 5 个导航目的地。此组件会转换为大屏幕上的导航栏。
尽管导航抽屉可以保存超过 5 个导航目的地，但由于需要在紧凑尺寸上到达顶部的栏，因此这种模式不如导航栏理想。
Material 3 标签和底部应用程序栏是辅助导航模式，你可以使用它们来补充主要导航或出现在子视图上。
布局操作
提供控件以使用户能够执行操作。常见的模式包括顶部栏操作、浮动操作按钮（FAB）和菜单。
对于最重要的操作，FAB为用户提供了一个大而醒目的按钮。在此级别上一次仅提供一个操作。FAB 可以以多种尺寸和展开形式出现，其中包括一个标签。使用Scaffold固定 FAB，确保即使在滚动时也始终可见。
你可以将辅助操作放置在顶部栏中，或者如果它与相关内容分组在一起，则放置在页面中。
对于任何不需要立即或频繁执行的额外操作，请将这些操作添加到溢出菜单中。
规范布局
将规范布局用作起点，即可以立即使用的组合，这些组合有助于布局适应常见的用例和屏幕尺寸。这些布局在美观和功能方面都得到了体现，并且源自Material 3 指南。
Android 框架包含专门的组件，使用Jetpack Compose或Views API，可以使布局的实现变得简单而可靠。
列表-详细信息布局
列表-详细信息布局使用户能够浏览具有描述性、解释性或其他补充信息（项目详细信息）的项目列表。对于紧凑的屏幕尺寸，只有列表或详细信息视图可见。以基于行的布局显示内容集合，列表构成了应用程序中最常见的布局形式。列表-详细信息非常适合消息应用程序、联系人管理器、文件浏览器或任何可以将内容组织为显示更多信息的项目列表的应用程序。
内容可以是静态的或动态的。
- 动态内容是应用程序动态提供的，非常适合显示用户生成的内容或反映用户的偏好或操作。例如，想象一个照片应用程序，其中包含用户生成的照片的可滚动列表，这些照片对于每个用户都是唯一的，并且会随着用户上传更多图像而改变。这些图像是动态内容。
- 静态内容代表硬编码的内容，只能通过直接更改应用程序代码来修改。静态内容的示例包括每个用户都可能看到的图像和文本。
Android 新功能 Figma 文件提供了多个布局示例。以下示例显示了一个一维内容集合。
探索Material 3 列表，以获取有关列表组件和规范的更多设计指南。
Feed 布局
Feed 布局以可配置的网格排列等效的内容元素，便于快速、方便地查看大量内容。（请参阅Material 3 使用卡片集合的指南。）Feed 可以是基于列表的或基于网格的配置，在紧凑的显示器上通常以卡片或磁贴形式出现。内容可以是动态的，这意味着它从动态外部源（如 API）“馈送”进来。
网格布局由隐式或显式包含原则构成的行和列组成。（有关更多信息，请参阅本页面的包含。）网格布局可以更严格地应用或交错排列，以改变行和列。两者都应该一致地应用间距和逻辑，避免用户混淆。探索Material 3 关于设计 Feed 的指南。
你可以使用Lazy 列表或 Lazy 网格在 Compose 中实现 Feed 布局，或者使用RecyclerView或CardView在 Views 中实现。
支持窗格布局
移动视图可能需要支持内容或控件。它们通常以工作表或对话框的形式出现，可以帮助主要视图保持专注和整洁。查看M3 使用支持窗格规范布局的指南。
了解有关M3 关于底部工作表的指南。
相对布局
输入、内容或其他操作可能会彼此相对显示，或者约束到父容器。布局可以更加自定义，但请确保遵循一致的分组、列和间距。
布局还可以使用布局类型的组合。例如，你可以将轮播或水平滚动与垂直卡片配对。或者，你可以使用垂直列表数据呈现自定义图表。
你可以使用 Lazy 行和 Lazy 列以滚动行或列的形式呈现内容。
了解有关 Compose 布局基础知识和可组合项的更多信息。
身份验证是一种常见的相对布局，如下图所示。
全屏布局是另一种常见的布局，在沉浸模式下使用。
如果您使用的是 Views 而不是 Compose，您可以使用 ConstraintLayout 根据子视图和父布局之间的关系来布局视图，从而实现大型且复杂的布局。 ConstraintLayout 允许您完全通过拖放来构建，而不是使用布局编辑器编辑 XML。 了解有关 使用布局编辑器构建 UI 的更多信息。
自适应布局
自适应设计是指设计适应特定断点和设备的布局的实践。 通常，我们会考虑设备的宽度来确定布局应该在哪里改变或适应。 Web 和 Android 都利用响应式设计概念（如灵活的网格和图像）来创建更好地响应其上下文的布局。
有关将布局适应扩展的屏幕尺寸的设计指南，请阅读 Compose 中的 支持不同屏幕尺寸 开发人员指南和 M3 应用布局 页面。 您还可以查看 Android 大屏幕规范 画廊，以获取大型屏幕布局的灵感和实现。
虽然并非每个应用程序都需要在所有屏幕尺寸上可用，但这确实为用户提供了更多关于人体工程学、可用性和应用程序质量的自由。
- 您可以使用类大小作为断点来设计关键屏幕（传达应用程序的基本概念或您的应用程序），以作为指南。
- 或者，通过注释内容应如何约束、扩展或重新流动来设计内容以响应方式进行操作。
有关布局的更多信息，请查看 Material Design 3 (M3) 了解布局页面。
WebView
WebView 是一个显示应用内网页的视图。 在大多数情况下，我们建议使用标准 Web 浏览器（如 Chrome）将内容传递给用户。 要详细了解 Web 浏览器，请阅读有关 使用 Intent 调用浏览器 的指南。