Android中使用SVG——VectorDrawable

作者: 一坨坨的叶俊杰 | 来源:发表于2019-04-29 20:15 被阅读0次

使用Glide v4加载SVG资源
Android动画进阶VectorDrawable
为什么矢量图放大还是会模糊
Android动画之VectorDrawable矢量图实战
VectorDrawable学习一:兼容性、配置、应用
AndroidStudio中使用SVG
Android SVG支持
Android中使用SVG——VectorDrawable
Eclipse中 VectorDrawable 动态改path颜
SVG图片在移动端的应用解决方案

一、为什么要用SVG

首先了解什么是SVG？全称为可缩放矢量图形（Scalable Vector Graphics），是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式，由W3C定义。

与Android中的Bitmap相比，它占用的空间小，而且可缩放不会因比例而失真。这对于Android繁多的机型适配来说是一个不错的选择。并且Android5.0之后引入了VectorDrawable对SVG进行支持。

SVG优点：
1、SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
2、SVG 描述的是图形的路径，放大缩小后不存在失真问题
3、SVG 文件是纯粹的 XML
4、SVG可以动态修改其颜色

缺点：
1、色域不如光栅图像，SVG描述的是路径，而光栅图像描述的是每个像素点的色值
2、适用于小图标，android中使用位图，SVG最终使用也是转化为位图，如果图像过大，SVG转化位图的时间也将增加。
3、适用于简单图形，这里的简单图形主要指简单几何图形拼凑而成的图形，头像等复杂图形就不适合了。

这里推荐两个SVG库网站：阿里的iconfont：https://www.iconfont.cn/ sfont：http://www.sfont.cn/

二、VectorDrawable

1、继承关系

如下图所示，VectorDrawable的继承自Drawable，且在API21（Android5.0）之后引入

继承关系图

2、Android studio中创建VectorDrawable

1）创建Vector Asset

创建VectorDrawable

2）配置Vector Asset 属性值

设置属性

Asset Type:使用矢量图类型，Clip Art为提供的固有矢量图 ,Local file为引用本地的矢量图文件

Name：名称

Size：图形的宽高设置，勾选Override可以自行设置

Color：图形颜色（填充颜色）

Opacity：不透明度

Enable auto mirroring for RTL layout ：是否从右到左镜像填充

选择next -> finish完成创建，创建完毕后会在res/drawable目录下新增一个xml文件，如下图

创建成功

3、VectorDrawable属性

ic_arrow_download_black_24dp.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:fillColor="#FF000000"
        android:pathData="M16.5,3c-1.74,0 -3.41,0.81 -4.5,2.09C10.91,3.81 9.24,3 7.5,3 4.42,3 2,5.42 2,8.5c0,3.78 3.4,6.86 8.55,11.54L12,21.35l1.45,-1.32C18.6,15.36 22,12.28 22,8.5 22,5.42 19.58,3 16.5,3zM12.1,18.55l-0.1,0.1 -0.1,-0.1C7.14,14.24 4,11.39 4,8.5 4,6.5 5.5,5 7.5,5c1.54,0 3.04,0.99 3.57,2.36h1.87C13.46,5.99 14.96,5 16.5,5c2,0 3.5,1.5 3.5,3.5 0,2.89 -3.14,5.74 -7.9,10.05z">
    </path>
</vector>

<vector>标签：

android:name -- 名称

android:width -- 默认宽度（wrap_content时使用该宽度）

android:height --默认高度（wrap_content时使用该高度）

android:viewportWidth --画布宽度（矢量图的画布区域，若所画坐标超出该区域将不会显示）

android:viewportHeight --画布高度（矢量图的画布区域，若所画坐标超出该区域将不会显示）

android:tint -- 色调

android:tintMode: --参照：tintMode Google文档

android:autoMirrored --自动镜像填充（从右到左填充）

android:alpha --整个Drawable的不透明度默认为1.0既全不透明

<path>标签

android:name --路径的名称

android:pathData --路径数据

android:fillColor --填充色

android:fillAlpha --填充透明度

android:strokeColor --描边颜色

android:strokeWidth --描边宽度

android:strokeAlpha --描边透明度

android:trimPathStart --去除路径开始的百分比（取值0-1，默认为0）

android:trimPathEnd --去除路径结尾的百分比（取值0-1，默认为0）

android:trimPathOffset --移位修剪区域（允许显示的区域包括起点和终点），范围从0到1。默认值为0。

android:strokeLineCap --设置笔划路径的线帽：butt、 round,、square ，默认为butt

android:strokeLineJoin --设置笔划路径的线条连接方式：miter、round、bevel. 默认为miter

android:fillType --路劲填充类型，可选nonZero（非零填充）或evenOdd（奇偶填充），默认nonZero，api24新增

4、VectorDrawable设置颜色渐变

话不多说，先上官方文档

fillColor 属性说明

大致意思就是fillColor这个属性可以设置具体的设置，在api24以上也可以通过属性方式设置渐变色值。

颜色渐变

上图可以看出官方在api24之后提供是三种渐变模式：LinearGradient、RadialGradient、SweepGradient,接下来看看具体的使用。

LinearGradient

第一种写法设置开始结束颜色以及开始结束的坐标

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:height="24dp"
    android:width="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:pathData="M20,12l-1.41,-1.41L13,16.17V4h-2v12.17l-5.58,-5.59L4,12l8,8 8,-8z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:startColor="#0000CD"
                android:centerColor="#FFFF00"
                android:endColor="#FF3030"
                android:startX="0"
                android:endX="0"
                android:startY="0"
                android:endY="24"
                android:type="linear">

            </gradient>
        </aapt:attr>
    </path>
</vector>

另一种写法，设置开始及结束的坐标，然后根据比例设置需要渐变的颜色

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:height="24dp"
    android:width="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:pathData="M20,12l-1.41,-1.41L13,16.17V4h-2v12.17l-5.58,-5.59L4,12l8,8 8,-8z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:startX="0"
                android:endX="0"
                android:startY="0"
                android:endY="24"
                android:type="linear">
                <item
                    android:color="#0000CD"
                    android:offset="0.0" />
                <item
                    android:color="#FFFF00"
                    android:offset="0.5" />
                <item
                    android:color="#FF3030"
                    android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

LinearGradient效果图

RadialGradient

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:pathData="M19.35,10.04C18.67,6.59 15.64,4 12,4 9.11,4 6.6,5.64 5.35,8.04 2.34,8.36 0,10.91 0,14c0,3.31 2.69,6 6,6h13c2.76,0 5,-2.24 5,-5 0,-2.64 -2.05,-4.78 -4.65,-4.96z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:startColor="#0000CD"
                android:centerColor="#FFFF00"
                android:endColor="#FF3030"
                android:gradientRadius="12"
                android:centerX="12"
                android:centerY="12"
                android:type="radial">
            </gradient>
        </aapt:attr>
    </path>
</vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:pathData="M19.35,10.04C18.67,6.59 15.64,4 12,4 9.11,4 6.6,5.64 5.35,8.04 2.34,8.36 0,10.91 0,14c0,3.31 2.69,6 6,6h13c2.76,0 5,-2.24 5,-5 0,-2.64 -2.05,-4.78 -4.65,-4.96z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:gradientRadius="12"
                android:centerX="12"
                android:centerY="12"
                android:type="radial">
                <item
                    android:color="#0000CD"
                    android:offset="0.0" />
                <item
                    android:color="#FFFF00"
                    android:offset="0.5" />
                <item
                    android:color="#FF3030"
                    android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

RadialGradient

SweepGradient

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:pathData="M10,4H4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2V8c0,-1.1 -0.9,-2 -2,-2h-8l-2,-2z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:startColor="#0000CD"
                android:centerColor="#FFFF00"
                android:endColor="#FF3030"
                android:centerX="24"
                android:centerY="24"
                android:type="sweep">
            </gradient>
        </aapt:attr>
    </path>
</vector>

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:pathData="M10,4H4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2V8c0,-1.1 -0.9,-2 -2,-2h-8l-2,-2z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:centerX="24"
                android:centerY="24"
                android:type="sweep">
                <item
                    android:color="#0000CD"
                    android:offset="0"/>
                <item
                    android:color="#FFFF00"
                    android:offset="0.5"/>
                <item
                    android:color="#FF3030"
                    android:offset="1"/>
            </gradient>
        </aapt:attr>
    </path>
</vector>

SweepGradient

使用Glide v4加载SVG资源
Android使用矢量图（SVG, VectorDrawable）实践篇 Android SVG矢量动画机制先放...
Android动画进阶VectorDrawable
动画进阶 VectorDrawable VectorDrawable是为了让Android支持SVG而诞生的。从...
为什么矢量图放大还是会模糊
矢量图（SVG）在Android系统中通过VectorDrawable来使用，但是在使用矢量图的时候还是发虚（变模...
Android动画之VectorDrawable矢量图实战
1. 矢量图SVG简介 Android 5.0系统中引入了 VectorDrawable 来支持矢量图(SVG)，...
VectorDrawable学习一:兼容性、配置、应用
1、VectorDrawable简介 VectorDrawable是SVG格式图片在Android开发上做的一个抽...
AndroidStudio中使用SVG
参考手把手教学， android 使用 SVG 更新：启用VectorDrawable的步骤在app模块下的bu...
Android SVG支持
VectorDrawable 与 SVG Android 5.0（Lollipop, API 21）后，新增了
Android中使用SVG——VectorDrawable
一、为什么要用SVG 首先了解什么是SVG？全称为可缩放矢量图形（Scalable Vector Graphics...
Eclipse中 VectorDrawable 动态改path颜
将SVG转为vectordrawable 常见的vectordrawable形式如下： AndroidStudio...
SVG图片在移动端的应用解决方案
近几年来SVG使用得越来越多，就连Android的官方库也加入VectorDrawable的支持。这个类就是用来支...