Android Vector(Vector/Vector动画)

Android Vector(Vector/Vector动画)

---

本文由 Luzhuo 编写,转发请保留该信息.
原文: https://blog.csdn.net/Rozol/article/details/79743079

---

AppCompat23.2 增加了对Vector(矢量图)的全版本兼容
静态 Vector 支持 Android2.1+
动态 Vector 支持 Android3.0+ (属性动画 Android3.0+ (api>=11))
动态 部分不兼容AndroidL(5.0)以下 (path Morphing)

Vector矢量图简介

PNG(位图) / SVG(矢量图) / Vector差异

• SVG:
  
  • 前端中使用, 是一套语法规范
  • 工具:
    
    • SVG Editor(在线): http://editor.method.ac
  • 资源:
    
    • iconfont(阿里巴巴): http://www.iconfont.cn/
    • flaticon: https://www.flaticon.com
• Vector: Android中使用
  
  • 工具:
    
    • SVG2Android(在线 / SVG转Vector): inloop.github.io/svg2android
    • Android Studio Vector Asset: 右键drawable -> New -> Vector Asset -> Material Icon(自带svg图) / Local file(本地的svg图)
• Vector只实现了SVG语法的Path标签
• 大小比较: 5,755B(png) > 2,696(svg) > 1,626(vector)

Vector常用语法:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:name="color"
        android:fillColor="#FF000000"
        android:pathData="M19.35,10.04C18.67,6.59 15.64,4 12,4 9.11,4 6.6,5.64 5.35,8.04 2.34,8.36 0,10.91 0,14c0,3.31 2.69,6 6,6h13c2.76,0 5,-2.24 5,-5 0,-2.64 -2.05,-4.78 -4.65,-4.96z"/>
</vector>

• 标签:

  • width: Vector的宽
  • height: Vector的高
  • viewportWidth: 把width分成多少等份
  • viewportHeight: 把height分成多少等份
  • name: 起个名字
  • fillColor: 填充颜色
  • strokeAlpha: 线条alpa
  • strokeColor: 线条颜色
  • strokeWidth: 线条宽度
  • strokeLineCap: 线帽 round/square
  • pathData: 路径, 根据路径绘制语法进行绘制

• 路径绘制语法:

  • M = moveto(M X,Y): 画笔移动到指定位置
  • L = lineto(L X,Y): 画直线到指定位置
  • Z = closepath(): 关闭路径
  • H = horizontal lineto(H X): 画水平线到指定X轴位置
  • V = vertical lineto(V Y): 画垂直线到指定Y轴位置
  • Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY): 2阶贝塞尔曲线
  • C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY): 3阶贝赛尔曲线

VectorDrawable

• 兼容性:

  • 只兼容minSDK >= 21 (AndroidL 5.0)
  • Gradle Plugin 1.5 增加了5.0以下版本的兼容
    
    • api >=21 使用原生
    • api <= 21 将Vector转换成PNG

  • AppCompat23.2 增加了对Vector的全版本兼容

    • 静态Vector支持Android2.1+
    • 动态Vector支持Android3.0+ (属性动画 Android3.0+ (api>=11))

  • 动态VectorDrawable的兼容问题(唯一无法向下兼容的):

    • path Morphing (路径转换动画 □ -> ○)
      
      • 在Android L 以上需要代码配置(demo中start的代码不同)
      • 在Android L 以下无法使用
    • path Interpodation (路径插值器)
      
      • 在Android L 只能使用系统地插值器(不能自定义)
    • 不支持从Strings.xml中读取

VectorDrawable使用场景

• Vector(矢量图) vs Bitmap(位图)
  
  • Vector比较简单时,效率高, Vector非常复杂时, Bitmap效率高
  • Vector适用于icon / button / imageview的图标等小的icon, 或者动画效果; Bitmap在GPU中有重绘缓存功能(Vector没有), 能做频繁的重绘(Vector不能).
  • vector加载速度 > png, 渲染速度 < png.

静态使用

准备工作

1. 配置module的 build.gradle 文件

   android {
       // ...
       defaultConfig{
           // ...
           vectorDrawables.useSupportLibrary = true
       }
   }
   dependencies{
       // ...