Android中SVG的使用姿勢

_小馬快跑_發表於2017-12-15
AndroidSVG

SVG是什麼？

  • SVG 意為可縮放向量圖形（Scalable Vector Graphics），
  • SVG 用來定義用於網路的基於向量的圖形
  • SVG 使用 XML 格式定義圖形
  • SVG 影像在放大或改變尺寸的情況下其圖形質量不會有所損失
  • SVG 是全球資訊網聯盟的標準
  • SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

SVG的歷史和優勢

在 2003 年一月，SVG 1.1 被確立為 W3C 標準。參與定義 SVG 的組織有：太陽微系統、Adobe、蘋果公司、IBM 以及柯達。與其他影像格式相比，使用 SVG 的優勢在於：

  • SVG 可被非常多的工具讀取和修改（比如記事本）
  • SVG 與 JPEG 和 GIF 影像比起來，尺寸更小，且可壓縮性更強。
  • SVG 是可伸縮的
  • SVG 影像可在任何的解析度下被高質量地列印
  • SVG 可在影像質量不下降的情況下被放大
  • SVG 影像中的文字是可選的，同時也是可搜尋的（很適合製作地圖）
  • SVG 可以與 Java 技術一起執行
  • SVG 是開放的標準
  • SVG 檔案是純粹的 XML

Android中該如何使用SVG呢？

Android5.0之後為支援SVG提供了兩個個類：VectorDrawable和AnimatedVectorDrawable，如果想在5.0之前使用，需要加入com.android.support:appcompat-v7:23.2.0以上版本的相容包，如：

compile 'com.android.support:appcompat-v7:24.2.0'
複製程式碼

然後配置一下gadle,如果Gradle Plugin的版本在2.0或者以上，則配置：

// Gradle Plugin 2.0+  
 android {  
   defaultConfig {  
     vectorDrawables.useSupportLibrary = true  
    }  
 }
複製程式碼

如果你正在使用Gradle 1.5 ，則應該配置：

// Gradle Plugin 1.5  
 android {  
   defaultConfig {  
     generatedDensities = []  
  }  
 
  // This is handled for you by the 2.0+ Gradle Plugin  
  aaptOptions {  
    additionalParameters "--no-version-vectors"  
  }  
 }
複製程式碼

將SVG格式的圖片轉換為VectorDrawable 地址： http://inloop.github.io/svg2android/

VectorDrawable可以用一個XML檔案來定義，根元素是，定義一個XML檔案vector_drawable.xml如下：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="@string/app_name"
    android:width="200dp"
    android:height="200dp"
    android:tint="@color/colorAccent"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <group>
        <path
            android:fillAlpha="100"
            android:fillColor="#FF000000"
            android:pathData="M12,2c1.1,0 2,0.9 2,2s-0.9,2 -2,2 -2,-0.9 -2,
            -2 0.9,-2 2,-2zM21,9h-6v13h-2v-6h-2v6L9,22L9,9L3,9L3,7h18v2z"
            android:strokeLineCap="round" />
    </group>
</vector>
複製程式碼

在ImageView中引用：

  <ImageView
        android:id="@+id/iv_vector"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:contentDescription="@string/app_name"
        app:srcCompat="@drawable/vector_drawable" />
複製程式碼

或者在程式碼裡設定：

ImageView iv_vector= (ImageView) findViewById(R.id.iv_vector);
AnimatedVectorDrawableCompat animatedVectorDrawableCompat = AnimatedVectorDrawableCompat.create(this, R.drawable.vector_drawable);
iv_vector.setImageDrawable(animatedVectorDrawableCompat);
複製程式碼

效果圖：

vector.png
來看下各個屬性的含義：

引數 備註
android:name 定義VectorDrawable的名字
android:width、android:height 定義圖片的寬、高，支援所有尺寸單位，通常用dp指定
android:viewportWidth、android:viewportHeight 定義圖片被劃分的比例大小，例如上面的600.0，即把64dp平均分成500份，後面Path標籤中的座標，就全部使用的是這裡劃分後的座標系統，width和height這兩個值必須一樣，否則圖片會出現變形。
android:tint 定義圖片的顏色，預設不設定顏色，該值會覆蓋path標籤中的android:fillColor值
android:tintMode //定義圖片顏色為Porter-Duff blending 模式，預設值為 src_in
android:autoMirrored //當佈局方向從右到左時，該圖片是否自動被映象
android:alpha 圖片的透明度，取值範圍(0-255)，255表示全透明
包含一組path或子group，通過group可以把多個path組合到一塊形成一個圖片
android:name 定義group的名字
android:rotation 定義group順時針旋轉的角度
android:pivotX、android:pivotY （pivotX，pivotY）定義了group縮放、旋轉時的中心點
android:scaleX、android:scaleY X軸、Y軸的縮放倍數
android:translateX、android:translateY X軸、Y軸的平移倍數
定義被繪製的路徑
android:name 定義路徑名字
android:pathData 定義向量圖的路徑資訊
android:fillColor 定義填充路徑的顏色，沒有定義不填充
android:strokeColor 定義路徑邊框的顏色
android:strokeWidth 定義路徑邊框的寬度
android:strokeAlpha 定義路徑邊框顏色的透明度
android:fillAlpha 定義填充路徑顏色的透明度
android:trimPathStart、android:trimPathEnd 取值範圍都是（0,1），意思是擷取從起始部分到結束部分的部分path
android:trimPathOffset //設定路徑擷取區域，取值範圍（0,1）
android:strokeLineCap //設定路徑線帽的形狀，取值為 butt, round, square
android:strokeLineJoin 設定路徑交界處的連線方式，取值為 miter,round,bevel
android:strokeMiterLimit //設定斜角的上限
定義當前繪製的剪下路徑。注意，clip-path 只對當前的 group 和子 group 有效
android:name 定義clip-path名字
android:pathData 類似於path中的pathdata,定義路徑資訊

path標籤中的pathData中指令：

引數 備註
M M = moveto(X,Y) ：將畫筆移動到（X,Y）座標位置
L L = lineto(X,Y) ：畫直線到（X,Y）座標位置
H H = horizontal lineto(X)：畫水平線到指定的X座標位置
V V = vertical lineto(Y)：畫垂直線到指定的Y座標位置
C C = curveto(X1,Y1,X2,Y2,ENDX,ENDY)：三階貝賽爾曲線
S S = smooth curveto(X2,Y2,ENDX,ENDY)
Q Q = quadratic Belzier curve(X,Y,ENDX,ENDY)：二階貝賽爾曲線
T T = smooth quadratic Belzier curveto(ENDX,ENDY)：對映
A A = elliptical Arc(RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線
Z Z = closepath()：關閉路徑

注：上面的指令，可以大寫也可以小寫，大寫相對於螢幕座標系；小寫相對於父View座標系。

AnimatedVectorDrawable將VectorDrawable和動畫聯絡到一起，可以用三個XML檔案來表示,如下： 表示VectorDrawable的XML檔案：icon_vector.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:tint="@color/colorAccent"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:name="icon_path"
        android:fillColor="#FF000000"
        android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"
        android:trimPathEnd="1.0"
        android:trimPathStart="0.0" />
</vector>
複製程式碼

表示AnimatedVectorDrawable的XML檔案：icon_vector_anim.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!--icon_vector即為要操作的VectorDrawable資原始檔-->
    android:drawable="@drawable/icon_vector">
    <target
        <!--target的name,這裡為上面VectorDrawable檔案裡的path名字-->
        android:name="icon_path"
        <!--為目標新增的動畫-->
        android:animation="@anim/anim_icon" />

</animated-vector>
複製程式碼

用來定義動畫的XML檔案：anim_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <objectAnimator
        android:duration="2000"
        android:propertyName="trimPathStart"
        android:valueFrom="0.0"
        android:valueTo="1.0" />
    <objectAnimator
        android:duration="2000"
        android:propertyName="trimPathStart"
        android:valueFrom="1.0"
        android:valueTo="0.0" />
</set>
複製程式碼

在佈局檔案中引用：

<ImageView
        android:id="@+id/iv_anim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:contentDescription="@string/app_name"
        android:src="@drawable/icon_vector_anim" />
複製程式碼

效果圖：

vector_a.gif
完整程式碼地址：AnimatedVectorDrawable_Demo

參考： 1、Android Vector曲折的相容之路 2、android 中使用svg 3、Android Support Library 23.2有哪些新東西

相關文章