手把手教學(xué)， android 使用 SVG

簡單介紹:

SVG在Web上的應(yīng)用非常廣泛，在Android 5.X之前的Android版本上，大家可以通過一些第三方開源庫來在Android中使用SVG。而在Android 5.X之后，Android中添加了對SVG的<path>標(biāo)簽支持。從而讓開發(fā)者可以使用SVG來創(chuàng)建更加豐富的動畫效果。

1.什么是svg

  • 可伸縮矢量圖形
  • 定義用于網(wǎng)絡(luò)的基于矢量的圖形
  • 使用XML格式定義圖形
  • 萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
  • 與諸如DOM和XSL之類的W3C標(biāo)準(zhǔn)是一個整體
  • 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失

針對最后一點說一下，可能大家對SVG沒那么熟悉，那么拿一個大家熟悉的Bitmap來跟SVG作個比較。Bitmap通過在每個像素點上存儲色彩信息來表達圖像，而SVG是一個繪圖標(biāo)準(zhǔn)。與Bitmap相比，SVG最大的優(yōu)點就是放大不會是真。而且Bitmap需要為不同分辨率設(shè)計多套圖標(biāo)，而矢量圖則不需要。

2.<path>標(biāo)簽

SVG可使用<path>標(biāo)簽來創(chuàng)建，為了提高大家興趣，先看看使用效果圖

Paste_Image.png

加入我想要上圖左上角的那個箭頭，就可以用<path>來畫，再也不用網(wǎng)上找圖片了。這里留個懸念，后面再說說怎么畫。

簡單介紹一下<path>標(biāo)簽，大家粗略地看一下就好：
M = moveto(M X,Y) ：將畫筆移動到指定的坐標(biāo)位置
L = lineto(L X,Y) ：畫直線到指定的坐標(biāo)位置
H = horizontal lineto(H X)：畫水平線到指定的X坐標(biāo)位置
V = vertical lineto(V Y)：畫垂直線到指定的Y坐標(biāo)位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次貝賽曲線
S = smooth curveto(S X2,Y2,ENDX,ENDY)：三次貝賽曲線
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次貝賽曲線
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射前面路徑后的終點
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線
Z = closepath()：關(guān)閉路徑

有幾點要注意：

  • 坐標(biāo)軸為以(0,0)為中心，X軸水平向右，Y軸水平向下。
  • 所有指令大小寫均可。大寫絕對定位，參照全局坐標(biāo)系；小寫相對定位，參照父容器坐標(biāo)系
  • 指令和數(shù)據(jù)間的空格可以省略
  • 同一指令出現(xiàn)多次可以只用一個

3.Android中使用SVG

Google在Android 5.X中提供了兩個新API來幫助支持SVG:

  • VectorDrawable
  • AnimatedVectorDrawable

其中，VectorDrawable讓你可以創(chuàng)建基于XML的SVG圖形，并結(jié)合AnimatedVectorDrawable來實現(xiàn)動畫效果。

首先來講講VectorDrawable的使用：
在Android Studio中我們可以用獨特的姿勢創(chuàng)建SVG，如下圖

Paste_Image.png

點擊Vector Asset后可以看到：

Paste_Image.png

英文不好朋友我給大家翻譯一下：
Local SVG file : 可以選擇本地的SVG文件
Material Icon : 可以選擇自帶的SVG
Resource name : 當(dāng)然就是xml文件的名字
Size : 圖片大小
Override defalut size from Material Design : 勾選后替代默認的大小
Opactity : 透明度
Enable atuo mirroring for RTL layout : 用于鏡像顯示

我們可以在 Material Icon 下choose一個箭頭

Paste_Image.png

然后自動生成xml文件

<vector 
     xmlns:android="http://schemas.android.com/apk/res/android"    
     android:width="24dp"    
     android:height="24dp"    
     android:viewportHeight="24.0"    
     android:viewportWidth="24.0">    
    <path        
        android:fillColor="#FFFFFF" 
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />
</vector>

在preview里面可以看到效果

Paste_Image.png

其中包含兩組寬高屬性，分別具有不同含義。width，height表示該SVG圖形的具體大小，而viewportHeight，viewportWidth表示SVG圖形劃分比例。后面在繪制path時所使用的參數(shù)，就是根據(jù)這兩個值來進行轉(zhuǎn)換，比如上面的代碼，將24dp劃分為24份，如果在繪制圖形時使用坐標(biāo)(12,12)，則意味著該坐標(biāo)位于該SVG圖形正中間。所以，如果width，height的比例與viewportHeight，viewportWidth的比例不一致，就會使圖形發(fā)生壓縮，形變。

<path>標(biāo)簽內(nèi)我們看看：
pathData 就是繪制SVG圖形所用到的指令。
fillColor 這個屬性表明繪制出來的是一個填充的圖形，我在這個屬性里設(shè)了一個白色，如果想要繪制一個非填充的圖形，可以使用 strokeColor 。

Paste_Image.png

然后我們只需在控件里使用這個xml文件就行了

<TextView
     android:layout_width="wrap_content"
     android:layout_height="match_parent"
     android:drawableLeft="@drawable/ic_arrow_back_black_24dp" />
再來說說AnimatedVectorDrawable

AnimatedVectorDrawable 的作用是給 VectorDrawable 提供動畫效果。在XML文件中通過<animated-vector>標(biāo)簽來聲明對 AnimatedVectorDrawable 的使用，并指定其作用的<path>或<group>。

舉個例子，線性動畫:

我們先創(chuàng)建一個靜態(tài)的 VectorDrawable ,取名為 line.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
   android:width="200dp"    
   android:height="200dp"    
   android:viewportHeight="100"    
   android:viewportWidth="100">
    <group>
    <!-- 如果指定屬性為 pathData，
         則要添加一個屬性 android:strokeLineCap="pathType", 
         來告訴系統(tǒng)進行pathData變換-->
        <path
            android:name="path1"
            android:pathData="
            M 20,80
            L 50,80 80,80"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        <path
            android:name="path2"
            android:pathData="
            M 20,20
            L 50,20 80,20"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
    </group>
</vector>

在preview里面是這樣子：

Paste_Image.png

在path1和path2分別繪制了兩條直線，每條直線由三個點控制（ M 20,80 L 50,80 80,80），（ M 20,20 L 50,20 80,20），接下來創(chuàng)建兩個 objectAnimator

<objectAnimator
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:interpolator="@android:anim/bounce_interpolator"
    android:propertyName="pathData"
    android:valueFrom="M 20,80 L 50,80 80,80"
    android:valueTo="M 20,80 L 50,50 80,50"
    android:valueTyoe="pathType"/>

<objectAnimator
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:interpolator="@android:anim/bounce_interpolator"
    android:propertyName="pathData"
    android:valueFrom="M 20,2 L 50,20 80,20"
    android:valueTo="M 20,80 L 50,50 80,50"
    android:valueType="pathType"/>

分別用來控制上面 VectorDrawable 里的 <path> 的位置(注意: objectAnimator 放在 res/animator 里)

最后寫一個 animated-vector ,把 VectorDrawable 和 objectAnimator 連起來

<animated-vector 
xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/line">
    <target
        android:name="path1"
        android:animation="@animator/path1">
    </target>

    <target
        android:name="path2"
        android:animation="@animator/path2">
    </target>
</animated-vector>

那么整個動畫就寫完了，接下來在布局文件中引用 VectorDrawable

<ImageView
    android:id="@+id/iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/line"/>

然后在activity中

ImageView imageView = (ImageView) findViewById(R.id.imageView );
Drawable drawable = imageView.getDrawable();
if(drawable instanceof Animatable){
   ((Animatable) drawable).start();
}

運行代碼，可以看見兩條線慢慢從中間斷開，最后形成"X"狀

Paste_Image.png

關(guān)于動畫我就做這個小小的演示，大家先了解個大概，還有更酷炫的軌跡動畫就不詳細講了。有關(guān)動畫如果有人想看的話往后抽個空我再寫。下面教大家一些實用的技巧。

找一個帶svg的網(wǎng)頁，按F12查看代碼

Paste_Image.png

可以看到上圖<svg>對應(yīng)的是“語音”這個圖標(biāo)，右鍵選擇 作為HTML編輯

Paste_Image.png

可以看到<svg>的全部代碼

<svg width="1024" height="1024" viewBox="0 0 1024 1024">
              <g class="transform-group">
                <g transform="translate(0, 28) scale(1, -1) scale(0.03125, 0.03125)">
                  <path d="M827.246871 444.924581c-12.94994 0.588401-23.925922-9.432837-24.51637-22.382776-0.093121-2.062985-0.418532-6.353708-1.106194-12.542664-1.170662-10.54824-2.959402-22.35924-5.490038-35.106566-7.226588-36.413328-18.898419-72.794933-35.917024-106.534362-47.672766-94.508467-126.925784-150.334937-248.217245-150.71663-121.290437 0.381693-200.546525 56.208163-248.217245 150.71663-17.018605 33.739429-28.692482 70.120011-35.919071 106.534362-2.529613 12.747325-4.317329 24.558325-5.487991 35.106566-0.687662 6.188956-1.014096 10.479679-1.108241 12.542664-0.588401 12.94994-11.564383 22.971178-24.514323 22.382776-12.951987-0.588401-22.973224-11.564383-22.382776-24.51637 0.5137-11.339256 2.63092-30.394241 7.446599-54.654784 8.000208-40.316218 20.946055-80.665181 40.051181-118.537743 51.840692-102.776781 138.972145-167.127392 265.456884-175.017082l0-85.599563L291.185872-13.400962c-12.96529 0-23.473621-10.510378-23.473621-23.473621 0-12.96529 10.508331-23.473621 23.473621-23.473621l441.857477 0c12.963243 0 23.473621 10.508331 23.473621 23.473621 0 12.963243-10.510378 23.473621-23.473621 23.473621L534.272259-13.400962l0 85.454254c127.791501 7.209192 215.690434 71.734788 267.86063 175.162392 19.104103 37.872562 32.050973 78.221526 40.051181 118.537743 4.815679 24.260543 6.930853 43.315528 7.446599 54.654784C850.217025 433.360198 840.197834 444.33618 827.246871 444.924581zM510.171352 195.80785c106.568131 0 193.353706 86.506213 193.353706 193.220676L703.525058 635.128551c0 106.59269-86.567611 193.220676-193.353706 193.220676-106.570177 0-193.353706-86.508259-193.353706-193.220676l0-246.100024C316.817646 282.432767 403.385257 195.80785 510.171352 195.80785zM363.764887 635.128551c0 80.693834 65.674769 146.273435 146.407488 146.273435 80.8197 0 146.407488-65.570391 146.407488-146.273435l0-246.100024c0-80.69588-65.674769-146.273435-146.407488-146.273435-80.8197 0-146.407488 65.568345-146.407488 146.273435L363.764887 635.128551z" fill="#737383"></path>
                </g>
              </g>
            </svg>

接下來打開SVG轉(zhuǎn)換工具：http://oss.chengxingyao.cn/svg2android/index.html
把<svg>復(fù)制到上面，就能自動生成xml，可以看到下圖左下角的“語音”圖標(biāo)

Paste_Image.png

用SVG還有一個優(yōu)點就是體積相對于普通的圖片文件要小，就拿上面的“箭頭”作為例子

Paste_Image.png
Paste_Image.png

png文件2.93KB, svg 335字節(jié)，而且還能自適應(yīng)，是不是要愛上svg了。
那么今天就說到這里了，最后放出一些svg開源圖庫。

https://xituqu.com/335.html#comments
http://www.iconfont.cn/collections?spm=a313x.7781069.0.0.fEW4eG&personal=1
http://www.iconsvg.com/

更多精彩文章請掃描下方二維碼關(guān)注微信公眾號"AndroidCzh"：這里將長期為您分享原創(chuàng)文章、Android開發(fā)經(jīng)驗等！
QQ交流群： 705929135

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

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

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