构建自适应应用

目前已有超过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. 基于显示宽度的窗口大小类。

使用 Compose Material 3 自适应库的currentWindowAdaptiveInfo()顶级函数计算应用的WindowSizeClass。该函数返回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 自适应库 包含管理窗口大小类、导航组件、多窗格布局以及折叠姿态和铰链位置的组合项,例如

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

配置和连续性

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

当应用窗口大小调整、折叠设备的姿态更改或屏幕密度或字体更改时,就会发生配置更改。

默认情况下,配置更改会重新创建应用活动,并且所有活动状态都会丢失。为了保持连续性,自适应应用会在活动的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 以本地化的方式模拟不同的设备配置,以用于您想要测试的任何可组合内容。例如,您可以在单个设备或模拟器上测试套件的单个运行中测试多个任意 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 中。更多信息,请参见 Android 设备流,由 Firebase 提供支持

其他资源