欢迎参加我们将于 6 月 3 日举行的 #Android11:Beta 版发布会

应用微件设计指南

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

Android 4.0 中的示例应用微件

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

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

如需了解如何开发微件,请参阅《开发者指南》的应用微件部分。

标准微件剖析

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

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

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

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

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

确定微件的尺寸

每个微件必须定义 minWidthminHeight,表示默认情况下应占用的最小空间量。当用户向其主屏幕添加微件时,微件占用的宽度和高度通常会超过您指定的最小值。Android 主屏幕为用户提供了一个可用空间网格,供他们放置微件和图标。此网格可能因设备而异;例如,许多手机都提供 4x4 网格,而平板电脑则可提供更大的 8x7 网格。添加微件后,它将在水平和垂直方向进行拉伸,占用满足其 minWidthminHeight 约束条件所需的最小单元格数。正如我们在下文设计微件布局和背景图形中介绍的一样,为应用微件使用九宫格背景和灵活布局可让微件巧妙适应设备的主屏幕网格,并保持实用性和美观性。

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

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

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

示例音乐播放器微件

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

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

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

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

计算示例如下:

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

如果微件背景九宫格中存在固有的内容内边距,则应将其相应地加到 minWidthminHeight 上。

可调整大小的微件

从 Android 3.1 开始,微件可以横向和/或纵向调整大小,这意味着 minWidthminHeight 实际上变成了微件的默认尺寸。您可以使用 minResizeWidthminResizeHeight 指定最小微件尺寸;这些值应该指定微件小于什么尺寸会难以辨认或无法使用。

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

向应用微件添加外边距

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

简单的做法是编写单一布局,为早期版本的平台应用自定义外边距,并且不为 Android 4.0 及更高版本添加额外的外边距。如需了解如何使用布局 XML 实现此目标,请参阅《开发者指南》中的向应用微件添加外边距

设计微件布局和背景图形

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

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

九宫格边框像素

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

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

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

以下布局示例可用于一个显示文本信息和两个按钮的音乐微件。它参阅了之前关于如何根据操作系统版本添加外边距的讨论内容。请注意,要向微件添加外边距,最稳健且最具弹性的方式是将微件框架和内容封装在有内边距的 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>
    

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

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

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

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

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

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

使用应用微件模板包

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

微件模板摘录

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

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

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