Android 矢量图详解

Posted 2021-11-29 sydmobile

官方文档

关于 Vector，在官方开发指南中介绍。本文章是由个人翻译官方指南然后添加个人理解完成。

由于个人精力有限，多个渠道发布，排版上可能会有问题，如果影响查看，请移步 Android 开发者家园

Vector Drawables 概述

VectorDrawable 和 AnimatedVectorDrawable 是在 android 5.0 系统中第一次加入，当然我们可以使用 Android 的支持库，来支持旧的版本，通过 VectorDrawableCompat 和 AnimateVectorDrawableCompat 来实现。

VectorDrawble 是在 xml 文件中定义的矢量图形。xml 文件中定义的矢量图形，它是一组带有颜色信息的点、线和曲线，使用矢量图主要的优点是图形可伸缩性。可以在不损失显示质量的情况下进行缩放，这意味着我们可以在不同的屏幕密度的手机上使用相同的文件。这样会使 APK 文件变小更加有利于开发人员维护。我们还可以通过多个 XML 文件和矢量图结合用于动画。

既然说起 VectorDrawable 了，那就不得不提 SVG （Scalable Vector Graphic）了，这两个经常混淆，其实 SVG 就是一种基于可扩展语言（xml），用于描述二维矢量图形的一种图形格式（和我们常见的 .png 等等图片一样，都是一种图片格式），它有自己的一套编写规范（使用 XML 编写的），所以这种图片是根据他自己的一套规范通过 XML 语言编写而成的图片。而我们的 VectorDrawable 是编程中的，它仅支持 SVG 规范中有限的内容。Android Studio 支持将 SVG 文件转换成 VectorDrawable 。这就是他们两者的关系。

path 中的常用的简单绘制命令

• moveto 命令 M 移动到新的位置
• closepath 命令 Z 封闭路径，从当前的位置画一条直线到该路径或者子路径起始位置
• lineto 命令 L ，从当前的位置画一条线到指定的位置
• horizontal lineto 命令 H 水平画一条直线到指定位置
• vertical lineto 命令 V 垂直画一条直线到指定位置
• 贝塞尔曲线 命令 Q
• 光滑二次贝塞尔曲线 命令 T
• elliptical arc 命令 A 椭圆弧

每个命令都有大小写的形式，大写代表后面的参数是绝对坐标，小写表示相对坐标（我们一般用大写就可以了），参数之间用空格或者逗号隔开。所谓的相对坐标是相对于前面一个点的，比如：M30,0 l 10,10 换算成绝对坐标就是 M30,0 L40,10

命令使用实例

• M(x y) 移动到坐标 x，y 处
• Z 后面不接参数，直接连接起点和终点
• L（x y）直线连接到坐标 x，y 处
• H（x） 水平连接
• V（y） 垂直连接
• C（x1 y1 x2 y2 x y）控制点 x1，y1 x2，y2 终点坐标 x，y
• Q（x1 y1 x y）控制带点 x1，y1 终点坐标 x ，y；
• A（rx，ry，x-axis-rotation，large-arc-flag，sweep-flag，x，y）；
  • rx,ry 椭圆半径
  • x-axis-rotation x 轴旋转角度
  • large-arc-flag 为 0 的时候表示取小弧度，1 的时候取大弧度
  • sweep-flag 0 取逆时针方向，1 取顺时针方向
  • (x,y) 是终点的坐标

VectorDrawable 如何定义

VectorDrawable 在 drawable 文件夹中通过 来定义，这里先来详细的介绍一下 vector 中的各个属性（和网上的许多不一样，网上的大多都没有自己验证过）

<!--用于定义 vector drawable-->
<vector
        android：name（用于定义这个 vector drawable 的名字）、
        android：width（定义该 drawble 的内部宽度，支持所有的 Android 系统支持的尺寸单位，通常使用 dp）
        android：height（定义该 drawble 的内部高度，支持所有的 Android 系统支持的尺寸单位，通常使用 dp）
        android：viewportWidth(定义矢量图视图的宽度，实际上就是对应 path 路径所使用的数据)
        android：viewportHeight(定义矢量图视图的高度，实际上就是对应 path 路径所使用的数据)
        android：tint（定义该 drawble 线条的颜色，定义了后，你再在路径里面设置颜色就没有作用了）
        android：tintMode（定义 tint 颜色的 Porter-Duff blending 模式，默认值为 src_in，暂时不用理会）
        android：autoMirrored 设置当系统为 RTL （right-to-left）布局的时候，是否自动镜像该图片。
        android：alpha 该图片的透明属性
        >
    <grup
          // 有时候我们需要对几个路径一起处理，这样就可以使用 group 元素来把多个 path 放到一起，group 支持的属性有
          android：name 定义 group 的名字
          android：rotation 定义该 group 的路径旋转多少度（顺时针旋转）
          android：pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。
          android：pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。
          android：scaleX 定义 X 轴的缩放倍数
          android：scaleY 定义 Y 轴的缩放倍数
          android：translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的
          android：translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的>
          <path 
                // path 元素里面的 pathData 就是矢量图的路径数据，除此之外还可以设置其他的属性。path 的属性有：
                android：name 定义该 path 的名字，这样在其他地方可以通过名字来引用这个路径
                android：pathData 和 SVG 中 d 元素一样的路径信息
                android：fillColor 定义填充路径的颜色，如果没有定义则不填充路径
                android：strokeWidth 定义路径边框的粗细尺寸
                android：strokeAlpha 定义路径边框的透明度
                android：fillAlpha 定义填充路径颜色的透明度
                android：trimPathStart 从路径起始位置(path 的 M 位置)截取后剩下的内容，取值范围从 0 到 1，比如，取值是 0.3 则截取后的内容就是 原长度 - （原长度*0.3） 
                android：trimPathEnd 从路径起始位置位置截取的内容，取值范围从 0 到 1，比如，取值是 0.3，则截取后的内容就是 原长度*0.3  
                需要注意的是如果 trimPathStart 和 strimPathEnd 一块使用的话，这里有个规律如果 trimPathEnd 取值大于等于 trimPathStart 的时候结果就是他们两者分别截取后内容的交集，如果 trimPathEnd 小于 trimPathStart 的时候，取值就是他们俩的合集（这是经过我无数的实验得出的规律，你也可以尝试一下）
                android：trimPathOffset 其实就是设置开始点的偏移位置（取值 从 0 到 1）1 的话就是开始点和结束的互换了，注意这个路径是可以循环的（下面画图说明）
                android：strokeLineCap 设置路径的线头的形状，取值为 butt，round，square 默认是 butt
                android：strokeLineJoin 设置路径交界处的连接方式，取值为 miter、round、bevel 默认是 miter
                android：strokeMiterLimit 设置斜角的上界 默认是 4 （当 strokeLineJoin 设置为 "miter" 的时候，绘制两条线段以锐角相交的时候，所得的斜面可能相当长，当斜面太长，就会变的不协调。strokeMiterLimit 属性为斜面的长度设置了一个上限。这个属性表示斜面长度和线条长度的比值。当 strokeLineJoin 设置为其他属性时，这个属性是无效的）
               
        </path>
        
        vector 还支持 clip-path 元素，定义当前绘制的剪切路径。注意：clip-path 只对当前的 group 和子 group 有效。需要 API 大于等于 21
                
                
                
                
               
    
    
    
    </grup>

</vector>

矢量动画

利用 XML 文件来设置矢量动画

1. 创建一个矢量图

   <?xml version="1.0" encoding="utf-8"?>
   <vector xmlns:android="http://schemas.android.com/apk/res/android"
           android:width="200dp"
           android:height="200dp"
           android:viewportWidth="100"
           android:viewportHeight="100">
       <group android:name="head_eyes">
           <path
               android:fillColor="@color/colorPrimary"
               android:name="head"
               android:pathData=" M50,50 A15,15,0,1,1 50,51Z"
               android:strokeWidth="2"
               android:strokeColor="@color/colorPrimary"/>
           <group android:name="eyes">
               <path android:fillColor="@android:color/white"
                     android:name="eye_left"
                     android:pathData="M55,40A2,2,0,1,1,55,41"/>
               <path android:fillColor="@android:color/white"
                     android:name="eye_right"
                     android:pathData="M69,40A2,2,0,1,1,69,41"/>
           </group>
   
           <path android:fillColor="@color/colorAccent"
               android:pathData="M60,55L55,60H65Z"/>
   
       </group>
   </vector>

哈哈，样子太丑了，大家就凑合着看把。

1. 在 drawble 创建矢量动画

   目的就是将我们的矢量图和 objectAnimator 关联起来

   <?xml version="1.0" encoding="utf-8"?>
   <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
       // 对应动画文件
       android:drawable="@drawable/vector_simple">
       <target
           android:animation="@animator/head"
           // 这里的名字对应你的矢量图中想要产生动画的 path 或者 group 或者 clip-path 的名字
           android:name="head_eyes"/>
   
   </animated-vector>
   

2. 在 animator 中创建动画

   <?xml version="1.0" encoding="utf-8"?>
   <set xmlns:android="http://schemas.android.com/apk/res/android">
       <objectAnimator
           android:duration="200"
           android:propertyName="translateY"
           android:repeatCount="infinite"
           android:repeatMode="reverse"
           android:valueFrom="0"
           android:valueTo="20"
           android:valueType="floatType"/>
   </set>

3. 布局文件中添加图片

   <ImageView
           android:id="@+id/iv_android"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/animated_head"
           android:contentDescription="@string/app_name"/>

4. 在程序中启动动画

   Drawable drawable =  ivAndroid.getDrawable();
   ((Animatable)drawable).start();

效果图

在 objectAnimator 的 propertyName 中有两个很重要的属性值，trimPathEnd 和 trimPathStart 表示截取，和前面介绍的 path 里面的类似，利用这个可以绘制 vectordrawble。注意如果动画使用这个两个属性值的话，animated-vector 中 target 对应的 name 必须是 path 类型不能是 group 效果图：

SVG 图片转成 vectordrawble

利用我们 Android Studio 提供的工具就可以将 SVG 格式的图片直接转成我们的 vectordrawble 了。