Android中使用SVG——VectorDrawable

一、為什么要用SVG

首先了解什么是SVG？全稱為可縮放矢量圖形（Scalable Vector Graphics），是一種基于可擴展標記語言（XML），用于描述二維矢量圖形的圖形格式，由W3C定義。

與Android中的Bitmap相比，它占用的空間小，而且可縮放不會因比例而失真。這對于Android繁多的機型適配來說是一個不錯的選擇。并且Android5.0之后引入了VectorDrawable對SVG進行支持。

SVG優(yōu)點：
1、SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
2、SVG 描述的是圖形的路徑，放大縮小后不存在失真問題
3、SVG 文件是純粹的 XML
4、SVG可以動態(tài)修改其顏色

缺點：
1、色域不如光柵圖像，SVG描述的是路徑，而光柵圖像描述的是每個像素點的色值
2、適用于小圖標，android中使用位圖，SVG最終使用也是轉(zhuǎn)化為位圖，如果圖像過大，SVG轉(zhuǎn)化位圖的時間也將增加。
3、適用于簡單圖形，這里的簡單圖形主要指簡單幾何圖形拼湊而成的圖形，頭像等復雜圖形就不適合了。

這里推薦兩個SVG庫網(wǎng)站：阿里的iconfont：https://www.iconfont.cn/ sfont：http://www.sfont.cn/

二、VectorDrawable

1、繼承關系

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

繼承關系圖

2、Android studio中創(chuàng)建VectorDrawable

1）創(chuàng)建Vector Asset

創(chuàng)建VectorDrawable

2）配置Vector Asset 屬性值

設置屬性

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

Name：名稱

Size：圖形的寬高設置，勾選Override可以自行設置

Color：圖形顏色（填充顏色）

Opacity：不透明度

Enable auto mirroring for RTL layout ：是否從右到左鏡像填充

選擇next -> finish完成創(chuàng)建，創(chuàng)建完畢后會在res/drawable目錄下新增一個xml文件，如下圖

創(chuàng)建成功

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 --畫布寬度（矢量圖的畫布區(qū)域，若所畫坐標超出該區(qū)域?qū)⒉粫@示）

android:viewportHeight --畫布高度（矢量圖的畫布區(qū)域，若所畫坐標超出該區(qū)域?qū)⒉粫@示）

android:tint -- 色調(diào)

android:tintMode: --參照：tintMode Google文檔

android:autoMirrored --自動鏡像填充（從右到左填充）

android:alpha --整個Drawable的不透明度 默認為1.0既全不透明

<path>標簽

android:name --路徑的名稱

android:pathData --路徑數(shù)據(jù)

android:fillColor --填充色

android:fillAlpha --填充透明度

android:strokeColor --描邊顏色

android:strokeWidth --描邊寬度

android:strokeAlpha --描邊透明度

android:trimPathStart --去除路徑開始的百分比 （取值0-1，默認為0）

android:trimPathEnd --去除路徑結(jié)尾的百分比 （取值0-1，默認為0）

android:trimPathOffset --移位修剪區(qū)域（允許顯示的區(qū)域包括起點和終點），范圍從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

第一種寫法設置開始結(jié)束顏色以及開始結(jié)束的坐標

<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>

另一種寫法，設置開始及結(jié)束的坐標，然后根據(jù)比例設置需要漸變的顏色

<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
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容