android5.0----SVG

时间：2024-06-06 10:37:56

SVG ----scalable vector Graphics

可缩放矢量图形

android L 即android 5.0的新特性。

1，SVG是干什么的？

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

2，SVG特点？

  • SVG 可被非常多的工具读取和修改（比如记事本）
  • SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
  • SVG 可以与 Java 技术一起运行
  • SVG 是开放的标准
  • SVG 文件是纯粹的 XML

官网的例子：

<!-- res/drawable/heart.xml -->

<vector xmlns:android="http://schemas.android.com/apk/res/android"

    <!-- intrinsic size of the drawable -->

    android:height="256dp"

    android:width="256dp"

    <!-- size of the virtual canvas -->

    android:viewportWidth="32"

    android:viewportHeight="32">

  <!-- draw a path -->

  <path android:fillColor="#8fff"

      android:pathData="M20.5,9.5

                        c-1.955,0,-3.83,1.268,-4.5,3

                        c-0.67,-1.732,-2.547,-3,-4.5,-3

                        C8.957,9.5,7,11.432,7,14

                        c0,3.53,3.793,6.257,9,11.5

                        c5.207,-5.242,9,-7.97,9,-11.5

                        C25,11.432,23.043,9.5,20.5,9.5z" />

</vector>

　　

这样就定义好了一个静态的矢量图，可以像一般的图片资源使用，设置到imageView中会显示出一个心形。控制显示心形的就是上面path这个标签，一个path代表一个元素，绘制的内容是pathData下的一长串字符，里面是SVG绘制的一系列命令，提供moveTo、lineTo、close等操作，可以和Graphics 中的Path操作对应起来。

在android中使用矢量图有一下步骤：

　　1，在drawable资源下面创建矢量图的.xml文件

vector.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"

     android:height="256dp"

     android:width="256dp"

     android:viewportHeight="32"

     android:viewportWidth="32" >

         <path

　　

             android:fillColor="#0000FF"

             android:pathData="

　　　　　　　　M20.5,9.5

　　　　　　　　c-1.955,0,-3.83,1.268,-4.5,3

　　　　　　　　c-0.67,-1.732,-2.547,-3,-4.5,-3

　　　　　　　　C8.957,9.5,7,11.432,7,14

　　　　　　　　c0,3.53,3.793,6.257,9,11.5

　　　　　　　　C25,11.432,23.043,9.5,20.5,9.5z

　　　　　　" />

     </group>

 </vector>

　　其中

android:height="256dp" -- SVG图形的高度
android:width="256dp"-- SVG图形的宽度
android:viewportHeight="32" -- SVG图形划分的比例
android:viewportWidth="32" -- SVG图形划分的比例
宽高划分为32等分，必须保持android:height和android:viewportHeight,android:width,android:viewportWidth比例一致。

　　M 100 100 L 300,200 L 200,300 Z

  • M   moveto(M X,Y)：画笔移动到指定坐标，未绘制 move to 移动绘制点 ,就是从坐标100，100向300，200坐标移动，画条直线，300，200-->200,300画条直线。
  • L：lineto（L X,Y） 绘制直线到，x,y坐标
  • Z：close 闭合--也就是svg的结束位置
  • C：cubic bezier 三次贝塞尔曲线
  • Q：quatratic bezier curve (Q X,Y,ENDX,ENDY)二次贝塞尔曲线
  • A：ellipse 圆弧
  • H：horizontal line to 水平直线
  • T : smooth quadratic curve (Q X,Y,ENDX,ENDY):映射前面路径后的终点。

在布局文件中使用：

<ImageVIew

    android:id="@+id/imageVIew1"

    android:layout_width = "wrap_content"

    android:layout_height = "wrap_content"

    android:layout_alignParentTop="true"

    android:layout_centerhorizontal = "true"

    android:src = "@drawable/vector"

    />　　

效果图：

android5.0----SVG

android5.0----SVG

android5.0----SVG

然后分享两个svg值获取的方法：

http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html

一个是个离线的工具：

inkscape

界面：

android5.0----SVG

android5.0----SVG

然后将svg保存到桌面上，并用浏览器打开：

android5.0----SVG

android5.0----SVG

查看svg信息：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg

   xmlns:dc="http://purl.org/dc/elements/1.1/"

   xmlns:cc="http://creativecommons.org/ns#"

   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

   xmlns:svg="http://www.w3.org/2000/svg"

   xmlns="http://www.w3.org/2000/svg"

   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

   width="744.09448819"

   height="1052.3622047"

   id="svg2"

   version="1.1"

   inkscape:version="0.48.4 r9939"

   sodipodi:docname="新建文档 1">

  <defs

     id="defs4" />

  <sodipodi:namedview

     id="base"

     pagecolor="#ffffff"

     bordercolor="#666666"

     borderopacity="1.0"

     inkscape:pageopacity="0.0"

     inkscape:pageshadow="2"

     inkscape:zoom="0.35"

     inkscape:cx="375"

     inkscape:cy="405.71429"

     inkscape:document-units="px"

     inkscape:current-layer="layer1"

     showgrid="false"

     inkscape:window-width="1280"

     inkscape:window-height="738"

     inkscape:window-x="-8"

     inkscape:window-y="-8"

     inkscape:window-maximized="1" />

  <metadata

     id="metadata7">

    <rdf:RDF>

      <cc:Work

         rdf:about="">

        <dc:format>image/svg+xml</dc:format>

        <dc:type

           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />

        <dc:title></dc:title>

      </cc:Work>

    </rdf:RDF>

  </metadata>

  <g

     inkscape:label="Layer 1"

     inkscape:groupmode="layer"

     id="layer1">

    <path

       sodipodi:type="arc"

       style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"

       id="path2985"

       sodipodi:cx="402.85715"

       sodipodi:cy="385.21933"

       sodipodi:rx="217.14285"

       sodipodi:ry="230"

       d="m 620,385.21933 a 217.14285,230 0 1 1 -434.28571,0 217.14285,230 0 1 1 434.28571,0 z" />

    <path

       sodipodi:type="star"

       style="fill:#ffff00;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"

       id="path2987"

       sodipodi:sides="5"

       sodipodi:cx="205.71429"

       sodipodi:cy="349.50504"

       sodipodi:r1="149.99319"

       sodipodi:r2="74.996597"

       sodipodi:arg1="1.2610934"

       sodipodi:arg2="1.8894119"

       inkscape:flatsided="false"

       inkscape:rounded="0"

       inkscape:randomized="0"

       d="m 251.42858,492.36218 -69.20713,-71.63513 -98.24588,16.40014 46.74287,-87.95636 -45.957098,-88.36947 98.095808,17.27511 69.84283,-71.01547 13.88368,98.63296 89.12234,44.47949 -89.51523,43.68342 z"

       inkscape:transform-center-x="-14.126491"

       inkscape:transform-center-y="0.20655178"

       transform="translate(214.28571,37.142857)" />

  </g>

</svg>

AnimateVectorDrawable

为矢量图片添加动画效果

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @SuppressLint("NewApi")

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        final ImageView robot = (ImageView) findViewById(R.id.main_vector_robot);

        Drawable avd = ResourcesCompat.getDrawable(this, R.drawable.ic_robot_avd);

        robot.setBackground(avd);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {
　　　　　　　　　　//动画的执行

                ((Animatable) robot.getBackground()).start();

            }

        });

    }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <ImageView xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/main_vector_robot"

        android:layout_width="250dp"

        android:layout_height="290dp"

        android:layout_gravity="center" />

    <android.support.design.widget.FloatingActionButton

        android:id="@+id/fab"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="bottom|end"

        android:layout_margin="@dimen/fab_margin"

        android:src="@android:drawable/ic_media_play" />

</FrameLayout>


Drawable avd = ResourcesCompat.getDrawable(this, R.drawable.ic_robot_avd);
robot.setBackground(avd);为ImageView添加svg背景动画
svg对应的xml：




<?xml version="1.0" encoding="UTF-8"?>

<vector

    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:width="24dp"

    android:height="24dp"

    android:viewportHeight="404.0"

    android:viewportWidth="344.0"

    app:vc_viewportHeight="404.0"

    app:vc_viewportWidth="344.0"

    tools:ignore="NewApi"

    >

    <path

        android:fillColor="#9FBF3B"

        android:pathData="M223.86627,35.298L243.98503,6.026C245.17964,4.286 244.88223,2.002 243.32036,0.922C241.76048,-0.152 239.52295,0.379 238.33733,2.121L217.42815,32.53C203.6487,27.091 188.3473,24.06 172.21956,24.06C156.09181,24.06 140.78642,27.088 127.00798,32.53L106.1018,2.12C104.90319,0.38 102.66966,-0.153 101.10878,0.921C99.547905,1.998 99.251495,4.283 100.446106,6.025L120.57185,35.297C88.57285,50.213 66.13274,78.557 63.273453,111.637L281.1537,111.637C278.30438,78.557 255.86327,50.214 223.86627,35.298"

        android:strokeColor="#00000000"

        android:strokeWidth="1"

        app:vc_fillColor="#9FBF3B"

        app:vc_pathData="M223.86627,35.298L243.98503,6.026C245.17964,4.286 244.88223,2.002 243.32036,0.922C241.76048,-0.152 239.52295,0.379 238.33733,2.121L217.42815,32.53C203.6487,27.091 188.3473,24.06 172.21956,24.06C156.09181,24.06 140.78642,27.088 127.00798,32.53L106.1018,2.12C104.90319,0.38 102.66966,-0.153 101.10878,0.921C99.547905,1.998 99.251495,4.283 100.446106,6.025L120.57185,35.297C88.57285,50.213 66.13274,78.557 63.273453,111.637L281.1537,111.637C278.30438,78.557 255.86327,50.214 223.86627,35.298"/>

    <path

        android:fillColor="#FFFFFF"

        android:pathData="M126.7026,81.438C120.042915,81.438 114.646706,76.031 114.646706,69.359C114.646706,62.688 120.03992,57.279 126.7026,57.279C133.35728,57.279 138.7515,62.686 138.7515,69.359C138.7525,76.03 133.35728,81.438 126.7026,81.438"

        android:strokeColor="#00000000"

        android:strokeWidth="1"

        app:vc_fillColor="#FFFFFF"

        app:vc_pathData="M126.7026,81.438C120.042915,81.438 114.646706,76.031 114.646706,69.359C114.646706,62.688 120.03992,57.279 126.7026,57.279C133.35728,57.279 138.7515,62.686 138.7515,69.359C138.7525,76.03 133.35728,81.438 126.7026,81.438"/>

    <path

        android:fillColor="#FFFFFF"

        android:pathData="M217.72556,81.438C211.07086,81.438 205.67564,76.031 205.67564,69.359C205.67564,62.686 211.07086,57.279 217.72556,57.279C224.38722,57.279 229.78044,62.688 229.78044,69.359C229.78044,76.03 224.38522,81.438 217.72556,81.438"

        android:strokeColor="#00000000"

        android:strokeWidth="1"

        app:vc_fillColor="#FFFFFF"

        app:vc_pathData="M217.72556,81.438C211.07086,81.438 205.67564,76.031 205.67564,69.359C205.67564,62.686 211.07086,57.279 217.72556,57.279C224.38722,57.279 229.78044,62.688 229.78044,69.359C229.78044,76.03 224.38522,81.438 217.72556,81.438"/>

    <path

        android:name="robot_left_hand"

        android:fillColor="#9FBF3B"

        android:pathData="M49.28443,249.598C49.28443,263.048 38.402195,273.952 24.978045,273.952L24.978045,273.952C11.554891,273.952 0.6726547,263.048 0.6726547,249.598L0.6726547,151.09C0.6726547,137.64 11.554891,126.736 24.978045,126.736L24.978045,126.736C38.402195,126.736 49.28443,137.64 49.28443,151.09L49.28443,249.598L49.28443,249.598Z"

        android:strokeColor="#00000000"

        android:strokeWidth="1"

        app:vc_fillColor="#9FBF3B"

        app:vc_pathData="M49.28443,249.598C49.28443,263.048 38.402195,273.952 24.978045,273.952L24.978045,273.952C11.554891,273.952 0.6726547,263.048 0.6726547,249.598L0.6726547,151.09C0.6726547,137.64 11.554891,126.736 24.978045,126.736L24.978045,126.736C38.402195,126.736 49.28443,137.64 49.28443,151.09L49.28443,249.598L49.28443,249.598Z"/>

    <path

        android:name="robot_body"

        android:fillColor="#9FBF3B"

        android:pathData="M63.269463,127.489L63.269463,305.404C63.269463,315.97 71.81837,324.537 82.366264,324.537L104.954094,324.537L104.954094,379.281C104.954094,392.732 115.83533,403.635 129.25948,403.635C142.68364,403.635 153.56587,392.732 153.56587,379.281L153.56587,324.537L190.86227,324.537L190.86227,379.281C190.86227,392.732 201.74251,403.635 215.16766,403.635C228.59282,403.635 239.47305,392.732 239.47305,379.281L239.47305,324.537L262.06088,324.537C272.6088,324.537 281.15967,315.975 281.15967,305.404L281.15967,127.489L63.269463,127.489L63.269463,127.489Z"

        android:strokeColor="#00000000"

        android:strokeWidth="1"

        app:vc_fillColor="#9FBF3B"

        app:vc_pathData="M63.269463,127.489L63.269463,305.404C63.269463,315.97 71.81837,324.537 82.366264,324.537L104.954094,324.537L104.954094,379.281C104.954094,392.732 115.83533,403.635 129.25948,403.635C142.68364,403.635 153.56587,392.732 153.56587,379.281L153.56587,324.537L190.86227,324.537L190.86227,379.281C190.86227,392.732 201.74251,403.635 215.16766,403.635C228.59282,403.635 239.47305,392.732 239.47305,379.281L239.47305,324.537L262.06088,324.537C272.6088,324.537 281.15967,315.975 281.15967,305.404L281.15967,127.489L63.269463,127.489L63.269463,127.489Z"/>

    <path

        android:name="robot_right_hand"

        android:fillColor="#9FBF3B"

        android:pathData="M295.1437,249.598C295.1437,263.048 306.02496,273.952 319.4491,273.952L319.4491,273.952C332.87225,273.952 343.7545,263.048 343.7545,249.598L343.7545,151.09C343.7545,137.64 332.87225,126.736 319.4491,126.736L319.4491,126.736C306.02496,126.736 295.1437,137.64 295.1437,151.09L295.1437,249.598L295.1437,249.598Z"

        android:strokeColor="#00000000"

        android:strokeWidth="1"

        app:vc_fillColor="#9FBF3B"

        app:vc_pathData="M295.1437,249.598C295.1437,263.048 306.02496,273.952 319.4491,273.952L319.4491,273.952C332.87225,273.952 343.7545,263.048 343.7545,249.598L343.7545,151.09C343.7545,137.64 332.87225,126.736 319.4491,126.736L319.4491,126.736C306.02496,126.736 295.1437,137.64 295.1437,151.09L295.1437,249.598L295.1437,249.598Z"/>

</vector>




对应的动画：




<?xml version="1.0" encoding="utf-8"?>

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:drawable="@drawable/ic_robot"

    tools:ignore="NewApi">

    <target

        android:name="robot_body"

        android:animation="@anim/robot_body" />

    <target

        android:name="robot_left_hand"

        android:animation="@anim/robot_left_hand" />

</animated-vector>




指向两个动画文件：robot_body.xml和robot_left_hand.xml


robot_body.xml是个属性动画xml文件：




<?xml version="1.0" encoding="utf-8"?>

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"

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

    android:duration="@android:integer/config_longAnimTime"

    android:interpolator="@android:interpolator/fast_out_slow_in"

    android:repeatCount="1"

    android:repeatMode="reverse"

    android:propertyName="pathData"

    android:valueFrom="@string/body_path_from"

    android:valueTo="@string/body_path_to"

    android:valueType="pathType"

    app:vc_valueType="pathType" />




robot_left_hand.xml也是个属性动画xml文件：




<?xml version="1.0" encoding="utf-8"?>

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"

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

    android:duration="@android:integer/config_longAnimTime"

    android:interpolator="@android:interpolator/fast_out_slow_in"

    android:propertyName="pathData"

    android:repeatCount="1"

    android:repeatMode="reverse"

    android:valueFrom="@string/left_hand_path_from"

    android:valueTo="@string/left_hand_path_to"

    android:valueType="pathType"

    app:vc_valueType="pathType" />






红色部分就是svg值，因此如果你在android svg开发中如果为svg值头疼可以参考这个工具来写。




关于兼容性：


众所周知svg概念在android上是出现在android 5.0以后的，所以也出现了相关的兼容性的问题：


1 ，首先style的兼容性：


res/values/styles.xml  android低版本默认读取


res/values_v21/styles.xml 这个尽可能使用android5.0风格的特性


2 ，layout布局文件，重点是一些控件的支持：


res/layout/activity.xml 所有通用的布局在这里写。


res/layout_v21/activity.xml 使用android 5.0新特性的一些控件的布局。


3 ,support library 比如recycleview cardview等的向下兼容：


4，就是通过检测系统的版本来调用不同系统版本的api




if(Build.VERSION.SDK-INT>=build.VERSION_CODES.LOLIPOP){

　　//使用材料设计的5.0新特性

}else{

　　//使用低于5.0的通用各版本方法

}




　　
相关文章