安卓中使用SVG矢量图

男娘i 2022-05-24 04:29 789阅读 0赞

GitHubDemo:[https://github.com/xwpeng/TestSVG][https_github.com_xwpeng_TestSVG]

### １. 基础 ###

SVG：Scalable Vector Graphics，可伸缩矢量图形．矢量图：记录图像绘制的规定信息，根据这些信息绘制图片，如用数学函数记录．具有可伸缩，不失真，体积小的特性．由于是根据规定信息绘制图片，复杂的图片描述起来很困难，适用于简单规则的图片．  
　　Android图片适配根据屏幕密度准备多套png图片，导致图片占App的体积大．用SVG代替png可以极大节省资源内存，因为只要一套图片，一张图只是一些xml的文字描述.  
　　Android5.0开始支持SVG，只兼容5.0＋．从Gradle Plugin 1.5开始，如果是5.0下SVG转成png．从AppCompat23.2开始，Google开始支持在低版本上使用Vector。  
　　SVG是使用的时候去绘制，较位图多了一个绘制过程．简单且不是频繁使用的图标才用SVG．至于运行内存，SVG的图不能说一定比位图省运行内存．图片占用的运行内存受长，宽，单位面积像素点多少影响．由于使用的SVG是较小简单图，运行内存占用较小．

### 2. 使用 ###

主要注意兼容低版本，下面举了一些例子，实际用时必须在低版本进行测试．

#### 1. build.gradle（Moudle:app）中添加支持 ####

android {
    defaultConfig {
         vectorDrawables.useSupportLibrary true
    }
    }   
    
      
       
        1
        2
        3
        4
        5
        6

#### 2. 将设计师（自己弄的话用AI，没试过）给你的SVG格式的图片拖到[http://inloop.github.io/svg2android/][http_inloop.github.io_svg2android]中转换成记录绘制此图片信息的Xml文件,将文件放到Drawable目录下． ####

![Xml示例][Xml]  
在Drawable下点击New->Vector Asset选择Material Icon可以选AndroidStudio提供的SVG图片．得到xml文件后可以自行修改颜色值．如果要修改绘制信息（不建议，可以适当了解），参考:[Android vector标签 PathData 画图超详解][Android vector_ PathData]  
可以从[阿里图标库][Link 1]找素材  
![阿里图标库图][20161115103456843]

#### 3. 在ImageView中使用 ####

Activity继承AppCompatActivity,用ImageView,不是的话用android.support.v7.widget.AppCompatImageView．  
加上xmlns:app=”http://schemas.android.com/apk/res-auto”,再将drawable设置到app:srcCompat

<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/vd_dd" />
      
       
        1
        2
        3
        4

Java代码设置 mImageView.setImageResource(R.drawable.vd\_bb);

#### 4. 转成Drawable使用 ####

图片有时是需要转成Drawable来使用，如TextView中的Drawable．为了兼容Android L以下版本，需要按照以下方法进行转换．  
方法一：

VectorDrawableCompat drawable = VectorDrawableCompat.create(getResources(), R.drawable.vd_aa, null)；
      
       
        1

方法二：Activity中加静态代码块

static {
            AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
        }
      
       
        1
        2
        3

然后常规图片资源获得Drawable的方法去处理

Drawable drawable = getResources().getDrawable(R.drawable.vd_aa);
      
       
        1

如果没加静态代码块，５.0下会Crash.

AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);的方法描述解释了如何兼容AndroidL下版本使用SVG与注意事项．  
建议使用第一种方法，较灵活．

#### 5. 作为菜单Icon ####

菜单比较例外，可以直接设置．  
android:icon=”@drawable/vd\_abc\_add”  
如果是设置Drawable，还是得先转换．

### 3.SVG动画 ###

//todo

[https_github.com_xwpeng_TestSVG]: https://github.com/xwpeng/TestSVG
[http_inloop.github.io_svg2android]: http://inloop.github.io/svg2android/
[Xml]: /images/20220524/17eeee42fe5e4f53b5cd4dcc23d78730.png
[Android vector_ PathData]: http://www.cnblogs.com/yuhanghzsd/p/5466846.html
[Link 1]: http://www.iconfont.cn/plus
[20161115103456843]: /images/20220524/5a7bc203f858475cbae3767deb6ee9d8.png