要点
- 矢量可绘制对象是指在 XML 文件中定义为一组点、线和 及其相关的颜色信息。
- 矢量可绘制对象是可缩放的,这意味着它们可以在不损失显示质量的情况下调整大小。 因此,此类尺寸是 Android 应用的理想之选,因为它有助于缩减应用的大小, APK 文件并提升性能。
- 您可以在 Android Studio 中创建矢量可绘制对象,方法是右键点击 drawable 文件夹 然后选择“新建”>“Vector Asset。您还可以将 SVG 文件导入 Android Studio 中的矢量可绘制对象。
简介
VectorDrawable
是定义的矢量图形。
作为一组点、线和曲线及其关联的
颜色信息。使用矢量可绘制对象的主要优势是图片
可伸缩性它可以在不降低显示质量的情况下进行缩放,这意味着
系统会针对不同的屏幕密度调整同一文件的大小,而不会损失图像质量。
这不仅能缩减 APK 文件大小,还能减少开发者维护工作。您还可以
通过使用多个 XML 文件而不是多个 XML 文件,将矢量图像用于动画
为每种显示分辨率提供不同的图片。
本页和下面的视频简要介绍了如何在 XML 中创建矢量可绘制对象。 Android Studio 还可以将 SVG 文件转换为矢量可绘制对象格式,如 具体方法是:使用添加多密度矢量图形。
Android 5.0(API 级别 21)是首个正式支持矢量可绘制对象的
VectorDrawable
和 AnimatedVectorDrawable
,但
您可以用 Android 支持库来支持旧版本,该库提供了
VectorDrawableCompat
和
AnimatedVectorDrawableCompat
类。
关于 VectorDrawable 类
VectorDrawable
定义静态可绘制对象
对象。与 SVG 格式类似,每个矢量图形都被定义为一棵树
层次结构,由 path
和 group
对象组成。
每个 path
都包含对象轮廓的几何图形,
group
包含转换的详细信息。所有路径均已绘制
它们在 XML 文件中的显示顺序相同。
![](https://developer.android.google.cn/static/images/guide/topics/graphics/vectorpath.png?authuser=9&hl=nl)
图 1. 矢量可绘制资源的层次结构示例
矢量资源 studio 工具提供了一种向项目中添加矢量图形的简单方法 保存为 XML 文件
XML 示例
下面是一个渲染图像的示例 VectorDrawable
XML 文件
例如电池处于充电模式
<!-- res/drawable/battery_charging.xml --> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:width="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <group android:name="rotationGroup" android:pivotX="10.0" android:pivotY="10.0" android:rotation="15.0" > <path android:name="vect" android:fillColor="#FF000000" android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z" android:fillAlpha=".3"/> <path android:name="draw" android:fillColor="#FF000000" android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/> </group> </vector>
此 XML 会渲染以下图像:
![](https://developer.android.google.cn/static/images/guide/topics/graphics/ic_battery_charging_80_black_24dp.png?authuser=9&hl=nl)
关于 AnimatedVectorDrawable 类
AnimatedVectorDrawable
为矢量属性添加动画
图形。您可以将动画矢量图形定义为三个单独的
资源文件或定义整个可绘制对象的单个 XML 文件。让我们
请看一下这两种方法以更好地理解:多个 XML 文件和单个 XML 文件
XML 文件。
多个 XML 文件
通过使用此方法,您可以定义三个单独的 XML 文件:
- 一个
VectorDrawable
XML 文件。 -
一个
AnimatedVectorDrawable
XML 文件 定义了目标VectorDrawable
, 要添加动画效果的目标路径和组、属性以及定义的动画 作为ObjectAnimator
对象或AnimatorSet
对象。 - 一个 animator XML 文件。
多个 XML 文件示例
以下 XML 文件展示了矢量图形的动画。
- VectorDrawable 的 XML 文件:
vd.xml
-
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
- AnimatedVectorDrawable 的 XML 文件:
avd.xml
-
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> <target android:name="vectorPath" android:animation="@anim/path_morph" /> </animated-vector>
- 在 AnimatedVectorDrawable 的 XML 中使用的 Animator XML 文件
文件:
rotation.xml
和path_morph.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
<set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType"/> </set>
单个 XML 文件
通过这种方法,您可以将相关的 XML 文件合并为一个
XML 文件包格式。在构建应用时,
aapt
标记会创建单独的资源并在
动画矢量。此方法需要使用 Build Tools 24 或更高版本,并且
是向后兼容的
单个 XML 文件的示例
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24"> <path android:name="root" android:strokeWidth="2" android:strokeLineCap="square" android:strokeColor="?android:colorControlNormal" android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" /> </vector> </aapt:attr> <target android:name="root"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="pathData" android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" android:duration="300" android:interpolator="@android:interpolator/fast_out_slow_in" android:valueType="pathType" /> </aapt:attr> </target> </animated-vector>
矢量可绘制对象向后兼容性解决方案
在搭载较低版本平台的设备上支持矢量可绘制对象和动画矢量可绘制对象
Android 5.0(API 级别 21)以上版本,或者使用 fillColor
、fillType
和
低于 Android 7.0(API 级别 24)的 strokeColor
功能,
VectorDrawableCompat
和AnimatedVectorDrawableCompat
可通过两个支持库获得:
support-vector-drawable
和animated-vector-drawable
:
。
Android Studio 1.4 引入了对矢量的有限兼容性支持
通过在构建时生成 PNG 文件来制作可绘制对象。然而,矢量可绘制对象
和动画矢量可绘制对象支持 库既提供灵活性,
广泛的兼容性 — 它是一个支持库,因此可以将其用于所有
Android 平台版本可向后兼容至 Android 2.1(API 级别 7 或更高级别)。要配置您的
应用使用矢量支持库,请添加 vectorDrawables
元素添加到应用模块中的 build.gradle
文件中。
使用以下代码段配置 vectorDrawables
元素:
Groovy
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Kotlin
// For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
Groovy
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities = [] } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters "--no-version-vectors" } }
Kotlin
// For Gradle Plugin 1.5 or below android { defaultConfig { // Stops the Gradle plugin’s automatic rasterization of vectors generatedDensities() } // Flag notifies aapt to keep the attribute IDs around aaptOptions { additionalParameters("--no-version-vectors") } }
您可以使用 VectorDrawableCompat
和
AnimatedVectorDrawableCompat
(所有)
。Android 的运作方式
会加载可绘制对象,而不是在 XML 中等接受可绘制对象 ID 的所有地方加载
文件,支持加载矢量可绘制对象。通过
android.support.v7.appcompat
个包裹添加了一个号码
功能,以轻松使用矢量可绘制对象。首先,当您使用
android.support.v7.appcompat
个软件包,其中包含
ImageView
或子类,例如
ImageButton
和
FloatingActionButton
,您可以
使用新的 app:srcCompat
属性引用矢量可绘制对象
以及 android:src
可用的任何其他可绘制对象:
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_add" />
如需在运行时更改可绘制对象,您可以使用
setImageResource()
方法。目前使用的是AppCompat
app:srcCompat
是最可靠的
矢量可绘制对象导入您的应用中。
支持库 25.4.0 及更高版本支持以下功能:
- 路径变形(PathType 评估程序),用于变形 转换为另一条路径
- 路径插值:用于定义 而不是由系统定义的 插值器,如 LinearInterpolator。
支持库 26.0.0-beta1 及更高版本支持以下功能:
- 沿路径移动:几何图形对象可以四处移动, 在动画中沿着任意路径移动。
使用支持库的多个 XML 文件的示例
以下 XML 文件演示了使用多个 XML 文件的方法 为矢量图形添加动画效果。
- VectorDrawable 的 XML 文件:
vd.xml
-
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector>
- AnimatedVectorDrawable 的 XML 文件:
avd.xml
-
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> </animated-vector>
- 用于 AnimatedVectorDrawable 的 XML 的 Animator XML 文件
文件:
rotation.xml
-
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" />
单个 XML 文件
以下 XML 文件演示了使用单个 XML 文件的方法
为矢量图形添加动画效果。在构建应用时,
aapt
标记会创建单独的资源并在
动画矢量。此方法需要使用 Build Tools 24 或更高版本,并且
是向后兼容的
使用支持库的单个 XML 文件的示例
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="64dp" android:height="64dp" android:viewportWidth="600" android:viewportHeight="600"> <group android:name="rotationGroup" android:pivotX="300" android:pivotY="300" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group> </vector> </aapt:attr> <target android:name="rotationGroup"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" android:duration="6000" android:interpolator="@android:interpolator/fast_out_slow_in" /> </aapt:attr> </target> </animated-vector>