应用 widget 概览

widget 是自定义主屏幕的一个重要方面。您可以把 将它们显示为“一目了然”应用最重要的数据和功能的视图 可直接在用户的主屏幕上访问的应用用户可以在其主屏幕面板间移动微件,如果系统支持,用户还可以调整微件的大小,按照他们的偏好量身定制微件中的信息量。

本文档介绍了您可以创建和 需要遵循的设计原则使用远程视图构建应用微件 API 和 XML 布局,请参阅创建简单的 widget。接收者 使用 Kotlin 和 Compose 样式 API 构建 widget,请参阅 Jetpack 概览

微件类型

在规划微件时,先想想您要构建什么样的微件。widget 通常属于以下某个类别:

信息微件

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

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

集合微件

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

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

  • 浏览收藏集。
  • 在关联的 应用。
  • 支持与元素交互,例如将它们标记为完成,并支持 Android 12(API 级别 31)中的复合按钮。

控制微件

一款名为“Light list”应用的微件,显示切换开关
            标签为“卧室”“厨房”和“客厅”使用前两个
            切换开关已关闭
图 4. 示例:控制 widget。

控制微件的主要用途是显示常用功能, 让用户无需打开 应用。您可以将其视为应用的遥控器。示例 Control widget 是一种家居控制 widget,可让用户调灯家中的灯具 。

与控制 widget 交互可能会在 应用。这取决于控制微件的函数是否会输出任何数据, 例如使用搜索微件时

混合微件

一个显示“拇指”按钮的常规音乐应用
            “返回、播放/暂停、前进和“我喜欢”操作。该音乐人和
            曲目列为“音乐人”和“示例音乐”。
图 5. 音乐应用 widget 示例。

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

在规划 widget 时,围绕其中一种基本类型进行设计并添加元素 其他类型的文件

将 widget 与 Google 助理集成

Google 助理可以根据用户的语音指令显示任何类型的 widget。您可以配置微件,以实现应用 操作:让用户能够 通过 Google 助理界面(例如 Android 和 Android 自动。 如需详细了解 Google 助理的 widget 执行方式,请参阅集成与应用有关的 Action Android 设备 微件

微件限制

虽然您可以将微件理解为“迷你应用”,但在设计微件之前,务必了解一些限制。

手势

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

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

元素

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

设计准则

微件内容

微件是通过“广告”来吸引用户使用您的应用的好方法新的和 您的应用中所提供的有趣内容

就像报纸头版上的宣传语一样,小部件会整合 集中显示应用的信息,并提供更丰富的细节 。你可以说微件就是信息“零食”而 它就是“大餐”。确保您的应用显示有关某项信息的更多详细信息 比微件显示的内容多。

除了纯信息内容之外,不妨考虑让微件提供指向应用中常用区域的导航链接。这样不仅能让用户更快地完成任务,而且还能将应用的功能覆盖面扩展到主屏幕。

适合在微件上显示的导航链接的合适候选对象如下:

  • 生成式功能:这些功能可让用户为应用创建新内容,如创建新文档或新消息。

  • 在顶层打开应用:点按信息元素通常会将用户导航到较低层级的详情屏幕。提供对 应用提供更高的导航灵活性, 替换用户用来导航到 应用。此外,如果您显示的数据含糊不清,将应用图标用于此功能还可以为微件提供明确的标识。

微件大小调整

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

触摸和按住一个可调整大小的 widget,然后松开,这个 widget 就会进入 调整大小模式。用户可以使用拖动手柄或微件的角来设置 首选尺寸。

通过调整大小,用户可以在 主屏幕放置网格的限制条件。您可以决定微件是可以自由调整大小,还是仅限于在水平或垂直方向上改变大小。如果 widget 固有,则不必支持调整大小 固定尺寸。

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

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

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

信息微件需要更多的实操规划,因为它们 可滚动,并且所有内容都必须适合给定大小。您必须动态地 根据用户通过 调整大小操作。

在以下示例中,用户可以通过 3 个步骤调整天气微件的大小,并随着微件的扩展在当前位置显示更丰富的天气信息。

最小 3x2 网格大小的天气微件示例,
            位置名称(东京)、温度 (14°) 及指示符号的符号
            局部多云天气
图 7. 3x2 网格“小”中的天气 widget 示例尺寸。


尺寸为 5x2 的“中等”天气 widget 示例,包括 3x2 网格大小的所有界面,以及“多云”标签和下午 4 点到晚上 7 点的预报温度
图 8. 5x2 网格的“中等”尺寸天气 widget 示例。


5x4“大”尺寸的天气 widget 示例包括
            提供 3x2 和 5x2 网格尺寸,另外还提供天气预报
            周二至周五
图 9. 5x4 网格“large”中的天气 widget 示例尺寸。

对于每种 widget 大小,确定显示多少应用信息。 对于尺寸较小的广告,应着重展示重要信息,然后添加 信息。

布局注意事项

您很容易根据 设备布局网格。这可能是一个有用的初始近似值,但请注意以下几点:

  • 如果您根据不同的“大小范围”(而不是可变网格尺寸)规划微件大小调整策略,将能够获得最可靠的结果。
  • 不同设备的单元格数量、大小和间距可能会有很大差异, 设备。因此,微件必须具有灵活性 容纳比预期更多或更少的空间。
  • 当用户调整 widget 大小时,系统会以 dp 大小范围作为响应, 也就是 widget 可以自行重新绘制的样式。
  • 从 Android 12 开始,您可以提供更精细的尺寸属性和更灵活的布局。其中包括:

用户配置的微件

有时,用户需要先设置微件,然后它才能变得有用。假设有一个电子邮件微件,用户在该微件之前需要先选择邮件文件夹 可以显示收件箱或静态照片微件, 要显示的图库中的图片Android widget 会显示其 配置选项。

widget 设计核对清单

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