应用小部件概述

小部件是主屏幕自定义的重要组成部分。您可以将它们视为“一瞥”应用程序中最重要的数据和功能的视图,这些视图可直接在用户的主屏幕上访问。用户可以将小部件移动到他们的主屏幕面板上,并且,如果支持,可以调整它们的大小以根据他们的喜好调整小部件中的信息量。

本文档介绍了您可以创建的不同类型的小部件以及要遵循的设计原则。要使用 Remove View API 和 XML 布局构建应用小部件,请参阅 创建简单小部件。要使用 Kotlin 和 Compose 样式 API 构建小部件,请参阅 Jetpack Glance.

小部件类型

在计划您的 widget 时,请考虑您想要构建哪种 widget。widget 通常属于以下类别之一

信息小部件

Example weather widget displaying Tokyo as mostly
            cloudy, 14 degrees, and the projected temperature beginning at
            4pm through 7pm
图 1. 天气应用中的信息小部件。

信息小部件通常显示关键的信息元素并跟踪这些信息随时间的变化。信息小部件的示例包括天气小部件、时钟小部件或体育比分跟踪小部件。点击信息小部件通常会启动相关应用程序并打开小部件信息的详细视图。

集合小部件

集合小部件专门用于显示同一类型的多个元素,例如图库应用中的一组图片、新闻应用中的一组文章或通讯应用中的一组电子邮件或消息。集合小部件可以垂直滚动。

集合小部件通常侧重于以下用例

  • 浏览集合。
  • 打开集合中的一个元素到其在相关应用程序中的详细视图。
  • 与元素交互,例如将它们标记为已完成——在 Android 12(API 级别 31)中支持复合按钮。

控制小部件

A widget for an app called 'Light list,' displaying toggle switches
            labeled 'Bedroom,' 'Kitchen', and 'Living room,' with the first two
            toggle switches turned off
图 4. 控制小部件的示例。

控制小部件的主要目的是显示常用功能,以便用户可以在不打开应用程序的情况下从主屏幕触发它们。您可以将它们视为应用程序的遥控器。一个控制小部件的示例是家用控制小部件,它允许用户打开或关闭房屋中的灯光。

与控制小部件交互可能会在应用程序中打开相关的详细视图。这取决于控制小部件的功能是否输出任何数据,例如搜索小部件的情况。

混合小部件

A general music app showing buttons for 'thumbs
            down,' back, play/pause, forward, and 'thumbs up.' The artist and
            track are listed as 'Artist' and 'Example music,' respectively.
图 5. 音乐应用程序小部件的示例。

虽然一些小部件代表了前面部分中的类型之一——信息、集合或控制——但许多小部件是混合了不同类型元素的混合体。例如,音乐播放器小部件主要是一个控制小部件,但它还向用户显示当前正在播放的曲目,就像一个信息小部件。

在计划您的 widget 时,请围绕其中一种基本类型进行设计,并在需要时添加其他类型的元素。

将小部件与 Google 助理集成

任何类型的小部件都可以由 Google 助理显示,以响应用户的语音命令。您可以配置您的 widget 以满足 App Actions,使用户能够在 Assistant 表面(如 Android 和 Android Auto)上获得快速答案和交互式应用体验。有关为助理配置小部件的更多详细信息,请参阅 将 App Actions 与 Android 小部件集成.

小部件限制

虽然小部件可以理解为“迷你应用程序”,但有一些限制,在设计小部件之前需要了解这些限制。

手势

由于小部件位于主屏幕上,因此它们必须与在那里建立的导航共存。与全屏应用程序相比,这限制了小部件中可用的手势支持。虽然应用程序可能允许用户在屏幕之间水平导航,但该手势已在主屏幕上用于在主屏幕之间导航。

小部件中可用的唯一手势是触摸垂直滑动

元素

鉴于对小部件可用的手势的限制,一些依赖于受限制手势的 UI 构建块不可用于小部件。有关支持的构建块的完整列表以及有关布局限制的更多信息,请参阅 创建小部件布局提供灵活的小部件布局.

设计指南

小部件内容

小部件是通过“宣传”应用程序中可用的新颖有趣的内容来吸引用户关注应用程序的绝佳方式。

就像报纸首页上的预告片一样,小部件整合并集中了应用程序的信息,并提供与应用程序中更丰富细节的联系。可以说小部件是信息“零食”,而应用程序是“正餐”。确保您的应用程序显示有关信息项的更多细节,而不是小部件显示的细节。

除了纯粹的信息内容之外,请考虑让您的 widget 提供到应用程序常用区域的导航链接。这使用户可以更快地完成任务,并将应用程序的功能范围扩展到主屏幕。

小部件上导航链接的理想候选者是

  • 生成性功能:这些功能允许用户为应用程序创建新内容,例如创建新文档或新消息。

  • 在顶层打开应用程序:点击信息元素通常会将用户导航到更低级别的详细信息屏幕。提供对应用程序顶层的访问权限可以提供更多导航灵活性,并且可以取代用户用来从主屏幕导航到应用程序的专用应用程序快捷方式。将应用程序图标用于此功能还可以为您的 widget 提供明确的标识,如果显示的数据模棱两可的话。

小部件大小调整

Standard Google Clock widget
图 6. 标准 Google 时钟小部件。

触摸并按住可调整大小的小部件,然后释放它会将小部件置于调整大小模式。用户可以使用拖动手柄或小部件角来设置他们首选的大小。

调整大小允许用户在主屏幕放置网格的约束范围内调整小部件的高度和宽度。您可以决定您的 widget 是自由可调整大小还是仅限于水平或垂直尺寸更改。如果您的 widget 本质上是固定大小的,则您不必支持调整大小。

允许用户调整小部件大小具有重要的优势

  • 他们可以微调他们想在每个小部件上看到多少信息。
  • 他们可以更好地影响小部件和快捷方式在主面板上的布局。

根据您正在创建的小部件类型,为您的 widget 计划调整大小策略。基于列表或网格的集合小部件通常很简单,因为调整小部件大小会扩展或收缩垂直滚动区域。无论小部件的大小如何,用户仍然可以滚动所有信息元素以使其可见。

信息小部件需要更多的规划,因为它们不可滚动,所有内容都必须适合给定的尺寸。您必须根据用户通过调整大小操作定义的大小动态调整小部件的内容和布局。

在下面的示例中,用户可以分三步调整天气小部件的大小,在小部件增大时公开有关当前位置天气的更多信息。

Example weather widget in the smallest 3x2-grid size, and listing the
            location name (Tokyo), temperature (14°), and symbol indicating
            partially cloudy weather
图 7. 3x2 网格“小”尺寸的示例天气小部件。


Example weather widget in a 5x2 'medium' size, including all of the
            UI from the 3x2-grid size plus the label 'mostly cloudy' and
            forecast temperatures from 4pm through 7pm
图 8. 5x2 网格“中”尺寸的示例天气小部件。


Example weather widget in a 5x4 'large' size, including all of the UI
            from the 3x2- and 5x2-grid sizes plus a forecast of the weather
            from Tuesday through Friday
图 9. 5x4 网格“大”尺寸的示例天气小部件。

对于每个 widget 大小,请确定显示应用程序信息的多少。对于较小的尺寸,请集中在基本信息上,然后随着 widget 水平和垂直增长,添加上下文信息。

布局注意事项

您可能会倾向于根据您开发的设备的放置网格尺寸来布局您的 widget。这可能是一个有用的初始近似值,但请牢记以下几点

  • 在“尺寸桶”而不是可变网格尺寸之间规划您的 widget 调整大小策略会为您提供最可靠的结果。
  • 单元格的数量、大小和间距在不同设备上可能会有很大差异。因此,您的 widget 能够灵活地适应比预期更多或更少的空间非常重要。
  • 当用户调整 widget 大小时,系统会使用您的 widget 可以重新绘制自己的 dp 尺寸范围进行响应。
  • 从 Android 12 开始,您可以提供更精细的尺寸属性和更灵活的布局。这包括
    • 指定小部件尺寸约束。例如,您可以指定小部件的目标尺寸——以网格单元为单位——以及最大可能尺寸。
    • 提供 响应式布局,这些布局会根据小部件的大小而改变。
    • 提供 精确尺寸布局,这些布局允许启动器使用纵向和横向模式的大小选项进行响应,对于手机来说,或者对于可折叠设备来说使用四种尺寸进行响应。
    • 使用更新指南和新 API来确定小部件的适当尺寸。

用户的小部件配置

有时,用户需要先设置小部件才能使用它。例如,考虑一个电子邮件小部件,用户需要先选择邮件文件夹才能显示收件箱,或者是一个静态照片小部件,用户需要先从图库中选择一张图片才能显示。当用户将小部件拖放到主屏幕上时,Android 小部件会显示其配置选项。

小部件设计清单

  • 将重点放在小部件上的少量可一目了然的信息上。扩展应用程序中的信息。
  • 选择适合您的目的的小部件类型。
  • 计划小部件内容如何适应不同的尺寸。
  • 确保布局可以拉伸和收缩,使小部件布局独立于方向和设备。
  • 考虑小部件是否需要任何额外的配置。