构建自适应应用程序

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

什么是自适应应用程序?

自适应应用程序根据应用程序显示的更改(主要是应用程序窗口大小的更改)重新调整布局。但自适应应用程序还会适应可折叠设备姿势的更改,例如桌面姿势或书籍姿势,以及屏幕密度和字体大小的更改。

自适应应用程序不会仅仅根据不同的窗口大小拉伸或缩小 UI 元素,而是会替换布局组件并显示或隐藏内容。例如,在标准手机上,自适应应用程序可能会显示底部导航栏,但在大型屏幕上,则会显示导航栏。在大型屏幕上,自适应应用程序会显示更多内容,例如双窗格、列表详细信息布局;而在小型屏幕上,会显示更少内容,要么是列表,要么是详细信息。

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

在过去,以手机为中心的应用程序全屏运行,现在,应用程序以多窗口模式运行,在任意大小的窗口中运行,与设备屏幕大小无关。用户可以随时更改窗口大小。因此,即使在单个设备类型上,应用程序也必须是自适应的。

自适应应用程序在任何设备上的任何配置中看起来都很好,并且运行良好。

为什么要构建自适应 UI?

用户期望您的应用程序在所有设备上都能完美运行,并在大型屏幕上提供增强功能。用户以多窗口模式进行多任务处理,以获得增强的应用程序体验和更高的生产力。

仅限于标准手机上的单任务处理的应用程序错过了不断扩展的用户群的多样化可能性。

Google Play

Google Play 提供了平板电脑和可折叠设备特定的应用程序集合和推荐,使用户能够发现高质量的应用程序。

Play 将针对大型屏幕优化的应用程序和游戏排名高于未优化的应用程序。排名基于 大型屏幕应用程序质量指南。更高的排名会提高可发现性,使多设备用户能够在手机上看到针对大型屏幕的特定评分和评论。

不符合 Play 商店大型屏幕质量标准的应用程序会在应用程序详细信息页面上显示警告。警告提示用户该应用程序可能在大型屏幕设备上无法正常运行。

图 2. 应用程序详细信息页面上的技术质量警告。

构建自适应应用程序以扩大在 Google Play 上的可发现性,并最大限度地增加可以下载您的应用程序的设备数量。

如何入门

在应用程序开发的所有阶段(从规划到部署)考虑自适应设计。将自适应设计告知图形设计师。设计您的应用程序以使其具有自适应性,这样您就可以构建一个易于管理、可扩展且适用于未来外形尺寸和窗口模式的应用程序。

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

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

窗口大小类

应用程序窗口尺寸可能在不同的设备上有所不同,或者在可折叠设备的情况下,即使应用程序全屏也是如此。不同的设备方向会产生不同的纵横比。在多窗口模式下,应用程序窗口大小、纵横比和方向可能与设备屏幕不同。

自适应应用程序通过仅在呈现布局时考虑应用程序窗口,简化和概括了确定和管理窗口大小、纵横比和方向的问题,这也适用于应用程序窗口全屏时。

窗口大小类 根据窗口宽度或高度将应用程序窗口分类为紧凑中等扩展

Depiction of the compact, medium, and expanded width window size classes.
图 3. 基于显示宽度的窗口大小类。

使用 WindowSizeClass currentWindowAdaptiveInfo() Compose Material 3 自适应库 WindowAdaptiveInfo windowSizeClass

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

内容窗格

活动的布局有时被称为屏幕。例如,您的应用程序可能有一个主屏幕、一个列表屏幕和一个项目详细信息屏幕。术语暗示每个活动都填充了设备屏幕。

但是,在足够大以支持扩展宽度窗口大小类的设备屏幕上,多个活动屏幕可以同时显示在屏幕上。窗格是单个活动的更准确的内容显示术语。

窗口大小类使您能够确定在多窗格布局中显示多少个内容窗格,如 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 自适应

Jetpack Compose Compose Material 3 自适应库

NavigationSuiteScaffold: ListDetailPaneScaffold: 列表详细信息规范布局 SupportingPaneScaffold: 支持窗格规范布局

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

配置和连续性

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

配置更改发生在应用程序窗口调整大小、可折叠设备姿势更改或屏幕密度或字体更改时。

默认情况下,配置更改会重新创建应用程序活动,并且所有活动状态都会丢失。为了保持连续性,自适应应用程序会在活动的 onSaveInstanceState() ViewModel 中保存状态。

姿势

自适应应用程序会响应可折叠设备姿势的更改。姿势包括桌面姿势和书籍姿势。

图 7. 可折叠设备处于桌面姿势。

Jetpack WindowManager WindowInfoTracker DisplayFeature FoldingFeature.State currentWindowAdaptiveInfo() WindowAdaptiveInfo windowPosture

WindowInfoTracker DisplayFeature FoldingFeature.State currentWindowAdaptiveInfo() WindowAdaptiveInfo windowPosture

触控以外的输入

用户经常将外部键盘、触控板、鼠标和触控笔连接到大型屏幕设备。外设增强了用户的生产力、输入精度、个人表达和可访问性。大多数 ChromeOS 设备都内置了键盘和触控板。

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

为了完全支持所有尺寸的外形尺寸,自适应应用程序支持所有类型的输入。

如何测试自适应应用程序

测试不同的屏幕和窗口大小 以及不同的设备配置。使用主机端截图和 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 设备流

其他资源