如何使用android的vectordrawable类绘制矢量图

1. 创建vector drawable从相似角度来看，vectordrawable与标准svg图形都是利用path值绘制完成的。不过如何利用svg path绘制图形并不在本篇文章的探讨范围之内，大家可以点击此处从w3c网站处获取必要的说明资料。在本文当中，我们只需要了解到path标签的作用是进行图形绘制即可。让我们首先从svg文件入手，看看以下图形是如何被绘制出来的：这一图形共由五个主要部分所组成：一个圆角四边形作为cpu主体，该四边形由两条拱状弧线构成。四组各自包含五根线条的图形，用于充当cpu的外延线路。虽然看起来有点繁杂，但大家其实用不着纠结于以上代码的具体含义，而且这完全不会影响到我们接下来要进行的vectordrawable绘制工作。不过需要强调的是，我将前面提到的五大图形组成部分在代码中作为独立的区块来处理，这是为了增强代码内容的可读性。首先，我们需要利用两条拱形弧线来绘制出圆角四边形，而在接下来的内容中我们会探讨如何分别表现出上、下、左、右四个方位的外延线条。为了将上述svg代码转化为vectordrawable，大家首先需要在xml当中定义vector对象。以下代码提取自本篇文章示例代码当中的vector_drawable_cpu.xml文件。<vector xmlns:android="" android:height="64dp" android:width="64dp" android:viewportheight="600" android:viewportwidth="600" > </vector> 在此之后，大家可以向其中添加path数据。下列代码同样被拆分成了五个不同的path标签而非将其作为整体处理，这当然也是为了保证内容的可读性。正如大家所见，每个path片段都只需要利用pathdata属性进行绘制。现在我们可以将vectordrawable xml文件作为一个可绘制对象纳入到标准imageview当中，而且其能够根据应用程序的实际需要任意进行尺寸缩放——完全不需要再修改任何j**a代码。2. 为vector drawables添加动画效果现在我们已经了解了如何以纯代码方式创建图形，接下来要做的是找点乐子——为其添加动画效果。在以下动画中，大家会发现作为延伸线路的各组线条会不断指向并远离cpu本体进行移动。为了达到这一目标，大家需要将包含动画效果的每个片段包含在一个<group>标签当中。 接下来，我们需要为每个动画类型创建animato**件。在本次示例中，每组线路各使用一个animator，这就意味着共需要四个animator。以下代码所示为上方线路的动画效果，大家还需要为下、左、右线路设定类似的效果。每个animator xml文件都被包含在了本项目的示例代码当中。如大家所见，propertyname被设定为translatey，这意味着该动画将沿y轴方向移动。而valuefrom与valueto则控制着位移的起点与终点。通过将repeatmode设置为reverse而repeatcount设置为infinite，整个动画会一直循环下去，其效果则在vectordrawable处体现出来。该动画的duration被设定为250，其时长单位为毫秒。为了将该动画应用到自己的可绘制文件当中，大家需要创建一个新的animated-vector xml文件，从而将这些animator分配给各vectordrawable组。以下代码的作用是创建该animated_cpu.xml文件。<?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="" android:drawable="@drawable/vector_drawable_cpu"> <target android:animation="@animator/pulse_top" android:name="top" /> <target android:animation="@animator/pulse_right" android:name="right" /> <target android:animation="@animator/pulse_left" android:name="left" /> <target android:animation="@animator/pulse_bottom" android:name="bottom" /> </animated-vector> 当所有必要的xml文件都已经准备完成后，大家就可以将animated_cpu.xml加入到imageview当中进行显示了。<imageview android:id="@+id/cpu" android:layout_width="64dp" android:layout_height="64dp" android:src="@drawable/animated_cpu" /> 要开始播放动画效果，大家需要从imageview当中获取animatable实例并调用start。 imageview mcpuimageview = (imageview) findviewbyid( r.id.cpu ); drawable drawable = mcpuimageview.getdrawable(); if (drawable instanceof animatable) { ((animatable) drawable).start(); } 在start被调用之后，cpu图形当中的线路图形就会开始移动——整个过程只需要使用少量j**a代码即可实现。3. vector drawables的变化方式对于vectordrawable来说，最常见的一种使用方式就是将一个图形转化至另一个图形，例如操作栏中的图标由汉堡变成箭头。要做到这一点，源与目标path二者都必须具备同样的格式以保证元素数量上的一致。在本次示例中，我们将如前文图片所示尝试将左箭头转化为右箭头。<string name="left_arrow">m300,70 l 0,70 -70,-70 0,0 70,-70z</string> <string name="right_arrow">m300,70 l 0,-70 70,70 0,0 -70,70z</string> 接下来，大家需要利用path为left_arrow建立一个初始drawable。在示例代码中，我们将其命名为vector_drawable_left_arrow.xml。<vector xmlns:android="" android:height="64dp" android:width="64dp" android:viewportheight="600" android:viewportwidth="600" > <path android:name="left_arrow" android:fillcolor="#000000" android:pathdata="@string/left_arrow"/> /vector> cpu动画与这里提到的图形变化示例之间，最主要的区别就体现在animator_left_right_arrow.xml文件当中。<?xml version="1.0" encoding="utf-8"?> <set xmlns:android=""> <objectanimator android:duration="1000" android:propertyname="pathdata" android:valuefrom="@string/left_arrow" android:valueto="@string/right_arrow" android:valuetype="pathtype" android:repeatmode="reverse" android:repeatcount="-1"/> </set> 大家可能已经注意到了，valuefrom与valueto两项属性会引用左箭头与右箭头的path数据，valuetype被设定为pathtype而propertyname则被设定为pathdata。当以上设定完成之后，该animator将明确如何将一组path数据转化为另一组。当该animator结束之后，我们还需要利用新的animated-vector对象将vectordrawable分配至objectanimator。 <?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="" android:drawable="@drawable/vector_drawable_left_arrow"> <target android:name="left_arrow" android:animation="@animator/animator_left_right_arrows" /> </animated-vector> 最后，大家还需要将该动画drawable分配至imageview，而后在自己的j**a代码中开始运行。 <imageview android:id="@+id/left_right_arrow" android:layout_width="64dp" android:layout_height="64dp" android:layout_below="@+id/cpu" android:src="@drawable/animated_arrow" /> marrowimageview = (imageview) findviewbyid( r.id.left_right_arrow ); drawable = marrowimageview.getdrawable(); if (drawable instanceof animatable) { ((animatable) drawable).start(); } 20210311