构建自适应应用

如今正在使用超过 3 亿台 Android 大屏设备,包括平板电脑、可折叠设备、ChromeOS 设备、车载显示屏和电视,未来还会有更多设备在使用该设备。为了在大屏设备(数量和多样性不断增加)以及标准手机上提供最佳用户体验,请构建自适应应用。

什么是自适应应用?

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

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

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

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

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

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

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

在标准手机上只能单任务运行的应用会错失不断扩大的用户群,无法提供多种可能性。

Google Play

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

Google Play 会将针对大屏设备进行了优化的应用和游戏的排名排在未优化的应用之上。排名基于大屏设备应用质量指南。排名越高,应用的可被发现性就越高,因为这样可以让多设备用户在手机上看到适用于大屏设备的评分和评价。

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

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

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

如何开始使用

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

如需创建支持所有显示屏尺寸和配置的自适应应用,请执行以下操作:

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

窗口大小类别

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

自适应应用通过在渲染布局时仅考虑应用窗口,简化并概括了确定和管理窗口大小、宽高比和屏幕方向的问题,这种方法在应用窗口全屏显示时也适用。

窗口大小类别会根据窗口宽度或高度将应用窗口分类为“较小”“中等”或“较大”。

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

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

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

内容窗格

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() 顶级函数,该函数会返回包含 windowPostureWindowAdaptiveInfo 实例。

触控以外的输入

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

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

  • Jetpack Compose 1.7 及更高版本:默认支持键盘标签页导航以及鼠标或触控板点击、选择和滚动。

  • 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 提供支持)

其他资源