android中SVG失量图形使用

矢量图片库---
http://iconfont.cn/collections
阿里矢量图形库---
http://iconfont.cn/plus/collections/detail?cid=3057


根据上图的方式可以获得drawable类型的xml文件，里面有path，color，height，weigh

• 上面说的是如何导入SVG矢量图型下面来说怎么用
  需要关联这个库
  //svg函数库
  compile 'com.jrummyapps:animated-svg-view:1.0.1'

我们要设置AnimatedSvgView的属性(属性值具体的含义我还没太弄清楚，就不和大家乱说了。)

android:id="@+id/animated_svg_view"
android:layout_width="180dp"
android:layout_height="180dp"
android:layout_gravity="center"
android:layout_marginBottom="25dp"
app:animatedSvgFillColors="@array/google_glyph_colors"
app:animatedSvgFillStart="1200"
app:animatedSvgFillTime="1000"
app:animatedSvgGlyphStrings="@array/google_glyph_strings"
app:animatedSvgImageSizeX="400"
app:animatedSvgImageSizeY="400"
app:animatedSvgTraceMarkerLength="50"
app:animatedSvgTraceTime="2000"
app:animatedSvgTraceTimePerGlyph="1000"/>

• 需要创建一个枚举类型SVG

public enum SVG {
    FISH( new String[]{
      "M431.8,145.5c-103.6,-25 -412.6,365.1 -412.6,365.1 -20.2,24.9 -35.3,106.2 12.4,147.9 47.7,41.7 180.4,-43.8 265.4,-70.9 85,-27.1 95.4,41.7 56,85.5 -39.4,43.8 -172.1,81.4 -170,114.7 2.1,33.4 255,160.6 313.1,162.7C554.1,952.6 535.5,170.5 431.8,145.5zM342.2,436.9c-38.7,0 -70.1,-31.6 -70.1,-70.5 0,-38.9 31.4,-70.5 70.1,-70.5 38.7,0 70.1,31.6 70.1,70.5C412.3,405.3 380.8,436.9 342.2,436.9zM1671.9,547.4l297.5,258.3c0,0 -11.8,-617.4 -37.8,-586.5 -26,30.9 0,0 -269.1,199.5 -172.3,-306.3 -1071.8,-346.7 -1071.8,-346.7 39.3,98.6 51.9,947.5 49.6,947.5C1315.5,1078.7 1671.9,547.4 1671.9,547.4zM1662.5,103.9c126.5,38.2 163.1,-145.2 135.2,-93.3 -27.9,51.9 -136.5,21.8 -209.4,-7.3 -72.9,-29 -268.8,140.4 -268.8,140.4C1413.4,61.2 1662.5,103.9 1662.5,103.9zM1831.2,842.9c-26.3,52.7 -135.8,26.2 -209.5,-0.5 -73.8,-26.7 -264.2,149 -264.2,149 91.3,-85.5 341.6,-50.9 341.6,-50.9C1826.7,974.6 1857.5,790.1 1831.2,842.9z"
    },
      new int[]{
              Color.BLACK
      },1970,1024

    ),
  GRIL(
          new String[]{
                  "M389.3,667.8C389.3,667.8 211.3,733.7 211.3,623.3 211.3,601.3 233.5,599.5 233.5,556.5 233.5,531.5 144.2,0 522.9,0 877.2,0 790,532.9 790,556.5 790,601.6 812.3,600.1 812.3,623.3 812.3,733.9 634.2,667.8 634.2,667.8 634.2,667.8 611,769.5 790,823.7 1012.3,890.9 990.4,988.9 990.4,1024L33.2,1024C33.2,1024 17.6,890.5 233.5,823.7 408.5,769.5 389.3,667.8 389.3,667.8Z"
          },
          new int[]{
                  Color.BLACK
          },
          1024,1024
  ),  BUSYBOX_LOGO(
      new String[]{
          "M481,452.9c0,15.5-12.6,28.1-28.1,28.1H59.1C43.6,481,31,468.4,31,452.9V59.1C31,43.6,43.6,31,59.1,31h393.8c15.5,0,28.1,12.6,28.1,28.1V452.9z",
          "M256.4,397.8l-0.1-0.1l-119.9-71.4v-115l0,0l120.4,64.2l0,0l0.1,0l0,0V398l0,0l-0.1-0.1L256.4,397.8z",
          "M375.7,211.3l-118.8,64.3V398l118.8-71.9L375.7,211.3L375.7,211.3z",
          "M375.7,211.3v84.2L312.3,328l-55.5-52.4v0L375.7,211.3L375.7,211.3z",
          "M433.3,244.4L375.7,274l-64,32.9l-54.8-31.3v0l118.8-64.3l0,0L433.3,244.4z",
          "M255.2,147l120.5,64.3l0,0l54.5-31.3l-54.5-30.7l-63-35.4L255.2,147L255.2,147L255.2,147L255.2,147z",
          "M78.6,178.3l57.6-29.6l64-32.9l54.8,31.3v0l-118.8,64.3l0,0L78.6,178.3z",
          "M255.1,147l1.8,128.7l-0.1,0l-120.5-64.3L255.1,147z",
          "M256.9,275.7L256.9,275.7L255.1,147l0,0l0.1,0l120.5,64.3L256.9,275.7z",
          "M256.9,275.7V350l-91-48.6l9.6-6.1l23.8,13.4L256.9,275.7L256.9,275.7z",
          "M256.8,275.6L256.8,275.6l-0.1,122.3l0.2,0.1L256.8,275.6L256.8,275.6z",
          "M256.8,275.6l-120.5-64.3l0,0l-54.5,31.3l54.5,30.7l63,35.4L256.8,275.6L256.8,275.6L256.8,275.6L256.8,275.6z"
      },
      new int[]{
          0xFF41A4C4,
          0xFFD95545,
          0xFFC54C3F,
          0xFFAA4438,
          0xFFF4F3EE,
          0xFFF4F3EE,
          0xFFF4F3EE,
          0xFFD2D1CC,
          0xFFDCDAD6,
          0xFFC54C3F,
          0xFFD95545,
          0xFFF4F3EE
      },
      512, 512
  );
 public final String[] glyphs;
  public final int[] colors;
  public final float width;
  public final float height;

  SVG(String[] glyphs, int[] colors, float width, float height) {
    this.glyphs = glyphs;//svg图片的绘制path
    this.colors = colors;//svg图片的绘制colors
    this.width = width;//svg图片的绘制width
    this.height = height;//svg图片的绘制height
  }
}

• 有了枚举类就可以进行下一步操作,我们需要MianActivity中获取枚举中的数据对svgView进行添加，简单的代码如下。逻辑很简单就是点击下一个而已。如需完整实现这段代码请自行在Layout里面加俩个Button按钮。

public class MainActivity extends AppCompatActivity {
    private AnimatedSvgView svgView;
    private int index = -1;

    @Override protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        svgView = (AnimatedSvgView) findViewById(R.id.animated_svg_view);

        svgView.postDelayed(new Runnable() {

            @Override public void run() {
                svgView.start();
            }
        }, 500);

        svgView.setOnClickListener(new View.OnClickListener() {

            @Override public void onClick(View v) {
                if (svgView.getState() == AnimatedSvgView.STATE_FINISHED) {
                    svgView.start();
                }
            }
        });

        svgView.setOnStateChangeListener(new AnimatedSvgView.OnStateChangeListener() {

            @Override public void onStateChange(int state) {
                if (state == AnimatedSvgView.STATE_TRACE_STARTED) {
                    findViewById(R.id.btn_previous).setEnabled(false);
                    findViewById(R.id.btn_next).setEnabled(false);
                } else if (state == AnimatedSvgView.STATE_FINISHED) {
                    findViewById(R.id.btn_previous).setEnabled(index != -1);
                    findViewById(R.id.btn_next).setEnabled(true);
                    if (index == -1) index = 0; // first time
                }
            }
        });
    }

    public void onNext(View view) {

        if (++index >= SVG.values().length) index = 0;
        setSvg(SVG.values()[index]);
    }

    public void onPrevious(View view) {
        if (--index < 0) index = SVG.values().length - 1;
        setSvg(SVG.values()[index]);
    }

    private void setSvg(SVG svg) {
        svgView.setGlyphStrings(svg.glyphs);
        svgView.setFillColors(svg.colors);
        svgView.setViewportSize(svg.width, svg.height);
        svgView.setTraceResidueColor(0x32000000);
        svgView.setTraceColors(svg.colors);
        svgView.rebuildGlyphData();
        svgView.start();
    }

}

• GitHub最详细的SvgDemo：
  https://github.com/jrummyapps/AnimatedSvgView