大屏幕规范布局是经过验证的通用应用布局，可在大型屏幕设备上提供最佳用户体验。
规范布局具有响应性和自适应性。它们支持小型屏幕手机以及平板电脑、折叠屏设备和 ChromeOS 设备。规范布局源于 Material Design 指南，既美观又实用。
Android 框架包含专门的组件，使用视图或 Jetpack Compose 可轻松可靠地实现布局。
规范布局可创建引人入胜、提高生产力的 UI，成为优秀应用的基础。
如果您已经熟悉大屏幕规范布局，但不知道要为应用使用哪些 Android API，请跳至以下的 适用性，以帮助确定适合应用用例的布局。
列表-详细信息
列表-详细信息布局使用户可以浏览具有描述性、解释性或其他补充信息的项目列表，即项目详细信息。
布局将应用窗口划分为两个并排的面板：一个用于列表，另一个用于详细信息。用户从列表中选择项目以显示项目详细信息。详细信息中的深层链接会在详细信息面板中显示更多内容。
扩展宽度显示（参见 窗口大小类）可同时容纳列表和详细信息。选择列表项目会更新详细信息面板，以显示所选项目的相关内容。
中等和紧凑宽度显示会显示列表或详细信息，具体取决于用户与应用的交互。当仅显示列表时，选择列表项目会显示详细信息以代替列表。当仅显示详细信息时，按下后退按钮会重新显示列表。
配置更改（例如设备方向更改或应用窗口大小更改）会更改显示的窗口大小类。列表-详细信息布局会相应做出响应，并保留应用状态。
- 如果扩展宽度显示屏同时显示列表窗格和详细信息窗格缩小为中等或紧凑，则详细信息窗格保持可见，而列表窗格隐藏。
- 如果中等或紧凑宽度显示屏仅显示详细信息窗格，而窗口大小类别变宽为扩展，则列表和详细信息将一起显示，并且列表指示与详细信息窗格中内容相对应的内容项已选中。
- 如果中等或紧凑宽度显示屏仅显示列表窗格，而变宽为扩展，则列表和占位符详细信息窗格将一起显示。
列表-详细信息非常适合于消息应用程序、联系人管理器、文件浏览器或任何可以将内容组织为显示附加信息的项目列表的应用程序。
实施
可以使用多种技术创建列表-详细信息布局，包括 Compose、视图和活动嵌入（对于旧版应用程序）。有关如何确定哪种技术最适合您的应用程序的信息，请参阅下面的适用性。
Compose
Compose 的声明式范例支持窗口大小类别逻辑，该逻辑确定是在同一时间显示列表和详细信息窗格（当宽度窗口大小类别为扩展时），还是仅显示列表或详细信息窗格（当宽度窗口大小类别为中等或紧凑时）。
为了确保单向数据流，提升所有状态，包括当前窗口大小类别和当前所选项目的详细信息（如果有），以便所有可组合项都可以访问数据并正确渲染。
在小窗口尺寸上仅显示详细信息窗格时，添加 BackHandler 以删除详细信息窗格并仅显示列表窗格。该 BackHandler 不是整体应用程序导航的一部分，因为处理程序取决于窗口大小类别和所选详细信息状态。
有关示例实现，请参阅使用 Compose 的列表-详细信息示例。
视图和片段
该SlidingPaneLayout库旨在简化基于视图或片段的列表-详细信息布局的实现。
首先，将 SlidingPaneLayout 声明为 XML 布局的根元素。接下来，添加两个子元素（视图或片段），它们代表列表和详细信息内容。
实现一种通信方法，以在列表-详细信息视图或片段之间传递数据。建议使用ViewModel，因为它能够存储业务逻辑并保存配置更改。
SlidingPaneLayout 自动确定是同时显示列表和详细信息还是分别显示。在具有足够水平空间来容纳两者的窗口中，列表和详细信息并排显示。在缺乏足够空间的窗口中，将显示列表或详细信息，具体取决于用户与应用程序的交互。
有关示例实现，请参阅使用视图的列表-详细信息示例。
活动嵌入
使用活动嵌入使旧版的多活动应用程序能够在同一屏幕上并排显示两个活动，或者将一个活动叠放在另一个活动的顶部。如果您的应用程序在单独的活动中实现了列表-详细信息布局的列表和详细信息，则活动嵌入使您能够轻松创建列表-详细信息布局，而无需或只需很少的代码重构。
通过使用 XML 配置文件指定任务窗口拆分来实现活动嵌入。该拆分定义了启动拆分的活动（主活动）和辅助活动。使用窗口大小类别断点指定拆分的最小显示宽度。当显示宽度低于最小断点时，活动将一个叠放在另一个的顶部显示。例如，如果最小显示宽度为 600dp，则活动将在紧凑显示屏上一个叠放在另一个的顶部显示，但在中等和扩展显示屏上并排显示。
活动嵌入在 Android 12L（API 级别 32）及更高版本上受支持，但如果由设备制造商实施，它也可能在较低的 API 级别上可用。当设备上不可用活动嵌入时，回退行为会导致列表活动或详细信息活动根据用户与应用程序的交互占领整个应用程序窗口。
有关更多信息，请参阅活动嵌入。
有关示例实现，请参阅使用活动嵌入的列表-详细信息示例。
供稿
供稿布局将等效的内容元素排列在一个可配置的网格中，以便快速、方便地查看大量内容。
大小和位置在内容元素之间建立关系。
通过使元素具有相同的大小并将它们放在一起，可以创建内容组。通过使元素大于附近的元素来吸引注意力。
卡片和列表是供稿布局的常见组件。
供稿布局支持几乎任何大小的显示，因为网格可以从单个滚动列调整为多列内容滚动供稿。
供稿特别适合新闻和社交媒体应用程序。
实施
Compose
供稿包含大量位于垂直滚动容器中的内容元素，这些元素以网格形式排列。延迟列表 以高效的方式在列或行中渲染大量项目。延迟网格 在网格中渲染项目，支持配置项目大小和跨度。
根据可用显示区域配置网格布局的列，以设置网格项目的最小允许宽度。在定义网格项目时，调整列跨度以突出显示某些项目而不是其他项目。
对于旨在占用供稿整个宽度的节标题、分隔符或其他项目，请使用maxLineSpan 来占用布局的整个宽度。
在没有足够空间显示超过一列的紧凑宽度显示屏上，LazyVerticalGrid 的行为与 LazyColumn 相同。
有关示例实现，请参阅使用 Compose 的供稿示例。
视图和片段
一个RecyclerView 以高效的方式在一列中渲染大量项目。一个GridLayoutManager 在网格中布局项目，允许配置项目大小和跨度。
根据可用显示区域的大小配置网格列，以设置项目的最小允许宽度。
可以覆盖 GridLayoutManager 的默认跨度策略（每个项目一个跨度），方法是创建自定义的SpanSizeLookup。调整跨度以突出显示某些项目而不是其他项目。
在紧凑宽度显示屏上，如果只有足够的空间显示一列，请使用LinearLayoutManager 而不是 GridLayoutManager。
有关示例实现，请参阅使用视图的供稿示例。
支持窗格
支持窗格布局将应用程序内容组织到主显示区域和辅助显示区域。
主显示区域占据应用程序窗口的大部分（通常约三分之二），并包含主要内容。辅助显示区域是一个窗格，它占据应用程序窗口的剩余部分，并呈现支持主要内容的内容。
支持窗格布局在扩展宽度显示屏（请参阅窗口大小类别）的横向模式下效果很好。如果内容可适应更窄的显示空间，或者如果可以最初将附加内容隐藏在底部或侧边菜单（可以通过菜单或按钮等控件访问）中，则中等或紧凑宽度显示屏支持同时显示主显示区域和辅助显示区域。
支持窗格布局与列表-详细信息布局在主内容和辅助内容的关系方面有所不同。辅助窗格内容仅在与主内容相关时才有意义；例如，支持窗格工具窗口本身无关紧要。但是，列表-详细信息布局的详细信息窗格中的补充内容即使没有主内容也有意义，例如，产品列表中产品的描述。
支持窗格的用例包括
- 生产力应用程序：文档或电子表格以及支持窗格中的审阅者评论
- 媒体应用程序：流式视频以及支持窗格中的相关视频列表，或补充有播放列表的音乐专辑的描述
- 搜索和参考应用程序：带有结果的支持窗格中的查询输入表单
实施
Compose
Compose 支持窗口大小类别逻辑，使您能够确定是同时显示主要内容和辅助内容，还是将辅助内容放置在其他位置。
提升所有状态，包括当前窗口大小类别以及与主内容和辅助内容中的数据相关的信息。
对于紧凑宽度显示屏，将辅助内容放置在主要内容下方或底部菜单内。对于中等和扩展宽度，将辅助内容放置在主内容旁边，根据内容和可用空间进行适当调整大小。对于中等宽度，将显示空间平均分配给主内容和辅助内容。对于扩展宽度，将 70% 的空间分配给主内容，30% 的空间分配给辅助内容。
有关示例实现，请参阅使用 Compose 的支持窗格示例。
视图和片段
支持窗格布局是使用辅助布局（如LinearLayout或ConstraintLayout）实现的。建立将应用程序可用的水平显示空间划分为三个类别（紧凑（< 600dp）、中等（>= 600dp）和扩展（>= 840dp））的窗口大小类别。
对于每个窗口大小类别，定义如下布局
- 紧凑：在应用程序资源
layout文件夹中，放置渲染辅助窗格位于主要内容下方或底部菜单内的内容 - 中等：在
layout-w600dp文件夹中，提供辅助窗格内容，使主内容和辅助窗格并排渲染，将水平显示空间平均分配 - 扩展：在
layout-w840dp文件夹中，包含辅助窗格内容，使主内容和辅助窗格并排渲染；但是，辅助窗格仅占用 30% 的水平空间，剩余的 70% 留给主内容
无论使用视图、片段还是两者结合，都使用ViewModel 来实现主内容和辅助窗格之间的通信。
有关实现示例，请参阅以下示例
适用性
规范布局为内容创建多方面展示，方便访问和深入探索。使用以下流程图来确定哪个布局和实现策略最适合您的应用程序用例。
有关在不同类型应用程序中实现的规范布局示例，请参阅大屏幕画廊。
其他资源
- 列表-详细信息
- 支持窗格
- 供稿
- Compose — 列表和网格
- 使用 RecyclerView 创建动态列表
- Material Design — 规范布局
- 将您的 UI 迁移到响应式布局
- 响应式 UI 的导航
为您推荐
- 注意：当 JavaScript 关闭时，链接文本会显示
- 使用视图的响应式/自适应设计
- 列表和网格
- Jetpack Compose 中的实用性能问题解决