构建自适应应用

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

什么是自适应应用？

自适应应用会根据应用显示屏（主要是应用窗口大小）的变化更改布局。不过，自适应应用还可以适应可折叠设备折叠状态的变化（例如桌面折叠状态或图书折叠状态），以及屏幕密度和字体大小的变化。

自适应应用不会仅仅根据不同的窗口大小拉伸或缩小界面元素，而是会替换布局组件并显示或隐藏内容。例如，在标准手机上，自适应应用可能会显示底部导航栏，但在大屏设备上，则会显示侧边导航栏。在大型屏幕上，自适应应用会显示更多内容，例如双窗格列表-详情布局；在小屏幕上，则会显示较少的内容，即列表或详情。

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

在过去以手机为中心的时代，应用会全屏运行。目前，应用在多窗口模式下运行，窗口大小不受设备屏幕大小的影响。用户可以随时更改窗口大小。因此，即使在单一设备类型上，应用也必须是自适应的。

自适应应用在任何配置的任何设备上都能呈现出出色的外观并正常运行。

为什么要构建自适应界面？

用户希望您的应用能够在所有设备上正常运行，并在大屏设备上提供增强型功能。用户可以在多窗口模式下进行多任务处理，从而提升应用体验并提高工作效率。

那些只能在标准手机上执行单一任务的应用会错失不断扩展的多样化用户群。

Google Play

Google Play 提供平板电脑和可折叠设备专用的应用合集和建议，让用户能够发现优质应用。

Google Play 会将针对大屏设备进行了优化的应用和游戏的排名排在未优化的应用之上。排名基于大屏设备应用质量指南。排名越高，多设备用户就能在手机上查看针对大屏设备的评分和评价，从而提高曝光度。

不符合 Play 商店大屏设备质量标准的应用会在应用详情页面上显示警告。该警告会告知用户，应用在其大屏设备上可能无法正常运行。

图 2. 应用详情页面上显示技术质量警告。

构建自适应应用，以提高应用在 Google Play 上的曝光度，并最大限度地增加可下载应用的设备数量。

如何开始使用

在应用开发的所有阶段（从规划到部署）都考虑自适应设计。告知平面设计师自适应设计。将应用设计为自适应，您将构建一个可管理、可扩展且可适应未来外形规格和窗口模式的应用。

如需创建支持所有显示大小和配置的自适应应用，请执行以下操作：

  • 使用窗口大小类别来决定布局
  • 使用 Compose Material 3 Adaptive 库进行构建
  • 支持除触控以外的输入
  • 在所有类型的设备上进行测试

窗口大小类别

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

自适应应用会在呈现布局时仅考虑应用窗口，这也适用于应用窗口处于全屏模式的情况，从而简化并泛化了确定和管理窗口大小、宽高比和屏幕方向的问题。

窗口大小类别会根据窗口宽度或高度将应用窗口分类为紧凑、中等或展开。

紧凑型、中等和较大宽度窗口大小类的示意图。
图 3. 基于显示屏宽度的窗口大小类别。

使用 Compose Material 3 自适应库的 currentWindowAdaptiveInfo() 顶级函数计算应用的 WindowSizeClass。该函数会返回一个 WindowAdaptiveInfo 实例，其中包含 windowSizeClass。每当窗口大小类发生变化时，应用都会收到更新：

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
AdaptiveLayoutSnippets.kt

内容窗格

activity 的布局有时被称为屏幕。例如，您的应用可能包含一个主屏幕、一个列表页面和一个商品详情页面。该术语意味着每个 activity 都会填满设备屏幕。

不过，在足够大以支持展开宽度窗口大小类的设备屏幕上，可以同时在屏幕上显示多个 activity 屏幕。窗格是对各个 activity 的内容显示的更精确术语。

借助窗口大小类别，您可以确定要在多窗格布局中显示多少个内容窗格，如 Material Design 中所指定。

设备屏幕拆分为多个窗格：一个窗格（较小和中等窗口大小类别）和两个窗格（按较大窗口大小类别）。
图 4. 每个窗口大小类别的内容窗格数量。

窗格可导航。在紧凑型和中等窗口大小类中，应用会显示一个窗格；因此，导航到任何目的地都会显示一个窗格。

在较大窗口大小类别中，应用可以在多个窗格中显示相关内容，例如列表-详情布局。导航到任一窗格都会显示双窗格布局。如果窗口大小更改为较小或中等，自适应应用只会显示一个窗格，即导航目的地（列表或详情）。

图 5. 将列表窗格用作导航目标的列表-详情布局。
图 6.以详情窗格作为导航目标的列表-详情布局。

Compose Material 3 自适应

Jetpack Compose 是一种现代的声明式方法，用于构建自适应应用，而不会复制多个布局文件，而且消除了维护方面的负担。

Compose Material 3 自适应库包含用于管理窗口大小类别、导航组件、多窗格布局以及可折叠设备折叠状态和合页位置的可组合项，例如：

  • NavigationSuiteScaffold：根据应用窗口大小类和设备折叠状态，自动在导航栏和侧边导航栏之间切换。

  • ListDetailPaneScaffold：实现列表-详情规范布局。

    根据应用窗口大小调整布局。在较大窗口大小类别中，在并排窗格中显示列表和列表项的详情；但在紧凑型和中等窗口大小类别中，只显示列表或详情。

  • SupportingPaneScaffold：实现辅助窗格规范布局。

    在“较大”窗口大小类别中显示主要内容窗格和辅助窗格，但在“紧凑”和“中等”窗口大小类别中仅显示主要内容窗格。

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

配置和连续性

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

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

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

状态

自适应应用会响应可折叠设备折叠状态的变化。折叠状态包括桌面折叠状态和图书折叠状态。

图 7. 处于桌面折叠状态的可折叠设备。

借助 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 会以本地化方式模拟不同的设备配置，以便您测试任何可组合项内容。例如，您可以在单个设备或模拟器上单次运行测试套件，以测试多个任意界面大小。

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

主机端屏幕截图

主机端屏幕截图测试是一种快速且可扩缩的方式，可用于验证应用布局的外观。使用主机端屏幕截图，针对各种显示大小测试界面。

如需了解详情，请参阅 Compose 预览屏幕截图测试。

Compose 预览

借助 Compose 预览，您可以在 Android Studio 的设计视图中检查应用的界面。预览使用注释（例如 @PreviewScreenSizes、@PreviewFontScale 和 @PreviewLightDark），以便您查看各种配置中的可组合项内容。您甚至可以与预览互动。

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

如需了解详情，请参阅使用可组合项预览来预览界面。

模拟器

Android Studio 提供了各种模拟器来测试不同的布局大小：

  • 可调整大小的模拟器：可模拟手机、平板电脑或可折叠设备，并让您能够在这些设备之间快速切换
  • Pixel Fold 模拟器：模拟 Pixel Fold 大屏可折叠手机
  • Pixel Tablet 模拟器：模拟 Pixel Tablet 大屏设备
  • 桌面模拟器：用于测试自由式窗口、鼠标悬停和键盘快捷键

远程设备在线播放

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

远程设备流式传输功能已集成到 Android Studio 中。如需了解详情，请参阅 Android 设备串流功能（由 Firebase 提供支持）。

其他资源