Android SVG矢量资源的使用方法

本是古典何须时尚 2023-03-13 03:46 15阅读 0赞

## VectorDrawable 与 SVG ##

Android 5.0（Lollipop, API 21）后，新增了`<vector>`标签，以`VectorDrawable`的形式支持SVG类型矢量图形（SVG本质为XML标记描述的图形）。  
**※ Android不直接支持SVG图形文件**

SVG文件（XML）对应的`VectorDrawable`资源封装格式为：

**※ 通常由SVG文件转换为VectorDrawable，而非手工录入**

1.  `<vector>` 是 VectorDrawable 对应的根标签
2.  `android:width`与`android:height`对应矢量图的实际参考尺寸（实际可根据容器尺寸无损缩放，但此值将作为容器（ImageView）的 wrap\_content 参考尺寸），基于加载性能考虑，Google推荐限定在 200x200dp 以内，一般与下面的`viewportWidth`和`viewportHeight`成比例定义
3.  `android:viewportWidth`与`android:viewportHeight`是指当前Drawable对应的Canvas的大小，用于为`<path/>`标签中的路径数据提供绘制位置的参考坐标系及绘制范围
4.  `<path/>`标签对应路径信息, 这里的path与我们自定义绘制图形时用的Path原理一样, 就是记录一些绘图操作, 具体对应其中的 pathData。
5.  `android:fillColor`为默认黑色（**\#FF000000**）时，在View容器内将使用`tint`颜色取代，否则将呈现为`android:fillColor`与`tint`的混合颜色。

`<path/>`路径的路径描述指令含义表：

M = moveto 相当于 android Path 里的moveTo(),用于移动起始点 
    L = lineto 相当于 android Path 里的lineTo()，用于画线 
    H = horizontal lineto 用于画水平线 
    V = vertical lineto 用于画竖直线 
    C = curveto 相当于cubicTo(),三次贝塞尔曲线 
    S = smooth curveto 同样三次贝塞尔曲线，更平滑 
    Q = quadratic Belzier curve quadTo()，二次贝塞尔曲线 
    T = smooth quadratic Belzier curveto 同样二次贝塞尔曲线，更平滑 
    A = elliptical Arc 相当于arcTo()，用于画弧 
    Z = closepath 相当于closeTo(),关闭path

大写代表绝对位置, 小写代表相对位置

**官方标准定义细则参考：[SVG Paths Definition - W3C][]**

### SVG图标平台 ###

[【Iconfont】阿里妈妈矢量图标平台][Iconfont]

### SVG编辑软件 ###

[Inkscape][]  
跨平台开源矢量图形编辑软件，免费 + 三平台通用，支持直接编辑XML数据  
类似的软件还有Illustrator、CorelDraw等

--------------------

## SVG 转 VectorDrawable ##

*  [使用 Vector Asset Studio 转换][Vector Asset Studio]，在res目录右键菜单上选择 **New > Vector Asset**
 *  [通过开源项目 svg2android 在线转换][svg2android]

**※ 初始化VectorDrawable将消耗更多CPU资源，Google推荐将矢量图最大尺寸限定在 200x200dp 以内**

--------------------

## VectorDrawable 向后兼容 ##

对于Android 5.0之前的设备，有两种方式兼容`VectorDrawable`资源：

### 1. 利用 Vector Asset Studio 工具动态生成位图 ###

Android Studio 内置一个名为 Vector Asset Studio 的工具，在低版本SDK上编译APK期间，针对`VectorDrawable`脚本自动生成一组PNG位图资源`BitmapDrawable`，取代矢量图形（在5.0及以后的手机上运行时会正常引用`VectorDrawable`）。

需要配置`build.gradle`：

defaultConfig {
        vectorDrawables.generatedDensities = ['hdpi','xxhdpi'] }

**※ [自动生成PNG时，所支持的VectorDrawable元素子集][PNG_VectorDrawable]**

### 2. 添加 Support Library 23.2+ 兼容包 ###

Support Library 23.2+ 包中包含`VectorDrawableCompat`和`AnimatedVectorDrawableCompat`兼容类，用于代码中桥接为`BitmapDrawable`及其动画支持，其中Drawable最低SDK为Android 2.1，动画最低SDK为Android 3.0

**※ 兼容包要求使用Gradle 2.0或以上版本，并且不支持VectorDrawable嵌套引用，不支持直接解析为VectorDrawable类型，也不再编译期生成PNG位图**

`build.gradle`配置如下：

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

#### 兼容包在矢量资源引用、代码调用时，存在一定限制 ####

*  在 ImageView 等引用 VectorDrawable 资源时，需要使用`app:srcCompat`取代`android:src`
 *  代码中使用`setImageResource()`指定资源 id 时，无需更改代码
 *  将 VectorDrawable 用于 View 背景时，需要通过以下代码设定：

Resources resources = context.getResources(Resources, int, Theme); Theme theme = context.getTheme(); Drawable drawable = VectorDrawableCompat.create(resources, R.drawable.vector_drawable, theme); view.setBackground(drawable);

代码中需要进行Drawable的实现类型转换时，可使用以下代码段执行：

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

--------------------

## 矢量动画 ##

使用矢量图可进行特殊的动画绘制，如形态变换、动态绘图等。

### 主要步骤 ###

#### 定义矢量资源及其关联动画 XML 脚本 ####

1.  创建矢量图形资源`VectorDrawable`，并在需要动画特效的子元素上使用属性`android:name`给定任意动画对象名
2.  创建`Animator`属性动画脚本，可使用`ObjectAnimator`或`AnimatorSet`，对`VectorDrawable`的特定元素属性进行动画控制
3.  创建`AnimatedVectorDrawable`，作用是连接`VectorDrawable`与`Animator`，组合为单一动画型Drawable对象
4.  创建好的`AnimatedVectorDrawable`不能直接用于 ImageView，需要通过代码设定，并显式开始执行动画

##### 官方文档 #####

*  XML脚本具体定义方式可参考 [开发手册 AnimatedVectorDrawable][AnimatedVectorDrawable]
 *  [开发手册 内联复合XML资源][_XML] 提供了通过 AAPT 系统插件，实现单一XML脚本混合定义的方式，需要声明命名空间 `xmlns:aapt="http://schemas.android.com/aapt"`

### 在线实时输出 XML 脚本 ###

Google工程师开发的开源项目 **[AndroidIconAnimator][]**，可实现在线实时构造、编辑、预览 VectorDrawable 动画，并导出XML脚本，使用教程可参考 [Qiita帖子][Qiita]

### 代码设置 ###

创建好的 VectorDrawable 动画资源，需要通过代码方式加载到 View 容器内，并指定执行动画

#### 使用原生支持的代码设定（5.0 LOLLIPOP, API 21） ####

ImageView imageView = (ImageView) findViewById(R.id.imageView);
    AnimatedVectorDrawable vectorDrawable = (AnimatedVectorDrawable) getResources().getDrawable(AnimatedVectorDrawableRes, Theme);
    imageView.setImageDrawable(vectorDrawable);
    vectorDrawable.start();

#### 使用 Support Library 时的动画设置 ####

矢量动画要求最低SDK为Android 3.0，并且不支持`<path>`路径类型的变换

ImageView imageView = (ImageView) findViewById(R.id.imageView);
    AnimatedVectorDrawableCompat drawableCompat = AnimatedVectorDrawableCompat.create(context, AnimatedVectorDrawableRes);
    imageView.setImageDrawable(drawableCompat);
    drawableCompat.start();

*  可执行的特有动画效果，可参考 [VectorDrawable 元素属性列表][VectorDrawable]
 *  所有属性中文解释可参考 [Android矢量图形与矢量动画][Android]
 *  其中一种动效实例，可参考博文 [Android使用SVG矢量动画][Android_SVG]

### 特别介绍几个特殊属性： ###

*  `<group>`元素：
    
     *  `rotation`：旋转角度，取值为360角度，`valueType=floatType`
     *  `pivotX / pivotY`：旋转中心坐标，以`viewport`为参照基准
 *  `<path>`元素：
    
     *  `pathData`：矢量图形的绘制路径数据位点，可动画形变为另一种图案，要求动画参数值必须拥有相同长度参数及一致的路径描述指令，并且 ObjectAnimator 中`android:valueType="pathType"`（Support 包不支持该数据进行变换动画）
     *  `trimPathStart`：从路径起始点开始向后裁剪（擦除）的相对距离，取值 \[0, 1\]，，0 表示路径起始点，1 表示路径结束点，可实现逐步消退、绘制动效，`android:valueType="floatType"`
     *  `trimPathEnd`：从路径结束点开始向前裁剪的相对距离，取值 \[0, 1\]，0 表示路径起始点，1 表示路径结束点
     *  `trimPathOffset`：从路径起始、结束点开始裁剪的相对距离，取值 \[0, 1\]，0 表示不裁剪，1 表示该路径完全不绘制
 *  `<clip-path>`元素：遮罩路径、反蒙版路径，该路径范围内的元素才会真正进行绘制，作用于当前所在的`<group>`内定义在其后面的所有`<path>`元素
    
     *  `pathData`：定义遮罩路径，动画操作方式与`<path>`相同

#### pathData 形变动画参考 ####

*  [理解Android VectorDrawable中的pathData命令][Android VectorDrawable_pathData]
 *  [PathMorphing with AnimatedVectorDrawables in Android][]
 *  [【VectAlign】pathData自动算法变换对齐工具][VectAlign_pathData]

## 已知bug： ##

*  `<animated-vector>`标签在使用时会发生错误警告`requires API level 21`，不影响兼容包的编译运行
 *  放置于`animator`目录内的`Animator`脚本，需要在`<animated-vector>`的`<target>`中手工引用`@animator/资源id`（自动提示补全菜单失效）
 *  使用动画时，ImageView 不能使用`android:tint`属性，否则会导致`Mutate() is not supported for older platform`异常崩溃
 *  通过 AAPT 标签使用单一脚本混合定义时，Android Studio 会出现识别错误提示
 *  矢量动画通过关联 Property Animation 打包为 Drawable 方式实现，对属性的动态修改将影响所有同一 Drawable 资源产生的对象（Drawable 状态共享机制），并且兼容包不支持 mutate() 调用（状态分离，兼容包内要求API 23以上），实际上代码暂时无法访问矢量元素内部属性（如 pathData 等）

[SVG Paths Definition - W3C]: https://www.w3.org/TR/svg-paths/
[Iconfont]: http://www.iconfont.cn/
[Inkscape]: https://inkscape.org/zh/
[Vector Asset Studio]: https://developer.android.com/studio/write/vector-asset-studio.html#running
[svg2android]: http://inloop.github.io/svg2android/
[PNG_VectorDrawable]: https://developer.android.com/studio/write/vector-asset-studio.html#apilevel
[AnimatedVectorDrawable]: https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html
[_XML]: https://developer.android.com/guide/topics/resources/complex-xml-resources.html
[AndroidIconAnimator]: https://romannurik.github.io/AndroidIconAnimator/
[Qiita]: http://qiita.com/takahirom/items/3deee8b73e0a2bc1a50b
[VectorDrawable]: https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html
[Android]: http://blog.csdn.net/u013478336/article/details/52277875
[Android_SVG]: http://blog.csdn.net/u010687392/article/details/48178495
[Android VectorDrawable_pathData]: https://ghui.me/post/2016/09/Vectordrawable_pathData/
[PathMorphing with AnimatedVectorDrawables in Android]: https://lewismcgeary.github.io/posts/animated-vector-drawable-pathMorphing/
[VectAlign_pathData]: https://github.com/bonnyfone/vectalign