VectorDrawable使用

摘要

从5.0(API等级21)开始，android了支持矢量图，优点：文件比位图要小，可以缩小我们apk体积，并且可以任意放大矢量图形，而不会丢失细节或影响清晰度，在屏幕适配时，只用一套图即可。

VectorDrawable的使用

1. 项目配置

compile 'com.android.support:appcompat-v7:23.2.0' //要求 appcompat-v7库的版本要在23.2.0+

修改gradle配置文件(gradle插件版本是2.0+)

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

2. svg处理

Android中矢量图是以xml文档的形式存在的，并以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:fillColor="#FF226622"
        android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14zM12,10h-2v2L9,12v-2L7,10L7,9h2L9,7h1v2h2v1z"/>
</vector>

但我们的UI小姐姐提供给我们.jpg/.png/.psd/.svg等格式的图片，都不是我们想要的，这可咋办？？？

svg格式图片

没关系，我们可以用强大的Studio转格式啊，步骤如下：

启动转换器 : 方法一

或者使用快捷键：Ctrl + shift + A ,然后输入 Vector Asset

启动转换器 : 方法二

svg 转换器

Clip Art 项为固有的矢量图，我们直接用即可，而Local file(SVG,PSD)选项，则是我们需要转换的了，剩下的提示进行就可以啦。

3. svg使用举例：

  <ImageView
      android:layout_width="@dimen/width_theme_margin_120"
      android:layout_height="@dimen/width_theme_margin_120"
      android:layout_centerVertical="true"
      app:srcCompat="@drawable/phone_green"
      app:tint="#ff0000"
      android:tintMode="screen"
      />

具体用法可以参考官方说明文档

注意事项：

svg需要转成vector后，Android才能用。
小图使用svg，大图使用在图片渲染时，会严重占用CPU资源，而且会很久。
使用android:src属性的地方需要替换为app:srcCompat属性。
当使用vector asset工具创建矢量图时，若采用的是Local file的psd格式文件时，Android这边是不支持图片的渐变和透明度效果的。
若是app:srcCompat设置的图片显示不出来，首先查看的你的Activity 继承的是否是继承AppcompatActivity，或者使用android.support.v7.widget.AppCompatImageView 代替 ImageView。

Vector动画参：

Vector动画实现，我在网上找到了几篇比较好的文章，亲测好用，推荐给大家：
https://www.jianshu.com/p/456df1434739
https://www.jianshu.com/p/677da5076115
https://www.jianshu.com/p/677da5076115

最后编辑于：2019.03.04 11:25:20