Skip to content

Home

Jump to bottom
sofina edited this page Feb 4, 2017 · 11 revisions

Vector Drawable

####什么是Vector Drawable: 1， 它不会因为图像的缩放而失真。在安卓开发中也就意味着你不需要为不同分辨率的设备定义不同大小的图片资源；

2，可以减小包大小，同样一张图，用vector实现，大小仅为png图片的十分之一；

3，功能强大，所有复杂的动画都不需要用java代码实现，只需要在xml文件里编辑即可；

####兼容问题 android studio v1.4及以上的版本，gradle 版本是 2.0 以上， 开发设备是android 5.0 以上的，

仅需在build.gradle中配置

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

就可以完美支持 vector drawable 的开发。（下面那一大段你可以忽略）

如果是5.0以下的设备，Google 在 gradle plugin V1.5及以上，2.0 以下的版本中提出了一种兼容方案：

对于5.0以下的设备，在编译阶段，会把vector drawable 生成对应的png 图片；

在build.gradle中配置需要生成的png图片的密度

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
    generatedDensities = ['hdpi', 'xhdpi']//生成的png图片密度
  }
  aaptOptions {
    additionalParameters "--no-version-vectors"//这是为了让aapt给生成的png资源保留resource id，否则在5.0以下的设备中运行会发生ResourceNotFoundException异常
  }
}

####如何生成一个vector 资源？

方式一，自己写

pathData的命令是极为繁琐，可读性很差的，他的命令可能是这样的

    <path
        android:fillColor="#FF000000"
        android:pathData="M12,2 C6.48,2 2,6.48 2,12 s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z"/>

也有可能是这样的

      <path
        android:fillColor="#FF000000"
        android:pathData="M7.52,21.48C4.25,19.94 1.91,16.76 1.55,13L0.05,13C0.56,19.16 5.71,24 12,24l0.66,-0.03 -3.81,-3.81 -1.33,1.32zM8.41,14.96c-0.19,0 -0.37,-0.03 -0.52,-0.08 -0.16,-0.06 -0.29,-0.13 -0.4,-0.24 -0.11,-0.1 -0.2,-0.22 -0.26,-0.37 -0.06,-0.14 -0.09,-0.3 -0.09,-0.47h-1.3c0,0.36 0.07,0.68 0.21,0.95 0.14,0.27 0.33,0.5 0.56,0.69 0.24,0.18 0.51,0.32 0.82,0.41 0.3,0.1 0.62,0.15 0.96,0.15 0.37,0 0.72,-0.05 1.03,-0.15 0.32,-0.1 0.6,-0.25 0.83,-0.44s0.42,-0.43 0.55,-0.72c0.13,-0.29 0.2,-0.61 0.2,-0.97 0,-0.19 -0.02,-0.38 -0.07,-0.56 -0.05,-0.18 -0.12,-0.35 -0.23,-0.51 -0.1,-0.16 -0.24,-0.3 -0.4,-0.43 -0.17,-0.13 -0.37,-0.23 -0.61,-0.31 0.2,-0.09 0.37,-0.2 0.52,-0.33 0.15,-0.13 0.27,-0.27 0.37,-0.42 0.1,-0.15 0.17,-0.3 0.22,-0.46 0.05,-0.16 0.07,-0.32 0.07,-0.48 0,-0.36 -0.06,-0.68 -0.18,-0.96 -0.12,-0.28 -0.29,-0.51 -0.51,-0.69 -0.2,-0.19 -0.47,-0.33 -0.77,-0.43C9.1,8.05 8.76,8 8.39,8c-0.36,0 -0.69,0.05 -1,0.16 -0.3,0.11 -0.57,0.26 -0.79,0.45 -0.21,0.19 -0.38,0.41 -0.51,0.67 -0.12,0.26 -0.18,0.54 -0.18,0.85h1.3c0,-0.17 0.03,-0.32 0.09,-0.45s0.14,-0.25 0.25,-0.34c0.11,-0.09 0.23,-0.17 0.38,-0.22 0.15,-0.05 0.3,-0.08 0.48,-0.08 0.4,0 0.7,0.1 0.89,0.31 0.19,0.2 0.29,0.49 0.29,0.86 0,0.18 -0.03,0.34 -0.08,0.49 -0.05,0.15 -0.14,0.27 -0.25,0.37 -0.11,0.1 -0.25,0.18 -0.41,0.24 -0.16,0.06 -0.36,0.09 -0.58,0.09L7.5,11.4v1.03h0.77c0.22,0 0.42,0.02 0.6,0.07s0.33,0.13 0.45,0.23c0.12,0.11 0.22,0.24 0.29,0.4 0.07,0.16 0.1,0.35 0.1,0.57 0,0.41 -0.12,0.72 -0.35,0.93 -0.23,0.23 -0.55,0.33 -0.95,0.33zM16.96,9.04c-0.32,-0.33 -0.7,-0.59 -1.14,-0.77 -0.43,-0.18 -0.92,-0.27 -1.46,-0.27L12,8v8h2.3c0.55,0 1.06,-0.09 1.51,-0.27 0.45,-0.18 0.84,-0.43 1.16,-0.76 0.32,-0.33 0.57,-0.73 0.74,-1.19 0.17,-0.47 0.26,-0.99 0.26,-1.57v-0.4c0,-0.58 -0.09,-1.1 -0.26,-1.57 -0.18,-0.47 -0.43,-0.87 -0.75,-1.2zM16.57,12.2c0,0.42 -0.05,0.79 -0.14,1.13 -0.1,0.33 -0.24,0.62 -0.43,0.85 -0.19,0.23 -0.43,0.41 -0.71,0.53 -0.29,0.12 -0.62,0.18 -0.99,0.18h-0.91L13.39,9.12h0.97c0.72,0 1.27,0.23 1.64,0.69 0.38,0.46 0.57,1.12 0.57,1.99v0.4zM12,0l-0.66,0.03 3.81,3.81 1.33,-1.33c3.27,1.55 5.61,4.72 5.96,8.48h1.5C23.44,4.84 18.29,0 12,0z"/>

所以，除非是很简单的图形，比如一个圆，或者一个方形，否则不建议使用这种方式生成vector资源

方式二，用android studio提供的现成的资源，这些资源都很简单，而且很多都不太实用

首先在drawable 目录下new 一个 vector 资源

选一张你喜欢的图片，然后ok next finish…… 即可

方式三，用svg资源生成

在方式二的第二步选择

这里有很多现成的svg资源 ，如果还是没有你喜欢的，那么只能叫设计师给你切个图了 这是最简单也是最实用的方式，但是首先你得有设计师~

####基本语法介绍：

以下这些命令都有大小写，大写表示绝对位置，小写表示相对位置

M X,Y or m X,Y

移动到: 移动绘制点到指定位置, 后面可能跟不止一对坐标, 如果跟多对则隐式的代表在这些点之间画线.

Z or z

闭合路径: 在路径的开始点与结束点之间画一条线. 后面不需要跟任何参数.

L X,Y or l X,Y

连线: 在当前点与点(x, y)之间画直线.如果你指定了不只一对坐标点, 那就会画出多条线.

H X or h X

水平画线: 在当前点与横坐标X之间画一条水平线.

V Y or v Y

垂直画线: 在当前点与纵坐标Y之间画一条竖直线.

有了这些，我们就可以画一个简单的方形了

  <?xml version="1.0" encoding="utf-8"?>
  <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:name="circle"
        android:fillColor="@color/colorPrimary"
        android:pathData="M12,12 L24,12 L24,24 L12,24 z" />

</vector>

那么要如何画圆弧呢？

圆弧的命令稍微复杂一些，理解它首先需要理解贝塞尔曲线，这篇文章讲的不错

Q X0,Y0 X1,Y1 or q X0,Y0 X1,Y1

二次贝塞尔曲线: X0,Y0 是控制点，X1,Y1是数据点，另外一个数据点是 这两个点之前的那个点，也就是，如果在Q之前，把绘制点移动到了M(0,0),那么（0,0）就是第一个数据点。

绘制一条简单的二次贝塞尔曲线：

   <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:name="circle"
        android:fillColor="@color/colorPrimary"
        android:pathData="M12,12 Q24,12 24,24  " />

</vector>

C X0,Y0 X1,Y1 X2,Y2 or q X0,Y0 X1,Y1 X2,Y2

三次贝塞尔曲线: X0,Y0 X1,Y1是两个控制点，X2,Y2是数据点，和Q一样，另外一个数据点是 这两个点之前的那个点，也就是，如果在C之前，把绘制点移动到了M(0,0),那么（0,0）就是第一个数据点。

绘制一条简单的三次贝塞尔曲线：

   <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:name="circle"
        android:fillColor="@color/colorPrimary"
        android:pathData="M12,12 C24,12 12,24 24,24  " />

</vector>

####怎么用Vector Drawable做一个简单的动画？？ 定义一个animated vector drawable 只需要简单的三步：

1）vector drawable 本身： res/drawable/demo.xml ，这是静态的图片

2）vector drawable 动画文件：res/drawable/中定义一个有objectAnimator元素的xml文件

3）一个或者多个属性动画文件：res/drawable/中定义一个有target元素的xml文件。 实现极为简单，一行java 代码都不用写，即可完成复杂的动画

Clone this wiki locally