阅读 151

Android中使用SVG——VectorDrawable

这是我参与8月更文挑战的第24天,活动详情查看:8月更文挑战

一、为什么要用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:www.iconfont.cn/

sfont:www.sfont.cn/

二、VectorDrawable

1、继承关系

如下图所示,VectorDrawable的继承自Drawable,且在API21(Android5.0)之后引入

image.png

2、Android studio中创建VectorDrawable

1)创建Vector Asset

image.png

2)配置Vector Asset 属性值

image.png

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

Name:名称

Size:图形的宽高设置,勾选Override可以自行设置

Color:图形颜色(填充颜色)

Opacity:不透明度

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

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

image.png

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>
复制代码

标签:

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既全不透明

标签

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设置颜色渐变

话不多说,先上官方文档

image.png

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

image.png

上图可以看出官方在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>
复制代码

image.png

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>
复制代码

image.png

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>
复制代码

image.png

文章分类
Android
文章标签