Android Studio官方文档之添加多种密度的矢量图形

Android Studio官方文档之添加多种密度的矢量图形（Add Multi-Density Vector Graphics）

本文由peterZhang翻译

Android Studio中有一个被叫矢量工具（Vector Asset Studio）它能帮助我们增加多种图标和导入可以拉伸的矢量图形文件作为矢量资源图片在项目中。利用矢量图代替位图能降低打包应用程序的大小，因为相同的文件根据不同密度的屏幕能被调整并且图片不会失真。在老的Android版本中并不支持矢量图片，矢量工具在构建时，能转换你的矢量图适应各种不同密度的位图。

关于矢量工具About Vector Asset Studio

矢量工具能添加和描述一个矢量图形到项目的XML文件中。

维护一个xml文件要比更新多个不同分辨率的图形要更容易。

Android 4.4(API等级20)或者更低的等级是不支持矢量图片的。如果你设置的最低等级在api20之下，那么在使用矢量工具的时候，你可以有两种做法，生成png格式的文件或者使用支持库。

对于向下兼容，矢量工具生成带格栅的矢量图片。这些矢量图片会被一起打包在apk安装包中。你可以参考在java代码中矢量文件作为图像资源或者@drawable在xml代码中；当你的应用程序运行时，根据api等级矢量格栅图片会显示对应的图像。

而不是使用Android支持库23.2或者更高，你必须在build.gradle文件中增加一些文件，这仅仅是使用矢量图的技巧

支持矢量图形的类型（Supported vector graphic types）

google的重要设计（material design）说明提供了material图标，可以在应用程序中使用它们，而使用矢量工具能帮助你选择它们。重要的是material图片的尺寸大小以及定义不透明和从左到右的设置。

矢量工具也能帮助你导入自己的SVG文件，SVG图片是一个基于W3C的xml文件，但不是所有产品都这样。当你指定一个SVG文件，矢量工具提供即时反馈关于是否支持图形代码。如果支持SVG的代码,它将文件转换成XML文件包含VectorDrawable代码。

对于Android5.0 等级21或者更高的版本，你能使用AnimatedVectorDrawable的画的VectorDrawable的属性。如果想了解更多的信息请观看 矢量动画（Animate Vector Drawables）。

考虑使用SVG文件（Considerations for SVG files）

矢量图片是适合的简单图标，material图标提供很好图片在应用程序中工作的例子。相反，很多应用程序启动的图标有许多细节，所以他们工作的格栅图像会更好。

矢量图形厨师加载可能会比相应的格栅图片花费CPU运行周期更长，在内存使用和性能方面，两者相似，建议矢量图像最大为200×200dp,否则，他们可能会加载更长的时间。

虽然矢量图片支持一种或者更多颜色，在许多情况下使用黑色的图标是有意义的 (android:fillColor=”#FF000000”)，使用这种方法，你可以添加一个色调到你的布局当中的矢量图中，这样图标的颜色变为色调的颜色。如果图标的颜色不是黑色的，那么图标颜色可能不是与色调的颜色融为一体。

矢量绘制向后兼容的解决方案

下表总结了两种技术，您可以向后兼容的Andr​​oid 4.4（API级别20）或者更低的使用：

使用矢量图形可以产生较小的APK，但矢量图形的初始加载需要更长的时间。

PNG

Android 5.0（API等级21），并提供更高的可绘制矢量支持。如果应用程序API级别较低，矢量工具绘制矢量的文件添加到你的项目; 同时，在构建时，gradle会以根据不同分辨率构建PNG图像。gradle会用generatedDensities属性在的build.gradle文件生成的指定的PNG密度和领域特定语言（DSL）。要生成的PNG，构建系统需要使用Android插件Gradle1.5.0或更高版本。

对于Android 5.0（API级别21）和更高，矢量工具支持所有的矢量图元素。对于采用Android 4.4（API级别20）和较低的向后兼容性，矢量工具支持以下XML元素：

<vector>    * android:width    * android:height    * android:viewportWidth    * android:viewportHeight    * android:alpha<group>    * android:rotation    * android:pivotX    * android:pivotY    * android:scaleX    * android:scaleY    * android:translateX    * android:translateY<path>    * android:pathData    * android:fillColor    * android:strokeColor    * android:strokeWidth    * android:strokeAlpha    * android:fillAlpha    * android:strokeLineCap    * android:strokeLineJoin    * android:strokeMiterLimit

只有的是Android 5.0（API级别21）和更高版本支持动态属性，例如，android:fillColor=”?android:attr/colorControlNormal”。

您可以更改矢量工具生成的XML代码，但它不是一个最好的做法。在代码改变值不会引起任何问题，只要它们是有效的和静态的。如果你想添加XML元素，你需要确保他们根据你的最低API级别支持。

支持库（Support Library）

这种技术需要Android的支持库23.2或更高版本和Android插件对于gradle2.0或更高版本，并且只使用矢量绘图资源。使用矢量工具之前，您必须添加语句在build.gradle文件：

android {    defaultConfig {            vectorDrawables.useSupportLibrary = true        }    }dependencies {    compile 'com.android.support:appcompat-v7:23.2.0'}

您还必须使用的编码与该支持库（包括兼容 app:srcCompat属性）。欲了解更多信息，请参阅 Android的支持库23.2(Android Support Library 23.2)。

运行矢量工具（Running Vector Asset Studio）

启动矢量工具：

1.在Android Studio中打开一个项目。

2.在项目窗口视图，选择Android视图。

3.选择res目录鼠标右键并选择新建，矢量工具选择的菜单就会出现。

4.如果更新Android插件对话框出现，如下纠正你的Gridle版本：

a.选择File-->Project Structure选项b.在项目结构对话框中，选择项目c.在Andorid插件版本字段中，更改Android插件到gradle1.5.0版本或者更高，点击ok,Gradle异步构建项目d.在项目中的Android视图下，选择res目录鼠标右键并选择新建，矢量工具选择的菜单就会出现。

5.继续导入一个矢量图形

导入矢量图形 （Importing a Vector Graphic）

矢量工具帮助你导入矢量图形文件到你的应用程序的项目。按照以下步骤之一：

• 添加一张material 图标
• 导入一张SVG文件

增加一张material图标（Adding a material icon）

在打开矢量工具之后，你能增加一下material图标：

1.在矢量工具中选择Material图标

2.点击选择

3.选择一个Material图标点击OK，图标就会出现在矢量工具中。

4.（可选）更改资源名称，大小，透明度，和从右到左（RTL）设置：

• 资源名称 -键入一个新的名字，如果你不想使用默认的名称。矢量工具会自动创建一个唯一的名称（末尾添加一个数字名称）如果资源名称的项目已经存在。名称可以包含小写字母，下划线和数字。

• 从material设计覆盖默认大小 -如果你想调整图像的大小选择此选项。当您键入新的大小，在预览区会出现变化。

  图标的大小默认值是24×24的dp，这是在所定义的material design规范。取消选中该复选框返回到默认值。

• 不透明度 -使用滑块来调整图像的透明度。变化出现在预览区。

• 启用自动RTL布局 -如果你想要一个镜像时显示的布局是从右到左，选择此选项，而不是从左到右。例如，有些语言从右向左读; 如果你有一个箭头图标，你可能想在这种情况下，以显示它的一个镜像。请注意，如果你正在使用旧项目时，您可能还需要添加 android:supportsRtl=”true”到您的应用程序清单。自动镜像支持在Android 5.0（API级别21）及更高版本，以及支持库。

5.点击Next

6.（可选）更改模块和资源目录：

• 目标模块 -在项目中，你要添加的资源选择一个模块。欲了解更多信息，请参阅 添加模块新设备（Add a Module for a New Device）。

• RES目录 -要在其中添加矢量资源选择资源来源：在src/main/res, src/debug/res, src/release/res,或用户定义的源集。主要资源适用于所有版本，包括调试和发布。调试和释放源组覆盖的主要资源，适用于一个构建的版本。调试源代码集仅用于调试。要定义一个新的来源集，选择文件File > 项目结构 Project Structure> 应用程序app > 构建类型Build Types。例如，您可以定义一个测试版源集合，并创建一个版本，其中包括在右下角的文字“测试版”的图标。欲了解更多信息，请参阅 Configure Build Variants.。

在输出目录区域显示矢量图像，并在那里将出现在目录中。

7.点击完成 Finish

矢量工具增加一个XML文件的在定义好的app/src/main/res/drawable/文件夹中。从 Android设备上查看该的项目窗口中，您可以查看生成的矢量XML文件绘制文件夹。

8.构建项目

如果最小API级别的Android 4.4（API级别20）和更低，你没有启用支持库技术，矢量资产Studio生成PNG文件。从 项目视图 中的项目窗口中，您可以在查看生成的PNG和XML文件在app/build/generated/res/pngs/debug/文件夹中。

在需要的时候，你不应该编辑生成的栅格文件，系统构建光栅文件自动重新生成，而是用矢量XML文件的工作。所以你不必维护它们。

导入可缩放矢量图形Importing a Scalable Vector Graphic (SVG)

打开矢量工具， 你能导入SVG文件如下：

1.在矢量工具选择Local SVG文件。

该文件必须是在本地。如果它位于网络上，例如，你需要把它先下载到本地。

2.指定一个图像文件通过点击…

图像显示在矢量绘制对象预览。

但是，如果SVG文件中包含不支持的功能，出现在矢量工具的左下角一个错误。

在这种情况下，你不能使用矢量工具添加图形文件。点击更多查看错误。有关支持的元素列表，请参阅矢量绘制对象的向后兼容性解决方案（ Vector Drawable Backward-Compatibility Solutions）。

3.（可选）更改资源名称，大小，透明度，和从右到左（RTL）设置：

• 资源名称 -键入一个新的名字，如果你不想使用默认的名称。矢量工具会自动创建一个唯一的名称（添加一个数字名称的末尾）如果资源名称的项目已经存在。名称可以包含小写字母，下划线和数字。

• 从material design覆盖默认大小 -如果你想调整图像的大小选择此选项。当你选择它，大小的变化对图像本身的大小。每当你改变大小，变化出现在预览区。

• 默认值是24×24的DP，这是在所定义的material design规范。取消选中该复选框返回到默认值。

• 不透明度 -使用滑块来调整图像的透明度。变化出现在预览区。

• 启用自动RTL布局 -如果你想要一个镜像时显示的布局是从右到左，选择此选项，而不是从左到右。例如，有些语言从右向左读; 如果你有一个箭头图标，你可能想在这种情况下，以显示它的一个镜像。请注意，如果你正在使用旧项目时，您可能还需要添加 android:supportsRtl=”true”到您的应用程序清单。自动镜像支持在Android 5.0（API级别21）及更高版本，以及支持库。

4.点击next

5.（可选）更改模块和资源目录：

• 目标模块 -在项目中，你要添加的资源选择一个模块。欲了解更多信息，请参阅 添加模块新设备（Add a Module for a New Device）。

• RES目录 -要在其中添加矢量资源选择资源来源：在src/main/res, src/debug/res, src/release/res,或用户定义的源集。主要资源适用于所有版本，包括调试和发布。调试和释放源组覆盖的主要资源，适用于一个构建的版本。调试源代码集仅用于调试。要定义一个新的来源集，选择文件File > 项目结构 Project Structure> 应用程序app > 构建类型Build Types。例如，您可以定义一个测试版源集合，并创建一个版本，其中包括在右下角的文字“测试版”的图标。欲了解更多信息，请参阅 Configure Build Variants。

6.点击完成

7.构建项目

如果最小API级别的Android 4.4（API级别20）和更低，你没有启用支持库技术，矢量资产Studio生成PNG文件。从 项目视图 中的项目窗口中，您可以在查看生成的PNG和XML文件在app/build/generated/res/pngs/debug/文件夹中。

在需要的时候，你不应该编辑生成的栅格文件，系统构建光栅文件自动重新生成，而是用矢量XML文件的工作。所以你不必维护它们。

添加一个矢量图绘制对象到布局（Adding a Vector Drawable to a Layout）

在布局文件中，可以设置任何图标相关的部件，如 ImageButton的， ImageView的，等等。例如展示一个图片在按钮上。

在控件上展示矢量图，展示如下：

1.打开一个项目并导入矢量图。

2.在项目Android视图中，双击布局的XML文件，如 content_main.xml。

3.单击设计选项卡，显示 布局编辑器。

4.拖动的ImageButton控件到控制面板窗口拖到布局编辑器。

5.在属性窗口中，找到ImageButton的src属性，然后单击…。

6.在资源对话框中，选择项目选项卡，导航到绘制对象的文件夹，并选择一个矢量图标。点击OK。矢量图标上出现的ImageButton在布局。

7.在主题中要改变图片颜色，找到色调在属性窗口，然后单击…。

8.在资源对话框中，选择项目选项卡，导航到颜色的文件夹，然后选择colorAccent。点击OK。

如果你正在使用的不是支持库技术， ImageButton的代码应该是类似以下内容：

<ImageButton        android:id="@+id/imageButton"        android:src="@drawable/ic_build_24dp"        android:tint="@color/colorAccent"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/textView2"        android:layout_marginTop="168dp" />

关于矢量图的代码 Referring to a Vector Drawable in Code

通常可以参考矢量图片资源以一种通用的方式在你的代码中，当你的应用程序运行时，对应的图像根据API级别会自动显示：

在大多数情况下，你可以参考矢量资产@drawable的XML代码在Java代码中。

例如，下面的布局XML代码应用图像视图：

<ImageView        android:layout_height="wrap_content"        android:layout_width="wrap_content"        android:src="@drawable/myimage" />

下面的Java代码检索图片绘制：

Resources res = getResources();Drawable drawable = res.getDrawable(R.drawable.myimage);

有时，你可能需要类型转换绘制资源，例如，当您需要使用的特定功能 VectorDrawable 类。要做到这一点，您可以使用Java代码如下所示：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {    VectorDrawable vectorDrawable =  (VectorDrawable) drawable;} else {    BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;}

对于支持库技术，你必须使用的编码与支持库兼容的技术。欲了解更多信息，请参阅 Android的支持库23.2（Android Support Library 23.2）。

改善矢量工具生成的XML代码

您可以修改矢量资产XML代码，在编译的时候产生的PNG图像和相应的XML代码。但是，我们不建议这样做。

当使用生成的png图片时，矢量工具可以确保矢量绘制和PNG图像匹配，并且清单包含适当的代码。如果你添加的代码 不支持在Android 4.4（API级别20）或较低的，你的PNG图像可能会有所不同。您还需要确保该清单包含的代码来支持您的更改。

若要修改，而且不使用支持库技术矢量XML文件：

1.在项目窗口双击在drawable生成xml文件

2.编辑xml代码支持最小的api等级

• Android5.0(api等级21) 或者更高矢量工具支持所有Drawable和矢量元 素。你可以增加xml元素和改变值

• Android4.4(api等级20)或者更低，矢量工具支持所有Drawable元素和 VectorDrawable的子元素。见矢量绘制向后兼容性解决方案的列表，您可以更改在生成代码值，并添加了支持XML元素。动态属性不被支持。

例如，如果你没有在矢量工具中选择RTL选项，但如果你需要的话可以添加autoMirrored属性。要查看RTL版本，可以选择预览左边的*图标

注意：如果你使用的旧项目时，您可能需要添加android:supportsRtl=”true”到您的应用程序清单。同时，由于 autoMirrored是一个动态的属性，它支持的Android 5.0（API级别21）以上。

3.构建项目和检查时矢量图片和格栅图片看起来差不多。

请记住，矢量绘制所做的任何更改生成的PNG图像构建之前会在不同的渲染引擎预览窗口不同的显示。如果您添加的代码的矢量工具，不支持在Android 4.4系统（API级别20）或以下不会生成的PNG文件的任何矢量XML文件。其结果是，当你添加代码，您应经常检查所产生的PNG图像匹配矢量绘制。要做到这一点，你可以双击png视图中的 项目窗口; 左侧代码编辑器的空白处会显示PNG图像。

从项目删除矢量图片

要从项目中删除矢量图片：

1.在项目窗口，删除生成的矢量xml文件，单击选择文件按Delte键，或者点击后选择编辑->删除。安全删除对话框出现。

2.（可选）选择options来查找该文件是在项目中使用，然后单击 确定。

Android Studio中从项目删除文件。不过，如果你选择了搜索项目的地方被使用的文件和一些使用中发现，您可以查看并决定是否删除该文件。

3.选择 Build 选项 清空项目

相应于被删除矢量资源的所有自动生成PNG和X​​ML文件是从项目删除。

提供一个包含矢量应用程序

如果您使用支持库技术或您的最低API级别为的是Android 5.0（API级别21）或更高版本，你的APK将包含你添加了矢量工具中的矢量图像。这些APK会比矢量图像转换为PNG格式的更小。

当你的最低API级别包括的是Android 4.4（API级别20）或更低，并在项目都有相应的矢量栅格图像，你有两种选择：

• 创建一个APK同时包含矢量图像。该解决方案是容易实现的。

• 创建根据不同的API级别把APK分开。当你不包括在APK为Android 5.0（API级别21）或者更高相应的光栅图像，APK尺寸可以小得多。欲了解更多信息，请参阅 多个APK支持（Multiple APK Support.）。