标签图标

标签页图标是用于在多标签页界面中表示各个标签页的图形元素。每个标签图标都有两种状态:未选中和选中。

提供特定于密度的图标集中所述,您应为低、中和高密度屏幕创建单独的图标集。这样可确保图标在可安装您应用的各种设备上都能正确显示。如需了解有关如何使用多组图标的建议,请参阅设计人员提示

必须将最终图片作为透明的 PNG 文件导出。请勿添加背景颜色

图标模板包中提供了用于在 Adobe Photoshop 中创建图标的模板。

警告:与先前版本相比,Android 2.0 中的标签页图标样式发生了很大变化。如需为所有 Android 版本提供支持,开发者应该:
1. 将 Android 2.0 及更高版本的标签页图标放置在 drawable-hdpi-v5drawable-mdpi-v5drawable-ldpi-v5 目录中。
2. 将先前版本的标签页图标放在 drawable-hdpidrawable-mdpidrawable-ldpi 目录中。
3. 在应用清单<uses-sdk> 中将 android:targetSdkVersion 设置为 5 或更高。这将告知系统应使用新的标签页样式呈现标签页。

为两个标签状态提供图标

标签图标应具有两种状态:未选中和选中。如需提供具有多种状态的图标,开发者必须为每个图标创建一个状态列表可绘制对象,它是一个 XML 文件,列出了要用于不同界面状态的图片。

例如,对于包含名为“Friends”和“Coworkers”的标签页的标签页 widget,您可以使用类似下面的目录结构:

res/...
    drawable/...
        ic_tab_friends.xml
        ic_tab_coworkers.xml
    drawable-ldpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-mdpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-hdpi/...
        ...
    drawable-ldpi-v5/...
        ...
    drawable-mdpi-v5/...
        ...
    drawable-hdpi-v5/...
        ...

上面列出的 XML 文件的内容应引用相应的选中和未选中图标可绘制对象。例如,以下是 ic_tab_friends.xml 的代码:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- selected state -->
    <item android:drawable="@drawable/ic_tab_friends_selected"
          android:state_selected="true"
          android:state_pressed="false" />
    <!-- unselected state (default) -->
    <item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>

Android 2.0 - Android 2.3

以下指南介绍了如何为 Android 2.0 至 Android 2.3(API 级别 5 至 10)设计标签页图标。

尺寸和位置

标签页图标应使用简单的形状和形式,并且必须在最终资源内进行缩放和定位。

图 1 说明了在资源内放置图标的各种方法。您应将图标的大小调整为小于资源的实际边界大小。

为了指明图标的建议尺寸,图 1 中的每个示例都包含三个不同的辅助线矩形:

  • 红色框是完整资源的边界框。
  • 蓝色框是实际图标的建议边界框。图标框的尺寸小于整个素材资源框的大小,以便进行特殊图标处理。
  • 当内容为方形时,橙色框是实际图标的建议边界框。方形图标的框小于其他图标的框,以便在这两种类型之间建立一致的视觉权重。
  1. 高密度 (hdpi) 屏幕的标签图标尺寸:
    1. 完整资源:48 x 48 px
    2. 图标:42 x 42 px
  1. 中等密度 (mdpi) 屏幕的标签图标尺寸:
    1. 完整资源:32 x 32 px
    2. 图标:28 x 28 px
  1. 低密度 (ldpi) 屏幕的标签图标尺寸:
    1. 完整资源:24 x 24 px
    2. 图标:22 x 22 px

图 1. 调整标签页图标大小并定位在图标资源边界内。

样式、颜色和效果

标签图标是扁平、遮罩的正面图片。

标签图标应具有两种状态:选中和未选中。

未选中标签图标的效果视图。

图 2. 未选中标签图标的样式和效果。

注意:所有像素尺寸均适用于中等密度,应针对其他密度进行适当缩放。

1.填充颜色:#808080

2.内部内容:内部内容应从外部形状中挖除,并且仅由透明像素组成。
选中标签图标的效果视图。

图 3. 选中标签图标的样式和效果。

注意:所有像素尺寸均适用于中等密度,应针对其他密度进行适当缩放。

1.填充颜色:#FFFFFF

2.内部内容:内部内容应从外部形状中挖除,并且仅由透明像素组成。

3.外部发光:#000000,25% 不透明度
尺寸 3px

正确做法和错误做法

下面列出了为应用创建标签页图标时需要考虑的一些“注意事项”示例。

示例图标

下面显示的是 Android 平台中使用的标准高密度标签页图标。

警告:由于这些资源可能会在平台版本之间发生变化,因此不应引用系统的资源副本。如果您想使用任何图标或其他内部可绘制资源,则应将这些图标或可绘制对象的本地副本存储在应用资源中,然后从应用代码中引用本地副本。这样,即使系统的副本发生更改,您也可以保持对图标外观的控制。请注意,下面的网格并不完整。

Android 1.6 及更早版本

以下指南介绍了如何为 Android 1.6(API 级别 4)及更低版本设计标签页图标。

结构

  • 未选中的标签页图标具有与菜单图标相同的填充渐变和效果,但没有外部发光。
  • 选中的标签图标看起来就像未选中的标签图标,但内部阴影较暗,并且前部渐变与对话框图标相同。
  • 标签页图标有一个 1 像素的安全框,该安全框应仅与圆形的消除锯齿边缘重叠。
  • 此页面中指定的所有尺寸均基于 32x32 像素的画板尺寸。 在 Photoshop 模板内的边界框周围留出 1 px 的内边距。
未选中标签页图标结构的视图。

图 3. 未选中标签图标的安全框和填充渐变。图标尺寸为 32x32。

所选标签页图标结构的视图。

图 4. 。处于选定状态的标签图标的安全框和填充渐变。图标尺寸为 32x32。

未选中的标签图标

光线、效果和阴影

未选中的标签图标看起来与选中的标签图标类似,但内部阴影较暗,并且前部渐变与对话框图标相同。

未选中标签图标的光线、效果和阴影视图。

图 5. 未选中标签图标的光线、效果和阴影。

1.前部:渐变叠加 | 角度 90°
底部颜色:r 223 | g 223 | b 223
顶部颜色:r 249 | g 249 | b 249
底部颜色位置:0%
顶部颜色位置:75%
2.内部阴影:黑色 | 10% 不透明度 | 角度 90° 距离 2px | 尺寸 2px
3.内斜面:深度 1% | 方向向下 | 尺寸 0px | 角度 90° | 海拔 10°
突出显示白色 70% 不透明度
阴影黑色 25% 不透明度

分步说明

  1. 使用 Adobe Illustrator 等工具创建基本形状。
  2. 将形状导入 Adobe Photoshop 等工具,并在透明背景上缩放以适应 32x32 像素的图片。
  3. 针对未选中的状态过滤器添加图 5 所示的效果。
  4. 以 32x32 尺寸将图标作为启用了透明度的 PNG 文件导出。

选中的标签图标

所选标签页图标具有与菜单图标相同的填充渐变和效果,但没有外部发光。

所选标签页图标的光线、效果和阴影视图。

图 6. 所选标签页图标的光线、效果和阴影。

1.前部:使用调色板中的填充渐变。
2.内部阴影:黑色 | 20% 不透明度 |
角度 90° 距离 2px |
尺寸 2px
3.内斜面:深度 1% | 方向向下 | 尺寸 0px | 角度 90° |
海拔 10°
突出显示白色 70% 不透明度
阴影黑色 25% 不透明度

调色板

填充渐变
1:r 163 | g 163 | b 163
2:r 120 | g 120 | b 120
用作未选中标签图标上的颜色填充。

分步说明

  1. 使用 Adobe Illustrator 等工具创建基本形状。
  2. 将形状导入 Adobe Photoshop 等工具,并缩放以适应具有透明背景的 32x32 像素的画板。
  3. 针对选中状态过滤器添加图 6 所示的效果。
  4. 以 32x32 尺寸将图标作为启用了透明度的 PNG 文件导出。