自适应应用入门

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

什么是自适应应用?

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

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

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

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

自适应应用在任何配置的任何设备上都具有出色的外观和良好的运行效果。

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

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

如果应用仅限于在标准手机上执行单项任务,则会错失不断扩大的用户群和各种可能性。

Google Play

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

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

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

Google Play 商店中某个应用的商品详情,其中包含一条警告,指出“可能未针对您的设备进行优化”。
图 2.应用详细信息页面上的技术质量警告。

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

如何开始

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

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

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

窗口大小类别

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

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

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

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

使用 Compose Material 3 Adaptive librarycurrentWindowAdaptiveInfo() 顶级函数计算应用的 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 自适应库提供了 currentWindowAdaptiveInfo() 顶级函数,该函数会返回一个 WindowAdaptiveInfo 实例,其中包含 windowPosture

触控以外的输入方式

用户通常会将外接键盘、触控板、鼠标和触控笔连接到大屏设备。外围设备可以提高用户的工作效率、输入精度、个人表达能力和无障碍功能。大多数 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 和 Samsung 设备上运行应用。安装应用并进行调试,运行 ADB 命令,以及旋转和折叠设备,以验证应用在各种真实设备上的运行情况。

远程设备串流已集成到 Android Studio 中。如需了解详情, 请参阅由 Firebase 提供支持的 Android 设备串流

其他资源