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