android使用SVG

android使用SVG

      为什么要使用SVG.

      SVG可以减小app体积。

      SVG具有体积小、加载速度快、放大缩小无拉伸的特点。

      Android中加载图片主要有两个阶段：   获取本地资源时间+图片渲染时间。

      经过试验：

      png或jpeg的   获取本地资源时间2923us,   渲染时间49um  总和2972us

      svg获取本地资源时间247us ，627us    总和874us。

      加载效率是png和jpeg的3倍。

      SVG是一种采用XML来描述二维图形的语言，所以它可以直接打开xml文件来修改和编辑

      SVG着重将图片的着色和绘制路径记录在SVG文件中，调用时重新渲染。

     SVG介绍：

     1）SVG，即Scalable Vector Graphics 可伸缩矢量图形，这种图像格式在前端中已经使用的非常广泛了。

            SVG的W3C的解释： http://www.w3school.com.cn/svg/svg_intro.asp

            首先要解释下什么是矢量图像，什么是位图图像？

            1、矢量图像：SVG是W3C 推出的一种开放标准的文本式矢量图形描述语言,他是基于XML的、专门为网络而设计的图像格式，

                SVG是一种采用XML来描述二维图形的语言，所以它可以直接打开xml文件来修改和编辑。

            2、位图图像：位图图像的存储单位是图像上每一点的像素值，因而文件会比较大，像GIF、JPEG、PNG等都是位图图像格式。

     2）Vector，在Android中指的是Vector Drawable，也就是Android中的矢量图，

                可以说Vector就是Android中的SVG实现(并不是支持全部的SVG语法,现已支持的完全足够用了)

    准备工作：

    一、SVG文件图像转化

     （1）、SVG转化成android的Vector工具：

          http://inloop.github.io/svg2android/

     （2）、将SVG转换成图像并编辑

         http://editor.method.ac/

     （3）.使用AndroidStudio插件完成SVG添加（Vector Asset Studio）

                    详细：http://www.jianshu.com/p/d6c39f2dd5e7

                    AS会自动生成兼容性图片(高版本会生成xxx.xml的SVG图片；低版本会自动生成xxx.png图片)

     （4）.有些网站可以找到SVG资源

                    SVG下载地址： http://www.shejidaren.com/8000-flat-icons.html

                                  http://www.flaticon.com/

                                  http://www.iconfont.cn/plus --- 阿里巴巴

                    图片转成SVG https://vectormagic.com/

兼容问题，5.0以上的可以直接用：

一、兼容5.0以下的版本

    1、使用Android Studio 2.2以上的版本，gradle版本在2.0以上，准备步骤

    1.1、添加

·    defaultConfig {

        vectorDrawables.useSupportLibrary = true

    }

    1.2、添加

    compile 'com.android.support:appcompat-v7:25.3.1' //需要是23.2 版本以上的

    1.3、Activity需要继承与AppCompatActivity

    1.4、布局文件当中添加

        xmlns:app="http://schemas.android.com/apk/res-auto"

    2、使用在Actvity前面添加一个flag设置

        static {

            AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);

        }

    2.1 ImageView/ImageButton

        XML app:srcCompat

        代码里面使用无区别

    2.2 Button 不支持app:srcCompat

        Xml 使用在Button的selector

    2.3 RadioButton 直接使用

    2.4 textview的drawable  直接使用

    2.5 使用的动态Vector Drawable

        主要是不能直接修改 pathData

        不能使用自定义interpolator

    android代码：

   ic_check.xml:

<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="path_check"
        android:fillColor="#FF000000"
        android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
</vector>
           

   check_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:drawable="@drawable/ic_check">
    <target
        android:animation="@animator/check_animator"
        android:name="path_check"
        >
    </target>
</animated-vector>
           

   check_animator.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="500"
        android:propertyName="trimPathEnd"
        android:valueFrom="0"
        android:valueTo="1"
        android:valueType="floatType"
        ></objectAnimator>

</set>
           

   main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context="com.example.kerryqpw.myapplication.MainActivity">


    <ImageView
        android:layout_marginTop="20dp"
        android:onClick="anim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/check_anim"
        />

</LinearLayout>
           

  MainActivity.java:

public class MainActivity extends AppCompatActivity {

    static {
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
    }

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

    public  void anim(View view){
        ImageView imageView = (ImageView) view;
        Drawable drawable = imageView.getDrawable();
        ((Animatable)drawable).start();
    }


}
           

   实现效果：