构建自适应应用

如今，超过 3 亿台 Android 大屏设备，包括平板电脑、可折叠设备、ChromeOS 设备、车载显示屏和电视正在使用中，并且数量还在不断增加。为了在不断增长和多样化的大屏设备上以及标准手机上提供最佳用户体验，请构建自适应应用。

什么是自适应应用？

自适应应用会根据应用显示的变化（主要是应用窗口的大小）来更改布局。但自适应应用也适应可折叠设备姿势的变化，例如桌面或书本姿势，以及屏幕密度和字体大小的变化。

自适应应用不仅仅是拉伸或收缩 UI 元素以响应不同的窗口大小，它们还会替换布局组件并显示或隐藏内容。例如，在标准手机上，自适应应用可能会显示底部导航栏，但在大屏上则显示导航侧边栏。在大屏上，自适应应用会显示更多内容，例如双窗格的列表-详情布局；在小屏上，则显示较少内容，无论是列表还是详情。

图 1. 自适应应用针对不同的窗口大小优化布局。

在快速逝去的以手机为中心的过去，应用都是全屏运行。如今，应用在多窗口模式下运行，其窗口大小是任意的，且独立于设备屏幕大小。用户可以随时更改窗口大小。因此，即使在同一种设备类型上，应用也必须是自适应的。

自适应应用在任何设备上、任何配置下都表现出色。

为何构建自适应 UI？

用户希望您的应用能够在他们所有的设备上完美运行，并在大屏幕上提供增强功能。用户在多窗口模式下进行多任务处理，以获得增强的应用体验并提高生产力。

仅限于在标准手机上进行单任务处理的应用，将错失不断扩大的用户群和多样化的可能性。

Google Play

Google Play 提供针对平板电脑和可折叠设备的应用集合和推荐，使用户能够发现高质量的应用。

Play 会将针对大屏幕优化的应用和游戏排名高于未优化的应用。排名基于大屏应用质量指南。更高的排名通过使多设备用户能够在手机上查看针对大屏幕的评分和评价来提高可发现性。

不符合 Play 商店大屏幕质量标准的应用，会在应用详情页显示警告。该警告提醒用户该应用可能无法在大屏设备上良好运行。

构建自适应应用以拓宽在 Google Play 上的可发现性，并最大化可以下载您应用的设备数量。

如何开始

在应用开发的所有阶段（从规划到部署）都应考虑自适应设计。向平面设计师传达自适应设计理念。设计您的应用以实现自适应，您将构建一个易于管理、可扩展且为未来外形设备和窗口模式做好准备的应用。

要创建支持所有显示尺寸和配置的自适应应用，请执行以下操作：

使用窗口尺寸类别进行布局决策
使用 Compose Material 3 Adaptive 库构建
支持触摸以外的输入
在所有设备类型上进行测试

窗口尺寸类别

不同设备上的应用窗口尺寸可能不同（或者在可折叠设备上，即使是同一设备，其尺寸也可能不同），即使应用处于全屏状态也是如此。不同的设备方向会产生不同的宽高比。在多窗口模式下，应用窗口的大小、宽高比和方向可能与设备屏幕不同。

自适应应用通过在渲染布局时仅考虑应用窗口来简化和概括确定和管理窗口大小、宽高比和方向的问题，这在应用窗口为全屏时也适用。

窗口尺寸类别根据窗口宽度或高度将应用窗口分为紧凑型、中型或扩展型。

Depiction of the compact, medium, and expanded width window size classes. — **图 3.** 基于显示宽度的窗口尺寸类别。

使用 Compose Material 3 Adaptive 库的顶层函数 currentWindowAdaptiveInfo() 计算应用的 WindowSizeClass。该函数返回 WindowAdaptiveInfo 实例，其中包含 windowSizeClass。每当窗口尺寸类别更改时，您的应用都会收到更新。

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClassAdaptiveLayoutSnippets.kt

内容窗格

Activity 的布局有时被称为“屏幕”。例如，您的应用可能有一个主屏幕、一个列表屏幕和一个项目详情屏幕。该术语暗示每个 Activity 都充满了设备屏幕。

然而，在足够大以支持扩展宽度窗口尺寸类别的设备屏幕上，多个 Activity 屏幕可以同时显示。窗格是用于单个 Activity 内容显示的更精确术语。

窗口尺寸类别使您能够确定在多窗格布局中显示多少内容窗格，如 Material Design 中所指定。

Device screens split into panes: one pane in compact and medium window size classes, two panes in expanded window size class. — **图 4.** 每个窗口尺寸类别的内容窗格数量。

窗格是可导航的。在紧凑型和中型窗口尺寸类别上，应用显示单个窗格；因此，导航到任何目标都显示一个窗格。

在扩展型窗口尺寸类别上，应用可以在多个窗格中显示相关内容，例如列表-详情布局。导航到任一窗格都会显示双窗格布局。如果窗口尺寸变为紧凑型或中型，自适应应用将仅显示一个窗格，即导航目标，可以是列表或详情。

图 5. 列表-详情布局，列表窗格作为导航目标。

图 6. 列表-详情布局，详情窗格作为导航目标。

Compose Material 3 Adaptive

Jetpack Compose 是一种现代的声明式方法，用于构建自适应应用，而无需重复和维护多个布局文件的负担。

Compose Material 3 Adaptive 库包含管理窗口尺寸类别、导航组件、多窗格布局以及可折叠设备姿势和铰链位置的可组合项，例如：

NavigationSuiteScaffold：根据应用窗口大小类别和设备姿势自动在导航栏和导航侧边栏之间切换。
ListDetailPaneScaffold：实现列表-详情规范布局。

使布局适应应用窗口大小。在扩展型窗口尺寸类别上，列表和列表项的详情并排显示在窗格中；但在紧凑型和中型窗口尺寸类别上，仅显示列表或详情。
SupportingPaneScaffold：实现辅助窗格规范布局。

在扩展型窗口尺寸类别上，显示主内容窗格和辅助窗格；但在紧凑型和中型窗口尺寸类别上，仅显示主内容窗格。

Compose Material 3 Adaptive 库是开发自适应应用的必备依赖项。

配置和连续性

自适应应用在配置更改期间保持连续性。

当应用窗口大小调整、可折叠设备的姿势更改或屏幕密度或字体更改时，就会发生配置更改。

默认情况下，配置更改会重新创建应用 Activity，并且所有 Activity 状态都会丢失。为了保持连续性，自适应应用会将状态保存在 Activity 的 onSaveInstanceState() 方法或 ViewModel 中。

姿势

自适应应用响应可折叠设备姿势的变化。姿势包括桌面姿势和书本姿势。

Jetpack WindowManager 中的 WindowInfoTracker 接口使您能够获取设备 DisplayFeature 对象的列表。其中显示功能包括 FoldingFeature.State，它指示设备是完全打开还是半开。

Compose Material 3 Adaptive 库提供了顶层函数 currentWindowAdaptiveInfo()，它返回一个包含 windowPosture 的 WindowAdaptiveInfo 实例。

触摸以外的输入

用户通常会将外部键盘、触控板、鼠标和手写笔连接到大屏设备。这些外设增强了用户的工作效率、输入精度、个人表达和无障碍功能。大多数 ChromeOS 设备都内置了键盘和触控板。

自适应应用支持外部输入设备，但大部分工作由 Android 框架为您完成：

Jetpack Compose 1.7 及更高版本：默认支持键盘 Tab 键导航和鼠标或触控板点击、选择和滚动。
Jetpack androidx.compose.material3 库：使用户能够使用手写笔在任何 TextField 组件中书写。
键盘快捷键助手：使用户可以发现 Android 平台和应用键盘快捷键。通过重写 onProvideKeyboardShortcuts() 窗口回调，在键盘快捷键助手中发布应用的键盘快捷键。

为了完全支持所有尺寸的外形设备，自适应应用支持所有类型的输入。

如何测试自适应应用

测试不同的屏幕和窗口尺寸以及不同的设备配置。使用主机端屏幕截图和 Compose 预览来检查您的应用布局。在 Android Studio 模拟器和 Google 数据中心托管的远程 Android 设备上运行您的应用。

大屏应用质量指南

大屏应用质量指南确保您的自适应应用在平板电脑、可折叠设备和 ChromeOS 设备上良好运行。该指南包括使您能够验证关键用户旅程的应用功能的测试。尽管该指南侧重于大屏幕，但它们与所有屏幕尺寸兼容。

多种配置

Compose 1.7 及更高版本中的 DeviceConfigurationOverride 接口使您能够覆盖设备配置的各个方面。该 API 以本地化的方式模拟不同的设备配置，以测试您想要的任何可组合内容。例如，您可以在一次测试套件运行中，在单个设备或模拟器上测试多种任意 UI 尺寸。

使用 DeviceConfigurationOverride.then() 扩展函数，您可以同时测试多个配置参数，例如字体大小、区域设置、主题和布局大小。

主机端屏幕截图

主机端屏幕截图测试是一种快速且可扩展的方式，用于验证应用布局的视觉外观。使用主机端屏幕截图测试您的 UI 在各种显示尺寸下的表现。

如需了解更多信息，请参阅Compose 预览屏幕截图测试。

Compose 预览

Compose 预览使您能够在 Android Studio 的设计视图中检查应用 UI。预览使用注释，例如 @PreviewScreenSizes、@PreviewFontScale 和 @PreviewLightDark，让您可以在各种配置下查看可组合内容。您甚至可以与预览进行交互。

Android Studio 还在预览中突出显示常见的可用性问题，例如过宽的按钮或文本字段。

如需了解更多信息，请参阅使用可组合预览预览您的 UI。

模拟器

Android Studio 提供了各种模拟器，用于测试不同的布局尺寸：

可调整大小的模拟器：模拟手机、平板电脑或可折叠设备，并允许您即时切换它们。
Pixel Fold 模拟器：模拟 Pixel Fold 大屏可折叠手机。
Pixel Tablet 模拟器：模拟 Pixel Tablet 大屏设备。
桌面模拟器：支持自由形式窗口化、鼠标悬停和键盘快捷键测试。

远程设备流式传输

安全连接到 Google 数据中心托管的远程 Android 设备，并在最新的 Pixel 和三星设备上运行您的应用。安装和调试应用，运行 ADB 命令，以及旋转和折叠设备，以确保您的应用在各种真实设备上良好运行。

远程设备流式传输已集成到 Android Studio 中。如需了解更多信息，请参阅由 Firebase 提供支持的 Android 设备流式传输。

其他资源

I/O 演示文稿：构建自适应 Android 应用