Android SVG矢量资源的使用方法

时间  2019-11-12
标签 android svg 矢量 资源 使用方法 栏目 Android 繁體版
原文   原文链接

VectorDrawable 与 SVG

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

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

<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="v"
             android:fillColor="#000000"
             android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
     </group>
 </vector>

※ 一般由SVG文件转换为VectorDrawable，而非手工录入git

  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/>路径的路径描述指令含义表：github

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】阿里妈妈矢量图标平台api

SVG编辑软件

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

SVG 转 VectorDrawable

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

VectorDrawable 向后兼容

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

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元素子集

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 脚本

Google工程师开发的开源项目 AndroidIconAnimator，可实如今线实时构造、编辑、预览 VectorDrawable 动画，并导出XML脚本，使用教程可参考 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();

特别介绍几个特殊属性：

  • <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 形变更画参考

已知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 等）

其余参考文献及工具连接集合：

首发地址在 简书 上

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程