自适应应用入门

Google Play 大屏徽章

让您的应用在 Google Play 上脱颖而出,吸引那些在平板电脑、可折叠设备、Googlebook 和其他大屏设备上寻求优质应用体验的用户。

满足自适应应用质量指南的第 2 层级要求,针对所有屏幕尺寸优化应用;满足第 1 层级要求,打造专为大屏设备设计的差异化体验。然后,获取您的 Google Play 徽章!

目前,有超过 3 亿台 Android 大屏设备(包括平板电脑、可折叠设备、Googlebook、ChromeOS 设备、车载显示屏和电视)正在使用中,而且这一数字还在不断增长。为了在日益增多且多样化的大屏设备以及标准手机上提供最佳用户体验,请构建自适应应用。

什么是自适应应用?

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

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

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

过去,应用通常以全屏模式运行。现在,应用在多窗口模式下运行,窗口大小任意,与设备屏幕尺寸无关。用户可以随时更改窗口大小。因此,即使在单一设备类型上,应用也必须具有自适应性。

自适应应用在任何设备上、任何配置下都能呈现出色的视觉效果和运行效果。

为何要构建自适应界面?

用户希望您的应用在所有设备上都能完美运行,并能在大屏设备上提供更强大的功能。用户可在多窗口模式下执行多任务,从而获得更出色的应用体验并提高工作效率。

如果应用在标准手机上仅限于单任务处理,就会错失不断扩大的用户群,无法提供多样化的可能性。

Google Play

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

Play 会将针对大屏设备优化的应用和游戏排在未优化的应用之前。Google Play 会根据大屏设备应用质量指南进行排名。 排名越高,曝光度越高,因为多设备用户可以在手机上看到针对大屏设备的评分和评价。

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

Google Play 商品详情中显示一条警告,内容为“可能未针对您的设备进行优化”。
图 2. 应用详情页面上的技术质量警告。

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

如何开始

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

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

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

窗口大小类别

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

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

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

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

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

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

内容窗格

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

不过,在足够大、可支持展开宽度窗口大小类别的设备屏幕上,多个 activity 屏幕可以同时显示在屏幕上。窗格是更精确的术语,用于描述单个 activity 的内容显示。

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

设备屏幕分为多个窗格:紧凑型和中等窗口大小类别中有一个窗格,展开型窗口大小类别中有两个窗格。
图 4. 每个窗口大小类别的内容窗格数量。

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

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

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

Compose Material 3 Adaptive

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

其他资源