应用微件设计指南

应用 widget(有时简称为“widget”)是 Android 1.5 中引入的功能,在 Android 3.0 和 3.1 中得到了大幅改进。widget 可在用户的主屏幕上一目了然地显示应用的最及时或其他相关信息。标准 Android 系统映像包含多个 widget,其中包括模拟时钟、音乐和其他应用的 widget。

Android 4.0 中的示例应用微件

图 1. Android 4.0 中的示例应用微件。

本文档介绍了如何设计 widget,使其在图形上与其他 widget 以及 Android 主屏幕的其他元素(例如启动器图标和快捷方式)相适应。此外,还介绍了微件图片的一些标准以及一些微件图形提示和技巧。

如需了解如何开发 widget,请参阅开发者指南应用 widget 部分。

标准微件剖析

典型的 Android 应用 widget 包含三个主要组件:边界框、框架以及 widget 的图形控件和其他元素。应用 widget 可以包含 Android 中的一部分 View widget;支持的控件包括文本标签、按钮和图片。如需查看可用 View 的完整列表,请参阅开发者指南中的创建应用 widget 布局部分。精心设计的 widget 在边界框和框架的边缘之间留出一些外边距,并在框架和微件控件的内边缘之间留出一些内边距。

微件通常在边界框、框架和控件之间留有外边距和内边距

图 2. widget 通常在边界框和框架之间留有外边距,并在框架和微件控件之间留有内边距。

注意 :从 Android 4.0 开始,系统会自动在应用 widget 框架和应用 widget 的边界框之间留出外边距,以更好地与用户主屏幕上的其他 widget 和图标对齐。为了充分利用这种强烈建议的行为,请将应用的 targetSdkVersion 设置为 14 或更高。

旨在与主屏幕上的其他 widget 契合的 widget 会从主屏幕上的其他元素中获取对齐提示;它们也使用标准的着色效果。本页中介绍了所有这些详细信息。

确定微件的尺寸

每个 widget 都必须定义 minWidthminHeight,以指明默认情况下应占用的最小空间量。当用户向其主屏幕添加 widget 时,该 widget 所占空间通常大于您指定的最小宽度和高度。Android 主屏幕为用户提供了可用空间网格,供他们放置 widget 和图标。此网格可能因设备而异;例如,许多手机都提供 4x4 网格,而平板电脑可以提供更大的 8x7 网格。添加 widget 后,它会在水平和垂直方向上拉伸,占据满足其 minWidthminHeight 约束条件所需的最小单元数。正如我们在下文的设计 widget 布局和背景图形中所讨论的,为应用 widget 使用九宫格背景和灵活布局可让 widget 很好地适应设备的主屏幕网格,同时保持易用性和美观性。

虽然单元格的宽度和高度以及应用于 widget 的自动外边距量可能因设备而异,但您可以使用下表根据所需的占用网格单元格数量大致估算 widget 的最小尺寸:

单元格数量
(列数或行数)
可用尺寸 (dp)
minWidthminHeight
1 40dp
2 110dp
3 180dp
4 250dp
n 70 × n − 30

最好保守地使用 minWidthminHeight,指定以良好默认状态呈现 widget 的最小尺寸。关于如何提供 minWidthminHeight 的示例,假设您有一个音乐播放器 widget,其中显示当前正在播放的歌曲的音乐人和歌名(垂直堆叠)、播放按钮和下一步按钮:

示例音乐播放器微件

图 3. 示例音乐播放器微件。

最小高度应为音乐人和歌名的两个 TextView 的高度,加上一些文本外边距。最小宽度应为播放下一步按钮的最小可用宽度、最小文本宽度(例如 10 个字符的宽度),再加上任何水平文本外边距。

用于计算最小宽度/高度的尺寸和外边距示例

图 4. 用于计算 minWidth/minHeight 的尺寸和外边距示例。我们选择 144dp 作为文本标签的良好最小宽度示例。

计算示例如下:

  • minWidth = 144dp + (2 × 8dp) + (2 × 56dp) = 272dp
  • minHeight = 48dp + (2 × 4dp) = 56dp

如果 widget 背景 9-patch 中存在任何固有的内容内边距,您应相应地添加到 minWidthminHeight

可调整大小的微件

从 Android 3.1 开始,widget 可以水平和/或垂直调整大小,这意味着 minWidthminHeight 实际上成为了 widget 的默认尺寸。您可以使用 minResizeWidthminResizeHeight 指定 widget 的最小尺寸;这些值应指定 widget 难以辨认或无法使用的尺寸。

这通常是集合微件(例如基于 ListViewGridView 的微件)的首选功能。

向应用微件添加外边距

如前所述,对于将 targetSdkVersion 指定为 14 或更高的应用,Android 4.0 会自动为主屏幕上 widget 的每个边缘添加标准小外边距。这有助于在视觉上平衡主屏幕,因此在 Android 4.0 中,我们建议您不要在应用 widget 的背景形状之外添加任何额外的外边距

您可以轻松编写单个布局,针对早期版本的平台应用自定义外边距,而针对 Android 4.0 及更高版本没有额外的外边距。如需了解如何使用布局 XML 实现这一点,请参阅《开发者指南》中的向应用 widget 添加外边距

设计微件布局和背景图形

大多数微件都有一个实心的背景矩形或圆角矩形形状。最佳做法是使用九个图块来定义此形状;每种屏幕密度对应一个图块(如需了解详情,请参阅支持多种屏幕)。您可以使用 draw9patch 工具创建九宫格,也可以直接使用 Adobe® Photoshop 等图形编辑程序。这样微件背景形状就会占据整个可用空间。九宫格应无边框,没有提供额外外边距的透明像素,为了实现细微的阴影或其他细微效果,除了可能有几个边框像素之外。

注意 :与 activity 中的控件一样,您应使用状态列表可绘制对象确保交互式控件具有不同的视觉聚焦状态和按下状态。

九宫格边框像素

图 5. 表示可拉伸区域和内容内边距的九宫格边框像素。

某些应用 widget(例如使用 StackView 的 widget)具有透明背景。对于这种情况,StackView 中的每个单独项都应使用无边框九宫格背景,外边距只有很少或没有边框透明像素。

对于微件的内容,您应使用 RelativeLayoutLinearLayoutFrameLayout 之类的灵活布局。正如您的 activity 布局必须适应不同的物理屏幕尺寸一样,widget 布局必须适应不同的主屏幕网格单元格大小。

下面是一个显示文本信息和两个按钮的音乐 widget 布局示例。它参阅了之前关于如何根据操作系统版本添加外边距的讨论内容。请注意,为 widget 添加外边距的最稳健和弹性的方式是将 widget 框架和内容封装在有内边距的 FrameLayout 中。

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="@dimen/widget_margin">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="@drawable/my_widget_background">

    <TextView
      android:id="@+id/song_info"
      android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1" />

    <Button
      android:id="@+id/play_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />

    <Button
      android:id="@+id/skip_button"
      android:layout_width="@dimen/my_button_width"
      android:layout_height="match_parent" />
  </LinearLayout>
</FrameLayout>

现在看一下上一部分中的音乐 widget 示例,您就可以开始使用灵活布局属性,如下所示:

示例音乐微件的灵活布局和属性摘录

图 6. 灵活布局和属性摘录。

当用户将 widget 添加到其主屏幕时,在示例 Android 4.0 设备上,每个网格单元格的尺寸为 80dp × 100dp,并且所有尺寸都会自动应用 8dp 的外边距,该 widget 将被拉伸,如下所示:

音乐微件位于 80dp x 100dp 的示例网格上,系统自动添加了 8dp 的外边距

图 7. 音乐微件位于 80dp x 100dp 的示例网格上,系统自动添加了 8dp 的外边距。

使用应用微件模板包

在开始设计新的 widget 或更新现有 widget 时,建议先查看下面的 widget 设计模板。下面的可下载软件包包含 9-patch 背景图形、XML 和 Adobe® Photoshop 源文件,适用于多种屏幕密度、操作系统版本微件样式和微件颜色。模板包还包含一些图形,用于使您的整个 widget 或 widget 的某些部分(例如按钮)具有互动性。

微件模板摘录

图 8. 应用微件模板包的摘录(中密度、深色、Android 4.0/旧版样式、默认/聚焦/按下状态)。

您可以通过以下链接获取最新的应用微件模板包压缩文件:

下载适用于 Android 4.0 的应用微件模板包 »