VectorDrawable的简单使用（这里不讲动画，不需要的请绕过）

最新推荐文章于 2017-10-14 09:18:29 发布

原创最新推荐文章于 2017-10-14 09:18:29 发布 · 714 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#svg #vector #drawable #android

Android 专栏收录该内容

69 篇文章

订阅专栏

这篇博客介绍了VectorDrawable的基本使用，重点不涉及矢量动画。VectorDrawable是Android中的矢量图形，源于SVG，具有可缩放、文本独立、文件小、显示效果优良等特点。通过Android Studio提供的资源，可以创建和使用VectorDrawable，尽管编辑不太方便。文章讨论了android:width、android:viewportWidth和android:pathData等属性，并展示了如何在布局中使用VectorDrawable。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇博客是关于Drawable的第八篇博客，主要讲的是关于VectorDrawable的相关知识，这些知识点都很简单，并没有涉及到矢量动画方面的东西，不需要的还请绕过（请原谅我写这么low的博客，我还是个菜鸟，以后会出高水平的博客的）。

谈到VectorDrawable就不得不说SVG（Scalable Vector Graphics），这种东西很牛X，牛X到你需要借助其他的工具编辑自己想要的图片，然后通过工具到处Path。
相关的材料也很多，我只做简单的介绍了！！！
SVG这种格式有不少优点：

基于可扩展标记语言（外语缩写：XML）
SVG是完全基于可扩展标记语言，并能和上述各项技术相融会的新一代的网络图像格式。SVG并非仅仅是一种图像格式，由于它是一种基于XML的语言，也就意味着它继承了XML的跨平台性和可扩展性，从而在图形可重用性上迈出了一大步。如SVG可以内嵌于其他的XML文档中，而SVG文档中也可以嵌入其他的XML内容，各个不同的SVG图形可以方便地组合，构成新的SVG图形。
采用文本来描述对象
SVG文件中的文字虽然在显示时可呈现出各种图像化的修饰效果，但却仍然是以文本的形式存在的，可以选择复制、粘贴。由于SVG内的文字都以文本的形式出现在XML文件中，这些信息可以为搜索引擎所用，而以往搜索引擎通常无法搜索到写在点阵图像中的文字。
具有交互性和动态性
SVG是基于XML的，它提供无可匹敌的动态交互性。你可以在SVG文件中嵌入动画元素(如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等)，或通过脚本定义来达到高亮显示、声音、动画等效果。
完全支持DOM
DOM(Document Object Model文档对象模型)是一种文档平台，它允许程序或脚本动态的存储和上传文件的内容、结构或样式。由于SVG完全支持DOM，因而SVG文档可以通过一致的接口规范与外界的程序打交道。SVG以及SVG中的物件元素完全可以通过脚本语言接受外部事件的驱动，例如鼠标动作，实现自身或对其他物件、图像的控制等。这也是电子文档应具备的优秀特性之一。

说完了格式上的好处，我们在说说SVG同其他格式相比的好处：

任意放缩
用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
文本独立
SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
较小文件
SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。
超强显示效果
SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
超级颜色控制
SVG图像提供一个1 600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。

先看一下SVG和普通图片放大后的区别：
这里写图片描述

图片是从其他人的文章中截取的，原图地址

从图中可以看到很明显的区别。就是一个都快糊了，一个很清晰。

在AndroidStudio中也提供了一些VectorDrawable，可以使用，就是不太好编辑，不知道是不是因为没有找对工具。
具体位置还是看图，图片表示的比较清楚，嘴笨说不清！！！
这里写图片描述

这里写图片描述

感觉挺多的，但是我好像没看什么人用（原谅我的见识短浅）！！
这次我们就用一下！！！
主布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_gravity="center_horizontal"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_airplanemode_active_black_24dp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="startAnimator"
        android:text="@string/app_name" />
</LinearLayout>

如果不做矢量动画，当成普通的drawable来用就可以了，然后在加载一下布局，就可以显示出来了，这就不演示了！

我们现在来看一下ic_airplanemode_active_black_24dp这个里面有什么东西！！！

<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:fillColor="#FF000000"
        android:pathData="M10.18,9"/>
    <path
        android:fillColor="#FFf03020"
        android:pathData="M21,16v-2l-8,-5V3.5c0,-0.83 -0.67,-1.5 -1.5,-1.5S10,2.67 10,3.5V9l-8,5v2l8,-2.5V19l-2,1.5V22l3.5,-1 3.5,1v-1.5L13,19v-5.5l8,2.5z"/>
</vector>

会让我们犯迷糊的估计也就是android:width和android:viewportWidth的区别，还有就是android:pathData这个属性的作用。
首先说一下android:width这个属性的作用，这个指定的大小其实就是这个drawable的大小，像这里指定为24dp。而android:viewportWidth这个属性指定的大小是一个虚拟的大小。具体例子，就相当于我们要在一张A4纸上画图，纸的长宽打上刻度。其中android:width就是指的A4纸的实际大小，而android:viewportWidth就是指我们打上去的刻度，比如说宽上面有20个刻度，那么下面在画图的时候，宽度就不能超过20个刻度了，超过的话就不在纸上了。当然你也可以假设为200个刻度，那么你在实际绘画的时候超过100都没有问题，因为还在A4纸上呀。

android:pathData上的一系列字母加数字，其实就是告诉解析器，如何绘制的，这些字母代表一些指令，于andorid中的方法相对应：
这些指令是与Android中的Path类中的某些方法是对应的。如下：

    M(m)：相当于Path.moveTo()，开始新一段的path。

    L(l)：相当于Path.lineTo()，移动到指定的点。

    H(h)：水平移动。

    V(v)：竖直移动。

    C(c)：三阶贝塞尔曲线。相当于Path.cubicTo()。

    S(s)：同C，但比C要更平滑。

    Q(q)：二阶贝塞尔曲线

    T(t)：同Q，但比q平滑。

    A(a)：弧线。相当于Path.arcTo()。

    Z(z)：关闭。相当于Path.close()。

    每一个指令都有大小写，大写表示绝对定位，小写表示相对定位。（相对定位的参考点是上一次坐标，不是最初的坐标哦）

关于这个可以去查一下SVG的path指令，我敢保证你肯定一看就懂了！！！！

最后运行出来的效果图如下所示
这里写图片描述
看看是不是放大了很多倍，依然显示的很清楚呀！！！