应用 widget 概览

widget 是自定义主屏幕的一个重要方面。您可以将其视为一览无余的应用重要数据和功能,可直接在用户的主屏幕上访问。用户可以在其主屏幕面板上移动 widget,并且如果支持,还可以调整 widget 的大小,以根据自己的偏好调整 widget 中的信息量。

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

微件类型

在规划 widget 时,请考虑要构建哪种类型的 widget。widget 通常属于以下某个类别:

信息微件

示例天气微件,显示东京的天气基本为多云,气温为 14 度,投影温度从下午 4 点到晚上 7 点开始
图 1. 来自天气应用的信息 widget。

信息 widget 通常用于显示关键信息元素,并跟踪该信息随时间变化的情况。信息微件的示例包括天气微件、时钟微件或体育赛事比分跟踪微件。点按信息 widget 通常会启动关联的应用,并打开 widget 信息的详细视图。

集合微件

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

集合 widget 通常侧重于以下用例:

  • 浏览收藏集。
  • 在关联的应用中打开集合的某个元素,并进入其详情视图。
  • 借助 Android 12(API 级别 31)中对复合按钮的支持,与元素互动(例如将它们标记为已完成)。

控制微件

一个名为“灯具列表”的应用的 widget,显示标记为“卧室”“厨房”和“客厅”的切换开关,其中前两个切换开关处于关闭状态
图 4. 控制 widget 示例。

控制 widget 的主要用途是显示常用功能,以便用户无需打开应用即可从主屏幕触发它们。您可以将它们视为应用的遥控器。控制 widget 的一个示例是可让用户打开或关闭家中的灯的家居控制 widget。

与控制 widget 交互可能会在应用中打开关联的详情视图。这取决于控制 widget 的函数是否输出任何数据,例如在使用搜索 widget 的情况下。

混合微件

一个常规音乐应用,显示了“不喜欢”“返回”“播放/暂停”“前进”和“赞”按钮。音乐人和曲目分别列为“音乐人”和“示例音乐”。
图 5. 音乐应用 widget 示例。

虽然某些 widget 代表前面部分中的一种类型(信息、集合或控件),但许多 widget 都是混合使用不同类型的元素。例如,音乐播放器 widget 主要是一个控制 widget,但它也会向用户显示当前正在播放的曲目,例如信息 widget。

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

将 widget 与 Google 助理集成

Google 助理可以显示任何类型的 widget 来响应用户语音指令。您可以配置 widget 来执行与应用有关的 Action,让用户能够在 Android 和 Android Auto 等 Google 助理 surface 上获得快速解答和互动式应用体验。如需详细了解 Google 助理的 widget 执行方式,请参阅将与应用有关的 Action 与 Android widget 集成

微件限制

虽然 widget 可以理解为“迷你应用”,但在设计 widget 之前,必须了解一些限制。

手势

由于 widget 位于主屏幕上,因此它们必须与在该主屏幕上建立的导航共存。与全屏应用相比,这会限制 widget 中提供的手势支持。虽然应用可能会允许用户在屏幕之间水平导航,但已在主屏幕上采用该手势,以便在主屏幕之间导航。

适用于微件的手势只有触摸垂直滑动

元素

鉴于微件可用的手势存在限制,某些依赖于受限手势的界面构建块不适用于微件。如需查看支持的构建块的完整列表以及详细了解布局限制,请参阅创建 widget 布局提供灵活的 widget 布局

设计准则

微件内容

借助微件,您可以通过“宣传”应用中提供的新有趣内容来吸引用户使用您的应用。

就像报纸头版上的宣传片一样,微件会整合和浓缩应用的信息,并提供应用中更丰富的细节。您可以说微件是信息“零食”,而应用是“餐点”。请确保您的应用显示的信息项的更多详情比 widget 显示的内容更多。

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

适用于微件上的导航链接的候选对象包括:

  • 生成函数:此类函数可让用户为应用创建新内容,例如创建新文档或新消息。

  • 在顶层打开应用:点按信息元素通常会将用户转到较低层级的详情屏幕。提供对应用顶层的访问可提高导航灵活性,并且可以取代用户以其他方式从主屏幕导航到应用的专用应用快捷方式。如果您显示的数据不明确,针对此功能使用应用图标也可以为 widget 提供明确的标识。

微件大小调整

标准 Google 时钟微件
图 6. 标准 Google 时钟微件。

轻触并按住某个可调整大小的 widget,然后释放它,会使该 widget 进入调整大小模式。用户可以使用拖动手柄或 widget 角落来设置首选尺寸。

通过调整大小,用户可以在主屏幕放置网格的限制范围内调整 widget 的高度和宽度。您可以决定 widget 是可以自由调整大小,还是能够限制在水平或垂直大小上发生的变化。如果 widget 本身是固定大小,则不必支持调整大小。

允许用户调整 widget 大小有以下重要好处:

  • 他们可以微调要在每个微件上看到多少信息。
  • 他们可以更好地影响其主屏幕上的 widget 和快捷方式的布局。

根据要创建的 widget 类型为 widget 规划大小调整策略。基于列表或网格的集合 widget 通常非常简单,因为调整 widget 的大小会展开或收缩垂直滚动区域。无论 widget 的大小如何,用户仍可将所有信息元素滚动到视图中。

信息 widget 需要进行更多的实操规划,因为它们不可滚动,并且所有内容都必须适合给定大小。您必须将 widget 的内容和布局动态调整到用户通过调整大小操作定义的大小。

在以下示例中,用户可以分三步调整天气 widget 的大小,随着 widget 增大,用户可以显示有关当前位置的更丰富的天气信息。

最小 3x2 网格大小的天气微件示例,其中列出了地点名称(东京)、温度 (14°) 以及表示部分多云天气的符号
图 7. 3x2 网格“小”尺寸的天气 widget 示例。


5x2“中”大小的天气 widget 示例,包括 3x2 网格大小的所有界面,加上“大部分多云”标签,并预测下午 4 点到晚上 7 点的气温
图 8. 5x2 网格“中等”大小的天气 widget 示例。


5x4“大”尺寸的天气微件示例,包含 3x2 和 5x2 网格尺寸的所有界面,以及星期二到星期五的天气预报
图 9. 尺寸为 5x4 网格“大”的天气 widget 示例。

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

布局注意事项

开发者很容易根据您在开发时使用的设备的放置网格尺寸来布置您的 widget。这是一个有用的初始近似值,但请注意以下几点:

  • 跨“大小范围”(而不是可变的网格尺寸)规划 widget 大小调整策略,即可获得最可靠的结果。
  • 单元格的数量、大小和间距可能因设备而异。因此,微件必须灵活多变,能够容纳比预期更多或更少的空间,这一点非常重要。
  • 当用户调整 widget 的大小时,系统会以一个 dp 大小范围作为响应, widget 可以在该范围内重新绘制自身。
  • 从 Android 12 开始,您可以提供更精细的尺寸属性和更灵活的布局。其中包括:

用户配置的微件

有时,用户需要先设置 widget,然后才能使用它。假设有一个电子邮件 widget,用户在该 widget 中需要选择邮件文件夹才能显示收件箱;或者是一个静态照片 widget,在该 widget 中,用户必须分配图库中的一张图片才能显示。Android widget 会在用户将 widget 拖放到主屏幕上后立即显示其配置选项。

widget 设计核对清单

  • 在微件上重点显示小部分一目了然的信息。扩充应用中的信息。
  • 根据用途选择合适的微件类型。
  • 规划 widget 的内容如何适应不同的大小。
  • 通过确保布局可以拉伸和收缩,使 widget 布局独立于屏幕方向和设备。
  • 考虑您的 widget 是否需要任何其他配置。