Android Studio包含一个名为Vector Asset Studio的工具,可帮助您添加材料图标以及将可扩展矢量图形(SVG)和Adobe Photoshop文档(PSD)文件作为矢量图资源导入到项目中。使用矢量图代替位图可以减小APK的尺寸,因为可以针对不同屏幕密度调整同一文件的大小,而不会降低图像质量。对于不支持矢量图的较早版本Android系统,Vector Asset Studio可在构建时针对每种屏幕密度将矢量图转换为不同大小的位图。
关于Vector Asset Studio
Vector Asset Studio会将矢量图形作为描述图像的XML文件添加到项目中。与更新多个不同分辨率的光栅图形相比,维护一个XML文件可能会更加轻松一些。
Android 4.4(API级别20)及更低版本不支持矢量图。如果最低API级别设置为上述API级别之一,则在使用Vector Asset Studio时您有两个选择:生成便携式网络图形(PNG)文件(默认)或使用支持库。
为实现向后兼容性,Vector Asset Studio会生成矢量图的光栅图像。矢量和光栅图一起打包到APK中。您可以在Java代码中以Drawable的形式引用矢量图,或在XML代码中以@drawable的形式引用矢量图;当你的应用运行时,对应的矢量或光栅图像会自动显示,具体取决于API级别。
如果您想想使用矢量图,可以使用Android支持库23.2或更高版本。要使用此技术,您需要在运行Vector Asset Studio之前按照支持库向后兼容性中的说明更改build.gradle文件。利用支持库中的VectorDrawableCompat类,可实现在Android 2.1(API级别7)及更高版本中支持VectorDrawable。
支持的矢量图形类型
Google Material Design规范提供了材料图标,您可以在自己的Android应用中使用这些图标.Vector Asset Studio可帮助您选择,导入材料图标和调整其大小,以及定义不透明度和从右到左(RTL)的镜像设置。
Vector Asset Studio还让您可以导入自己的SVG和PSD文件.SVG是万维网联盟(W3C)制定的一个基于XML的开放式标准.PSD文件格式支持Adobe Photoshop功能.Vector Asset Studio支持必要的标准,但并非支持所有SVG和PSD功能。在您指定SVG或PSD文件时,Vector Asset Studio会立即提供是否支持图形代码的反馈。它将此文件转换为包含VectorDrawable代码的XML文件。如果您收到错误,应验证矢量图是否像预期一样显示。如需了解有关允许的PSD功能的详细信息,请参阅对PSD文件的支持和限制。
对于Android 5.0(API级别21)及更高版本,您可以使用AnimatedVectorDrawable类为VectorDrawable类的类性添加动画。有了支持库,您可以使用AnimatedVectorDrawableCompat类为Android 3.0(API级别11)及更高版本的VectorDrawable类添加动画。如需了解详细信息,参阅请为矢量图添加动画。
SVG和PSD文件注意事项
矢量图适用于简单的图标。材质图标种植的英文适合在应用中用作矢量图的图像类型的一个好例子。相比之下,许多应用的启动图标包含许多细节,因此更适合用作光栅图像。
与对应的光栅图像相比,矢量图首次加载时可能消耗更多的CPU资源。之后,二者的内存使用率和性能则不相上下。我们建议您将向量图像限制为最大200 x 200 dp;否则,绘制它可能需要耗费很长的时间。
尽管矢量图确实支持一种或多种颜色,但在很多情况下,最好将图标设置为黑色(android:fillColor="#FF000000")。通过此方法,您可以为布局中放置的矢量图添加tint属性,图标颜色将随之变为tint颜色。如果图标颜色不是黑色,图标颜色可能反而与tint颜色较为搭配。
矢量图向后兼容性解决方案
下表归纳了可用于实现向后兼容性的两种技术:
技术 APK中的可绘制资源 XML VectorDrawable元素 版本 版本号标志 应用代码
PNG生成 矢量和光栅 支持的子集
SVG:适用于Gradle的Android插件 1.5.0或更高版本
PSD:Android Studio 2.2或更高版本
默认 支持的各种编码技术
支持库23.2或更高版本 矢量 完全支持 适用于Gradle的Android插件2.0或更高版本 需要支持库声明 支持的编码技术子集
使用矢量图可以生成更小的APK,但首次加载矢量图可能需要较长时间。
PNG生成
Android 5.0(API级别21)及更高版本会提供矢量图支持。如果应用的最低API级别低于以上版本,Vector Asset Studio会将矢量图文件添加到项目中;另外,在构建时,Gradle会创建不同分辨率的PNG光栅图像.Gradle会生成build.gradle文件中的域特定语言(DSL)generatedDensities属性所指定的PNG密度。
对于Android 5.0(API级别21)及更高版本,Vector Asset Studio支持所有VectorDrawable元素。为向后兼容Android 4.4(API级别20)及更低版本,Vector Asset Studio支持以下XML元素:
android:width
android:height
android:viewportWidth
android:viewportHeight
android:alpha
android:rotation
android:pivotX
android:pivotY
android:scaleX
android:scaleY
android:translateX
android:translateY
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"。
您可以更改Vector Asset Studio生成的XML代码,但是最好不要这么做。更改代码中的值应该不会导致任何问题,但前提是这些值是有效的静态值。如果您要添加XML元素,必须确保根据您的最低API级别支持这些元素。
支持库
此技术需要Android支持库23.2或更高版本,适用于Gradle的Android插件2.0或更高版本,且仅使用矢量图。利用支持库中的VectorDrawableCompat类,可实现在Android 2.1(API级别7)及更高版本中支持VectorDrawable。
在使用Vector Asset Studio之前,您必须向build.gradle文件添加一条声明:
android {
defaultConfig {
vectorDrawables 。useSupportLibrary = true
}
}
依赖{
编译’com.android.support:appcompat-v7:23.2.0’
}
您还必须使用与支持库兼容的编码技术,例如对矢量图使用app:srcCompat属性,而不是android:src属性。如需了解详细信息,请参阅Android支持库23.2。
运行Vector Asset Studio
要启动Vector Asset Studio,请:
在Android Studio中,打开Android应用项目。
在Project窗口中,选择Android视图。
右键点击res文件夹,然后选择New > Vector Asset。
一些其他项目视图和文件夹也具有此菜单项。
此时将显示Vector Asset Studio。
图1。矢量资产工作室。
如果反而出现需要更新的Gradle对话框Android插件,请按如下步骤更正Gradle版本:
选择文件 > 项目结构。
在项目结构对话框中,选择项目。
在Android插件版本字段中,将适用于Gradle的Android插件版本更改为1.5.0或更高版本,然后点击确定。
Gradle将同步项目。
在Project窗口的Android视图中,右键点击res文件夹,然后选择New > Vector Asset。
此时将显示Vector Asset Studio。
继续导入矢量图形。
导入矢量图形
Vector Asset Studio可帮助您将矢量图形文件导入至应用项目中。按照以下步骤之一操作:
添加材料图标
导入SVG或PSD文件
添加材料图标
打开Vector Asset Studio后,您可以按照如下步骤添加材料图标:
在Vector Asset Studio中,选择Material Icon。
在“图标”字段中点击此按钮。
在选择图标对话框中,选择一个材料图标并点击确定。
此图标将出现在Vector Drawable Preview中。
可以选择更改资源名称,尺寸,不透明度和从右到左(RTL)的镜像设置:
名称 - 如果您不想使用默认名称,可键入新名称。如果项目中已存在此资源名称,Vector Asset Studio会自动创建一个唯一的名称(在名称末尾添加一个数字)。名称只能包含小写字符,下划线和数字。
覆盖 - 如果您想要调整图像的尺寸,请选择此选项。键入新尺寸后,会在预览区显示变化。
默认为24 x 24 dp,此值在材料设计规范中定义。取消选中此复选框可恢复默认值。
Opacity - 使用滑块调整图像的不透明度。在预览区中会显示变化。
为RTL布局启用自动镜像 - 如果您希望在布局为从右到左(而不是从左到右)时显示镜像,请选择此选项。例如,某些语言是从右到左书写;如果有箭头图标,在此情况下,您可能需要显示此图标的镜像。请注意,如果您正在处理之前的项目,您还可能需要向应用清单添加android:supportsRtl=“true”.Android 5.0(API级别21)及更高版本以及支持库均支持自动镜像。
点击下一步。
可以选择更改模块和资源目录:
Res Directory - 选择您要向其中添加矢量图的资源源集(src/main/res,src/debug/res和src/release/res)或用户定义的源集。主源集适用于包括调试和发行源集在内的所有构建变体。调试和发行源集将替换主源集,并应用于某个构建版本。调试源集仅适用于调试。要定义新源集,请选择文件 > 项目结构 > app > 构建类型。例如,您可以定义测试版源集,创建一种在右下角包含文本“测试版”的图标。如需了解详细信息,请参阅配置构建变行业释义体育。
输出目录区域显示矢量图及其出现的目录。
点击完成。
Vector Asset Studio将定义矢量图的XML文件添加到项目的app/src/main/res/drawable/文件夹中。在Project窗口的Android视图中,您可以在drawable文件夹中查看生成的矢量XML文件。
构建项目。
如果最低API级别为Android 4.4(API级别20)及更低版本,且您未启用支持库技术,则Vector Asset Studio将生成PNG文件。在Project窗口的项目文件视图中,您可以在app/build/generated/res/pngs/debug/文件夹中查看生成的PNG和XML文件。
您不应编辑这些生成的光栅文件,但应改用矢量XML文件。构建系统会在必要时自动重新生成光栅文件,因此,您无需维护这些文件。
导入SVG或PSD文件
打开Vector Asset Studio后,你可以按照如下步骤导入SVG或PSD文件:
在Vector Asset Studio中,选择本地文件。
此文件必须位于本地驱动器上。例如,如果文件位于网络上,您需要首先将其下载到本地驱动器。
点击…指定一个图像文件。
此图像将出现在Vector Drawable Preview中。
如果SVG或PSD文件包含不受支持的功能,将在Vector Asset Studio的底部显示一个错误,如图2所示。
图2。Vector Asset Studio显示某些错误。
如果您看到错误,需要确保导入的矢量图正确渲染。滚动列表以查看错误。
如需支持的元素列表,请参阅矢量图向后兼容性解决方案。如需了解有关允许的PSD文件的详细信息,请参阅对PSD文件的支持和限制。
可以选择更改资源名称,尺寸,不透明度和从右到左(RTL)的镜像设置:
名称 - 如果您不想使用默认名称,可键入新名称。如果项目中已存在此资源名称,Vector Asset Studio会自动创建一个唯一的名称(在名称末尾添加一个数字)。名称只能包含小写字符,下划线和数字。
覆盖 - 如果您想要调整图像的尺寸,请选择此选项。选择此选项后,尺寸将变为图像本身的尺寸。每当更改尺寸时,都会在预览区显示变化。默认为24 x 24 dp,值此在材料设计规范中定义。
Opacity - 使用滑块调整图像的不透明度。在预览区中会显示变化。
为RTL布局启用自动镜像 - 如果您希望在布局为从右到左(而不是从左到右)时显示镜像,请选择此选项。例如,某些语言是从右到左书写;如果有箭头图标,在此情况下,您可能需要显示此图标的镜像。请注意,如果您正在处理之前的项目,您可能需要向应用清单添加android:supportsRtl=“true”.Android 5.0(API级别21)及更高版本以及支持库支持自动镜像。
点击下一步。
可以选择更改资源目录:
Res Directory - 选择您要向其中添加矢量图的资源源集(src/main/res,src/debug/res和src/release/res)或用户定义的源集。主源集适用于包括调试和发行源集在内的所有构建变体。调试和发行源集将替换主源集,并应用于某个构建版本。调试源集仅适用于调试。要定义新源集,请选择文件 > 项目结构 > app > 构建类型。例如,您可以定义测试版源集,创建一种在右下角包含文本“测试版”的图标。如需了解详细信息,请参阅配置构建变行业释义体育。
输出目录区域显示矢量图及其出现的目录。
点击完成。
Vector Asset Studio将定义矢量图的XML文件添加到项目的app/src/main/res/drawable/文件夹中。在Project窗口的Android视图中,您可以在drawable文件夹中查看生成的矢量XML文件。
构建项目。
如果最低API级别为Android 4.4(API级别20)及更低版本,且您未启用支持库技术,则Vector Asset Studio将生成PNG文件。在Project窗口的项目文件视图中,您可以在app/build/generated/res/pngs/debug/文件夹中查看生成的PNG和XML文件。
您不应编辑这些生成的光栅文件,但应改用矢量XML文件。构建系统会在必要时自动重新生成光栅文件,因此,您无需维护这些文件。
向布局添加矢量图
在布局文件中,您可以将任何与图标有关的小部件(例如ImageButton状语从句:ImageView等)设置为指向矢量图例如,以下布局显示了一个按钮上显示的矢量图。:
图3。某个布局中某个按钮上显示的矢量图。
要在小部件上显示图中所示的矢量图,请:
一个打开项目并导入矢量图。
本例使用通过“New Project Wizard”生成的“Phone / Tablet”项目。
在Project窗口的Android视图中,双击某个XML布局文件,例如content_main.xml。
点击设计标签以显示布局编辑器。
将ImageButton小部件从调色板窗口拖动到布局编辑器中。
在Resources对话框中,选择左侧窗格中的Drawable,然后选择已导入的矢量图。点击确定。
将矢量图出现在布局中的ImageButton上。
要将图像颜色更改为在主题中定义的强调色,请在属性窗口中找到着色属性并点击…。
在Resources对话框中,选择左侧窗格中的颜色,然后选择colorAccent。点击确定。
布局中的图像颜色将变为强调色。
如果项目使用支持库,ImageButton代码应类似于下面这样:
<的ImageButton
android:layout_width = “wrap_content”
android:layout_height = “wrap_content”
app:srcCompat = “@ drawable / ic_build_black_24dp”
工具:layout_editor_absoluteX = “11dp”
工具:layout_editor_absoluteY = “225dp”
android:id = “@ + id / imageButton”
android:tint = “@ color / colorAccent” />
如果项目不使用支持库,则矢量图代码反而为android:src="@drawable/ic_build_black_24dp"。
在代码中引用矢量图
通常,您可以按照常规方式在代码中引用矢量图资源,当您的应用运行时,即会自动显示对应的矢量图像或光栅图像,具体取决于API级别:
在大多数情况下,您可以在XML代码中以@drawable的形式引用矢量图,或在Java代码中以Drawable的形式引用矢量图。
例如,以下布局XML代码会将图像应用于视图:
<ImageView的
android:layout_height = “wrap_content”
android:layout_width = “wrap_content”
android:src = “@ drawable / myimage” />
以下Java代码将图像作为Drawable进行检索:
资源res = ; getResources()
Drawable drawable = res 。getDrawable(- [R 。抽拉。MYIMAGE );
getResources()方法位于Context类中,适用于UI对象,如活动,片段,布局,视图,等等。
如果您的应用在任何情况下都可使用支持库(您即使的build.gradle文件中没有vectorDrawables.useSupportLibrary = true声明),也。您可以通过app:srcCompat声明引用矢量图例如:
<ImageView的
android:layout_height = “wrap_content”
android:layout_width = “wrap_content”
app:srcCompat = “@ drawable / myimage” />
有时,您可能需要确定可绘制资源类型所属的确切类,例如,当您需要使用VectorDrawable类的特定功能时。为此,您可以使用如下Java代码:
如果(构建。VERSION 。SDK_INT > = 生成。VERSION_CODES 。LOLLIPOP ){
VectorDrawable vectorDrawable = (VectorDrawable )drawable ;
} else {
BitmapDrawable bitmapDrawable = (BitmapDrawable )drawable ;
}
您仅可以从主线程访问矢量图资源。
对于支持库编码技术,您必须使用与支持库兼容的编码技术。如需了解详细信息,请参阅Android支持库23.2。
修改Vector Asset Studio生成的XML代码
您可以修改矢量图XML代码,但不能修改构建时生成的PNG和对应的XML代码。不过,我们并不建议这么做。
在使用PNG生成技术时,Vector Asset Studio会确保矢量图和PNG匹配,并确保清单包含正确的代码。如果您添加Android 4.4(API级别20)及更低版本不支持的代码,矢量图像和PNG图像可能不同。您还需要确保清单包含支持所做更改的代码。
要在未使用支持库技术的情况下修改矢量XML文件,请:
在Project窗口中,在drawable文件夹中双击生成的矢量XML文件。
XML文件将出现在编辑器和预览窗口中。
图4。矢量XML文件显示在代码编辑器和“预览”窗口中。
根据最低API级别所支持的元素编辑XML代码:
Android 5.0(API级别21)及更高版本 - Vector Asset Studio支持所有Drawable和VectorDrawable元素。您可以添加XML元素和更改值。
Android 4.4(API级别20)及更低版本 - Vector Asset Studio支持所有Drawable元素和VectorDrawable元素的子集。如需相关列表,请参阅矢量图向后兼容性解决方案。您可以更改生成的代码中的值和添加支持的XML元素。不支持动态属性。
构建项目,检查矢量图和对应的光栅图像外观是否相同。
请谨记,由于采用不同的渲染引擎和在构建前对矢量图进行了任何更改,生成的PNG在预览窗口中可能与在应用中显示得不同。如果您向Vector Asset Studio创建的矢量XML文件添加代码,则生成的PNG文件中不会显示Android 4.4(API级别20)中不受支持的任何功能。因此,在您添加代码时,应始终检查生成的PNG是否与矢量图匹配。为此,可在项目窗口的项目文件视图中双击此PNG;当您的代码引用此图片时,代码编辑器的左边也会显示PNG图像,如图5所示。
图5。PNG图像显示在代码编辑器的左边。
从项目中删除矢量图
要从项目中删除矢量图,请:
在项目窗口中,选择生成的矢量XML文件并按Delete键(或选择编辑 > 删除),以删除此文件。
此时将显示安全删除对话框。
可以选择多种选项,以在项目中查找使用此文件的位置,然后点击确定。
Android Studio将从项目和驱动器中删除此文件。但是,如果您选择在项目中搜索使用此文件的位置,在找到部分位置后,您可以查看这些位置,再决定是否删除此文件。
选择Build > Clean Project。
将从项目和驱动器中删除任何自动生成的与删除的矢量图所对应的PNG和XML文件。
交付包含矢量图的应用
如果您使用支持库技术或最低API级别为Android 5.0(API级别21)或更高版本,则APK将包含您使用Vector Asset Studio添加的矢量图。如果之前将矢量图转换为PNG,这些APK的尺寸将会更小。
当最低API级别包含Android 4.4(API级别20)或更低版本,且项目包含对应的矢量图和光栅图像时,您可以选择两种方式交付APK文件:
创建一个包含矢量图和对应的光栅图像的APK。此解决方案最容易实现。
针对不同的API级别创建不同的APK。如果未将对应的光栅图像包含到Android 5.0(API级别21)及更高版本的APK中,将会大大减小APK的尺寸。如需了解详细信息,请参阅多APK支持。
对PSD文件的支持和限制
Vector Asset Studio并非支持所有PSD文件功能。以下列表归纳了支持和不支持的PSD特性以及部分转换详情。
文档
支持:
位图,灰度级,索引,RGB,Lab或CMYK的PSD颜色模式。
8位,16位或32位颜色深度。
转换详情:
PSD文档尺寸变成矢量图和视口尺寸。
不支持:
双色调或多通道的PSD颜色模式。
形状
支持:
剪切蒙版(如果剪切母版是其他形状)。
形状操作,包括合并/添加,相交,删减和排除。
不支持:
Photoshop形状使用的奇偶填充规则。在Android 6.0(API级别23)及更低版本中,矢量图仅支持非零填充规则。在自相交形状中,此限制可能导致PSD和产生的矢量图之间出现渲染差异要修复此问题,请将。android:fillType="evenOdd"添加到矢量图中的形状上例如:
<vector xmlns:android = “https://schemas.android.com/apk/res/android”
android:viewportHeight = “168”
android:height = “24dp”
android:viewportWidth = “209”
android:width = “24dp” >
<路径
android:fillAlpha = “1.0”
android:fillColor = “#000000”
android:fillType = “evenOdd”
android:pathData = “M24,58 L24,167 L114,167 L114,66 M64,1 L64,96 L208,96 L208,8 M1,97 L146,139 L172,47” />
</矢量>
描边和填充
支持:
描边,包括颜色,不透明度,宽度,连接,端点,虚线和对齐。
单色填充和描边。
指定为RGB,Lab或CMYK的描边和填充颜色。
转换详情:
如果描边为虚线,使用剪切母版进行剪切或使用居中对齐以外的对齐方式,Vector Asset Studio会将它转换为矢量图中的填充形状。
不支持:
单色以外的颜色填充和描边,例如渐变。
不透明度
支持:
不透明度为0的形状图层。
转换详情:
Vector Asset Studio将填充不透明度与图层不透明度相乘,计算出填充Alpha值。
此工具将剪切母版(如果有剪切母版)的不透明度与填充Alpha值相乘,计算出最终的填充Alpha值。
此工具将描边不透明度与图层不透明度相乘,计算出描边Alpha值。
此工具将剪切母版(如果有剪切母版)的不透明度与描边Alpha值相乘,计算出最终的描边。
图层
支持:
任何可见的形状图层。
转换详情:
Vector Asset Studio将图层名称保存在矢量图文件中。
不支持:
图层效果。
调整和文本图层。
混合模式(忽略)。