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