Android教程網 >> Android技術 >> 關於Android編程 >> Android5.0新特性——SVG（可縮放矢量圖形）

Android5.0新特性——SVG（可縮放矢量圖形）

編輯：關於Android編程

什麼是SVG（Scalable Vector Graphics）

SVG一種用於描述圖像的標記語言。類似HTML。

SVG嚴格遵從XML語法，並用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。

標准制定開發歷史

2001年9月4日，發布SVG 1.0。 2003年1月4日，發布SVG 1.1。 2003年1月14日，推出SVG移動子版本：SVG Tiny和SVG Basic。 2008年12月22日，發布SVG Tiny 1.2。 2011年8月16日，發布SVG 1.1（第2版），成為W3C目前推薦的標准。 W3C目前仍正在研究制定SVG2，目前最新的草稿發布見此。

示例

下面是一個紅色三角形的svg示例：

效果圖如下：
svg

說明：

svg矢量圖的根節點就是svg，包含圖片寬高和視口大小等信息。 rect表示一個矩形。 path（點擊查看path元素介紹）表示一條路徑，矢量圖的形狀就是通過path元素定義的，常見屬性有：
M (x y)+：在給定的(x,y)坐標開始path； L (x y)+：繪制一條直線從當前點到給定的(x,y)坐標； z：閉合當前path。 C (x1 y1 x2 y2 x y)+：貝塞爾曲線；

點擊查看svg元素索引列表

用SVG有什麼好處

svg是矢量圖，縮放不會失真，位圖縮放可能產生失真問題。屏幕適配方便，一般我們為了適配不同分辨率可能會在ldpi、mdpi、hdpi、xhdpi等目錄放對應分辨率的jpg/png圖片，現在只需要一個xml文件，而且xml文件比jpg/png體積小，有利於縮減apk體積。

SVG相關工具

在線SVG編輯器：Method Draw，svgedit 離線SVG編輯器：inkscape，Adobe Illustrator svg轉換Android VectorDrawable工具：
svg2android，Gtihub SVG2VectorDrawable

在Android中使用SVG

創建矢量圖片（VectorDrawable）

在Android中，負責矢量圖加載，解析，繪制相關工作的類就是VectorDrawable，通過加載一個基於XML的VectorDrawable文件，在draw方法中把矢量圖繪制到Canvas。在Android中矢量圖一般用於圖標和按鈕。

1.這裡使用Method Draw先編輯一個svg格式的矢量圖，點擊打開Method Draw，編輯完成後導出svg格式文件。

heart.svg

2.把svg文件轉換為Android的VectorDrawable文件。

手動轉換
1. 在drawable目錄下新建一個根節點為的xml文件。
2. 把svg文件中的path數據拷貝到，比如svg中path的d對應中path的android:pathData，stroke對應android:strokeColor，stroke-width對應android:strokeWidth等。

使用工具轉換
使用svg2android把svg文件轉換為Android Drawable文件，把導出文件放到drawable目錄下。

res/drawable/vector_drawable_heart.xml



    android:width="580dp"
    android:height="400dp"
    
    android:viewportWidth="580"
    android:viewportHeight="400">

注意：轉換工具默認把畫布的size作為矢量圖的實際寬高，比如一個icon的svg設計時畫布的寬高為480*480，但實際需要的寬高為48*48，所以記得修改中的android:width和android:height為實際需要的寬高，不然就比較耗內存。

3.使用矢量圖示例

這裡寫圖片描述

目前這種做法只支持Android5.0+，如果想在Android5.0以下正常運行還要做如下兼容處理。

VectorDrawable向下兼容

1.在app的build.gradle文件中添加如下配置，啟用support庫。

android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}

dependencies {
    compile 'com.android.support:appcompat-v7:23.3.0'
}

2.ImageView改為使用support庫的AppCompatImageView，使用app:srcCompat替換android:src。

為矢量圖片添加動畫（AnimatedVectorDrawable）

AnimatedVectorDrawable可以讓VectorDrawable加上動畫效果。

VectorDrawable實現動畫效果一般需要3個文件：

VectorDrawable文件，根節點為的xml文件，矢量圖。 AnimatedVectorDrawable文件，根節點為的xml文件，矢量圖動畫定義文件。一個或多個屬性動畫文件。

1.VectorDrawable文件如下，通過android:name屬性為group和path定義了一個唯一的名字，在AnimatedVectorDrawable文件中就是通過該名字實現group/path和相關動畫的關聯。

效果圖如下：

VectorDrawable

2.屬性動畫文件的編寫，下面是cpu頂部排線的動畫文件，還有類似的底部和左右排線的動畫文件，共4個動畫文件。

3.AnimatedVectorDrawable文件如下，根節點，通過android:drawable屬性設置使用的矢量圖文件。元素中的android:name對應VectorDrawable文件中group/path的名稱，android:animation設置group/path使用的動畫。

4.最後，在AppCompatImageView中使用AnimatedVectorDrawable

在xml中使用AnimatedVectorDrawable：

在代碼中使用AnimatedVectorDrawable：

使用AnimatedVectorDrawableCompat.create方法加載AnimatedVectorDrawable文件得到AnimatedVectorDrawable對象。

AnimatedVectorDrawableCompat是support庫中的類，作用是使AnimatedVectorDrawable兼容Android5.0以下系統。

    image1 = (AppCompatImageView) findViewById(R.id.image1);
    AnimatedVectorDrawableCompat animatedVectorDrawable = AnimatedVectorDrawableCompat.create(this, R.drawable.animated_cpu);
    image1.setImageDrawable(animatedVectorDrawable);
    addClickAnimationListener(image1);

點擊停止/播放動畫

public void addClickAnimationListener(final AppCompatImageView image) {
        image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Drawable animation = image.getDrawable();
                if (animation instanceof Animatable) {
                    Animatable anim = (Animatable) animation;
                    if (anim.isRunning()) {
                        // 停止動畫
                        anim.stop();
                    } else {
                        // 播放動畫
                        anim.start();
                    }
                }
            }
        });
    }

動畫效果如下：

AnimatedVectorDrawable

注意：目前AnimatedVectorDrawableCompat在Android5.0以下不支持pathData類型屬性動畫。如果需要用到pathData類型屬性動畫可以通過以下方法做兼容處理。

使用api標識符適配不同版本的系統，在drawable和drawable-v21目錄下定義不同的實現。代碼中作兼容處理

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
    // 在android5.0+下執行下面代碼
}

使用vector-compat，VectorDrawable和AnimatedVectorDrawable的一個兼容庫。

透明度，旋轉，縮放屬性動畫沒有效果？

這裡給VectorDrawable的path添加一個透明度動畫，發現沒有效果，日志打印如下：

W/PropertyValuesHolder: Method setAlpha() with type int not found on target class class android.support.graphics.drawable.VectorDrawableCompat$VGroup
W/PropertyValuesHolder: Method setRotation() with type float not found on target class class android.support.graphics.drawable.VectorDrawableCompat$VFullPath

日志中可以看出沒有找到相關的set方法，屬性動畫的實現原理其實是通過java中的反射找到相關set方法去動態修改屬性值實現的。

VectorDrawable（這裡使用的是VectorDrawableCompat，兼容Android5.0以下版本）的group對應的類是VectorDrawableCompat$VGroup，path對應的類是VectorDrawableCompat$VFullPath。

通過查看VectorDrawableCompat$VFullPath代碼發現，VFullPath中透明度屬性的名稱為fillAlpha，於是把android:propertyName值由alpha改為fillAlpha就可以了。

示例代碼工程地址：https://coding.net/u/linchaolong/p/AndroidSvgExample/git