图片和图形之矢量绘制（Vector drawables）（3）

原文

概述

A VectorDrawable是一个矢量图形，在XML文件中定义为一组点，线和曲线及其相关的颜色信息。使用矢量绘图的主要优点是图像可伸缩性。它可以在不损失显示质量的情况下进行缩放，这意味着相同的文件可以根据不同的屏幕密度调整大小，而不会损失图像质量。这会导致更小的APK文件和更少的开发人员维护。对于每种显示分辨率，您还可以使用多个XML文件而不是多个图像来使用矢量图像进行动画。

Android Studio也可以将SVG文件转换为矢量可绘制格式

Android 5.0（API级别21）是第一个使用VectorDrawable 和正式支持向量绘制的版本 AnimatedVectorDrawable，但您可以使用支持Android的支持库来支持旧版本，该支持库提供了 VectorDrawableCompat和 AnimatedVectorDrawableCompat类。

关于VectorDrawable类

VectorDrawable定义一个静态可绘制对象。类似于SVG格式中，每个矢量图形被定义为一个树层次结构，其是由path与group对象。每个都path包含对象轮廓的几何图形并 group包含用于转换的详细信息。所有路径的绘制顺序与它们在XML文件中的显示顺序相同

示例XML
以下是一个示例VectorDrawableXML文件，用于在充电模式下呈现电池图像。

<!-- res/drawable/battery_charging.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"<!-- intrinsic size of the drawable -->android:height="24dp"android:width="24dp"<!-- size of the virtual canvas -->android:viewportWidth="24.0"android:viewportHeight="24.0"><groupandroid:name="rotationGroup"android:pivotX="10.0"android:pivotY="10.0"android:rotation="15.0" ><pathandroid: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"/><pathandroid: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呈现以下图像：

关于AnimatedVectorDrawable类

AnimatedVectorDrawable将动画添加到矢量图形的属性中。您可以将动画矢量图形定义为三个单独的资源文件或定义整个绘图的单个XML文件。让我们看看两种方法，以便更好地理解：多个XML文件和单个XML文件。

多个XML文件

• 一个VectorDrawableXML文件。
• AnimatedVectorDrawable定义目标 的XML文件，VectorDrawable要设置动画的目标路径和组，动画，定义为ObjectAnimator对象或 AnimatorSet对象的属性和动画。
• 动画师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" >
  <groupandroid:name="rotationGroup"android:pivotX="300.0"android:pivotY="300.0"android:rotation="45.0" ><pathandroid: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" ><targetandroid:name="rotationGroup"android:animation="@anim/rotation" /><targetandroid: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">
  <objectAnimatorandroid: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文件合并到一个XML文件中。在构建应用程序时， aapt标记会创建单独的资源并在动画矢量中引用它们。这种方法需要构建工具24或更高版本，并且输出是向后兼容的。
单个XML文件的示例

<animated-vectorxmlns:android="http://schemas.android.com/apk/res/android"xmlns:aapt="http://schemas.android.com/aapt"><aapt:attr name="android:drawable"><vectorandroid:width="24dp"android:height="24dp"android:viewportWidth="24"android:viewportHeight="24"><pathandroid: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"><objectAnimatorandroid: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>

向量drawables向后兼容性解决方案

要支持运行平台版本低于Android 5.0（API级别21）的设备上可绘制的矢量可绘制和动画矢量， VectorDrawableCompat 并且AnimatedVectorDrawableCompat 可通过两个新的支持库分别获得： support-vector-drawable和animated-vector-drawable。

Android Studio 1.4通过在构建时生成PNG文件，引入了对矢量绘图的有限兼容性支持。然而，矢量可绘制和动画矢量可绘制支持库提供了灵活性和广泛的兼容性 - 它是一个支持库，因此您可以将它与所有Android平台版本一起使用回到Android 2.1（API等级7+）。要将应用配置为使用矢量支持库，请将该vectorDrawables 元素添加到build.gradle应用模块中的文件中。

使用下面的代码片段来配置vectorDrawables 元素：

//For Gradle Plugin 2.0+android {defaultConfig {vectorDrawables.useSupportLibrary = true}}

//For Gradle Plugin 1.5 or below
android {defaultConfig {// Stops the Gradle plugin’s automatic rasterization of vectorsgeneratedDensities = []}// Flag notifies aapt to keep the attribute IDs aroundaaptOptions {additionalParameters "--no-version-vectors"}
}

您可以使用VectorDrawableCompat API级别7以及 AnimatedVectorDrawableCompat运行Android 3.0（API级别11）及更高级别的所有设备。Android加载drawable的方式并不是每个接受可绘制ID的地方都支持加载向量drawable。该 android.support.v7.appcompat软件包添加了许多功能，以便于使用矢量绘图。首先，当你使用 android.support.v7.appcompatpackage ImageView或with ImageButton和诸如and的 子类时 FloatingActionButton，可以使用new app:srcCompat属性来引用矢量绘图以及任何其他可绘制的drawable android:src：

<ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:srcCompat="@drawable/ic_add" />

要在运行时更改drawable，可以setImageResource() 像以前一样使用该 方法。使用AppCompat 和app:srcCompat是将矢量绘图集成到您的应用程序的最简单的方法。

Support Library 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" ><groupandroid:name="rotationGroup"android:pivotX="300.0"android:pivotY="300.0"android:rotation="45.0" ><pathandroid: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" ><targetandroid: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标记会创建单独的资源并在动画矢量中引用它们。这种方法需要构建工具24或更高版本，并且输出是向后兼容的。

使用支持库的单个XML文件的示例

<animated-vectorxmlns: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"><groupandroid:name="rotationGroup"android:pivotX="300"android:pivotY="300"android:roation="45.0" ><pathandroid: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"><objectAnimatorandroid:propertyName="rotation"android:valueFrom="0"android:valueTo="360"android:duration="6000"android:interpolator="@android:interpolator/fast_out_slow_in" /></aapt:attr></target>
</animated-vector>

联系我

QQ:94297366
微信打赏：https://pan.baidu.com/s/1dSBXk3eFZu3mAMkw3xu9KQ