构建自适应应用

超过 3 亿台 Android 大屏设备(包括平板电脑) 可折叠设备、ChromeOS 设备、车载显示屏和电视如今都在使用,更多设备 将持续更新。针对日益增长的数字产品提供最佳用户体验 和多样性大屏设备 以及标准手机 自适应应用

什么是自适应应用?

自适应应用会根据应用显示界面的变化重组布局,主要是 应用窗口大小的变化但自适应应用还能够 可折叠设备的折叠状态变化,例如桌面折叠状态或图书折叠状态; 以及屏幕密度和字体大小的变化

您不仅仅是拉伸或收缩界面元素 窗口大小,自适应应用会取代布局组件并显示或隐藏内容。 例如,在标准手机上,自适应应用可能会显示底部 但在大屏设备上则是侧边导航栏。在大屏设备上 自适应应用会显示更多内容,例如双窗格列表-详情布局;已开启 小屏幕,内容较少,无论是列表还是详情。

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

在过去,以手机为中心快速淡出后,应用会全屏运行。目前,应用程序在 在独立于设备屏幕的任意大小的窗口中启用多窗口模式 。用户可以随时更改窗口大小。因此,即使在一台设备上 那么应用必须是自适应应用。

自适应应用看起来非常棒,在任何配置下都能运行良好。

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

用户希望您的应用在所有设备上都能完美运行,并且能够提供 针对大屏设备的增强功能用户在多窗口模式下处理多项任务 提升应用体验和工作效率。

应用只能在标准手机上执行单一任务,无法满足用户需求不断增长 各种可能性的基础。

Google Play

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

Google Play 将针对大屏设备优化的应用和游戏排名高于未优化的应用和游戏 。排名依据大屏设备应用质量指南。较高 排名让多设备用户能够看到内容,从而提高曝光度 针对大屏设备获得的评分和评价。

不符合 Play 商店的大屏幕质量标准的应用在显示屏上 警告。该警告会告知用户,应用可能会 在大屏设备上表现不佳。

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

构建自适应应用,让更多用户在 Google Play 上发现该应用,并最大限度地 可下载您的应用的设备的数量。

如何开始使用

从规划到开发,在应用开发的所有阶段都要考虑自适应设计 部署。向平面设计师介绍自适应设计。在设计应用时 您将构建一款易于管理、可扩展、 。

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

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

窗口大小类别

不同设备或同一设备上的应用窗口尺寸可以不同 不同的设备屏幕方向会产生不同的宽高比。在 多窗口模式、应用窗口大小、宽高比和屏幕方向 与设备屏幕不同。

自适应应用可简化和泛化确定和管理 窗口大小、宽高比和屏幕方向(仅考虑应用窗口) (在应用窗口全屏显示时也可进行加载)。

窗口大小类别:将应用窗口分类为“紧凑”“中等”或“中等” 展开

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

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

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

内容窗格

activity 的布局有时称为“屏幕”。例如,您的 应用可能具有主屏幕、列表屏幕和项目详情屏幕。通过 该术语意味着每个 activity 都会填满设备屏幕。

不过,在尺寸足以支持较大宽度的设备屏幕上 窗口大小类别,因此屏幕上可以同时有多个 activity 屏幕窗格是一个更为精确的术语,用于表示各个活动的内容显示。

窗口大小类别可让您确定要在多少个内容窗格中显示 多窗格布局,如 Material Design 中所述。

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

窗格可以导航。在较小和中等窗口大小类别中,应用会显示 单个窗格;因此,导航到任何目的地时都会显示一个窗格。

在较大窗口大小类别中,应用能够以多种方式显示相关内容 例如列表详情布局。系统会显示导航到任一窗格 双窗格布局如果窗口大小变为“较小”或“中等” 自适应应用仅显示一个窗格,即导航目的地、列表或 提供详细信息

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

Compose Material 3 自适应

Jetpack Compose 是用于构建自适应应用的现代声明式方法 而无需复制多个布局文件并因此进行维护

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

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

配置和连续性

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

调整应用窗口大小(应用窗口的折叠状态)时,会发生配置更改。 可折叠设备发生变化,或者屏幕密度或字体发生变化。

默认情况下,配置更改会重新创建应用 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 数据中心。

大屏设备应用质量指南

遵循大屏设备应用质量指南,确保自适应应用能够正常运行 在平板电脑、可折叠设备和 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 中。如需更多信息 请参阅由 Firebase 提供支持的 Android 设备串流功能

其他资源