SVG-Android开源库——项目简单接入与使用

SVG-Android开源库相关：
博客：http://blog.csdn.net/megatronkings/article/details/52454927
源码：https://github.com/MegatronKing/SVG-Android

SVG-Android最新版本1.3.2发布已经发布，Jcenter和MavenCentral都已经上传，开发者可以非常方便地在Android Studio中接入。

SVG-Android框架主要分为两部分：SVG-Support库和SVG-Generator库。前者用于项目依赖，提供一些扩展组件和功能，后者用于SVG资源的构建。同时，为了简化接入的过程，提供了gradle集成插件SVG-Plugin。

我们以SVG-Sample范例项目为例，简单说明下如何快速接入。

SVG-Sample地址：https://github.com/MegatronKing/SVG-Android/tree/master/svg-sample

---

1、gradle中配置插件

首先，需要在app目录的build.gradle中配置插件：

apply plugin: 'svg'

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.github.megatronking:svg-plugin:1.3.6'
    }
}

svg {
    // vector resources
    vectorDirs = ["src/main/svg_debug/drawable"]
    // shape resources
    shapeDir = "src/main/svg_release/drawable"
    // java classpath
    javaDir = "src/main/java/com/github/megatronking/svg/sample/drawables"
    // app(module) package name
    packageName = "com.github.megatronking.svg.sample"
}

这里说明一下Extension的配置含义：

vectorDirs：存放vector资源文件的目录，这里是设置的debug资源目录svg_debug/drawable，主要是为了方便在xml预览效果，而实际上不作为资源文件目录也没关系。这里是支持多个vector资源文件目录，作为数组配置多个就可以。

shapeDir：自动生成空白shape资源文件的目录，这个目录必须作为资源文件目录打到apk包中，不然无法生成R文件。

javaDir： 自动生成Java图片渲染文件的目录，定义成Java源码目录就可以，会在下面自动生成Java源文件。

packageName：包（模块）名，保持和R文件对应包一致就可以。可以不配置，默认为applicationId

当然，如果你希望直接使用svg格式文件，而不是手动生成或者使用现成的vector文件，可以使用svg2vector配置，直接处理svg格式文件！

svg2vector {
        svg_a {
            svgDir = "${rootDir}/svg_a"
            vectorDir = "src/main/res_svg/drawable"
            // 配置生成的vector尺寸，不设置默认使用图片原始尺寸
            width = 48
            height = 48
        }
        svg_b {
            svgDir = "${rootDir}/svg_b"
            vectorDir = "src/main/res_svg/drawable"
            width = 48
            height = 48
        }
    }

为了方便svg格式文件分类，这里支持处理多个svg文件目录。比如，在SVG-Sample中有两个存放svg文件目录（项目根目录下svg_a和svg_b）。svg格式文件自动生成vector文件，需要四个配置参数，详细作用如下：

svgDir：存放svg文件的目录。

vectorDir ：自动生成vector文件的目录。

width：图片宽度，可以不配置，默认为图片原始尺寸，对应vector文件的android:width属性，单位为dp。

height：图片高度，可以不配置，默认为图片原始尺寸，对应vector文件的android:height属性，单位为dp。

最后，还需要配置svg-support库的依赖：

dependencies {
    compile 'com.github.megatronking:svg-support:1.3.1'
}

配置好后sync一下gradle，svg-support，svg-plugin以及其依赖svg-generator会自动down下来，这样就可以进行下一步操作了。

---

2、运行gradle插件task

在运行task之前，我们需要一张SVG格式图片，以下面这张红色Android机器人的SVG图片为例：

<?xml version="1.0" encoding="iso-8859-1"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24" x="0px" 
     xmlns="http://www.w3.org/2000/svg" y="0px" xml:space="preserve">
    <path style="fill:#FF0000;" d="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</svg>

将其放置到上一步配置svg_a图片目录下。

接下来，我们可以命令行中运行task任务:

gradlew svgAssemble

或者，习惯使用gradle面板的，可以在里面直接点击svgAssemble：

执行完成svgAssemble任务后，能够在前面配置的shapeDir以及javaDir目录下，生成对应的Java Renderer类和空白shape文件，文件名都为图片名：

当然，还有vectorDir目录下生成的vector文件：

---

3、加载SVGLoader

上一步中除了生成Java Renderer文件和空白shape资源文件外，还会生成SVGLoader.java文件。SVGLoader需要装载到Application中，这样才能实现资源文件的拦截。

public class SampleApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        SVGLoader.load(this);
    }
}

这样一来所有的准备工作以及关于SVG图片的处理就完全就绪了，下面我们来看看如何使用。

---

4、SVG图片的使用

SVG-Android图片的使用方式和普通的PNG图一样，可以直接在layout中直接对ImageView设置android:src=”@drawable/ic_android_red”，同时还支持预览图片功能：

当然，还可以在代码中使用：

ImageView imageView = (ImageView) findViewById(R.id.image);
imageView.setImageResource(R.drawable.ic_android_red);

甚至，你还可以不使用资源文件，直接使用Renderer类创建图片：

ImageView imageView = (ImageView) findViewById(R.id.image);
SVGDrawable drawable = new SVGDrawable(new ic_android_red(this));
imageView.setImageDrawable(drawable);

最后，运行一下，可以完美地在Android 4.0及以上系统中显示出来，并且完全不会因为图片尺寸的压缩或放大而失真！

---

本博客不定期持续更新，欢迎关注和交流：

http://blog.csdn.net/megatronkings