android-svg使用調查

什么是svg

SVG是指可伸縮矢量圖形 (Scalable Vector Graphics),它不同于傳統的位圖,不是通過存儲圖像中每一點的像素值來保存與使用圖形,而是通過 XML 文件來定義一個圖形,通過一些特定的語法和規則來繪制出我們所需的圖像

svg的優點很多,簡單講因為存儲的是結構信息而非像素信息,體積小,不失真,不過不太適合層次復雜細節繁多的圖片,畢竟它存儲的相當于是存儲了繪制路徑的關鍵節點和畫筆屬性。svg也是有很多語法,可以實現很多效果和動畫,關于svg的知識可以參考Android SVG技術入門,文章里面也介紹了一些android中解析svg的一些原理,簡言之相當于通過對svg繪制指令的解析,將svg指令對應到Path類中的繪制方法完成繪制,比如svg中的M指令相當于android中的Path.moveTo()。

android中的svg

android中使用svg是通過VectorDrawable,官方介紹鏈接Vector drawables overview

VectorDrawable是一種定義了點,線,曲線以及它們的顏色信息集合的xml文件。主要優勢就是任意縮放不失真,由此也能減小apk包的大小,因為不必為適配多種分辨率的屏幕添加多套圖片資源。可以直接用xml定義VectorDrawable,也可以從svg文件轉換得到。Android 5.0 (API 21)是官方首次支持VectorDrawable和 AnimatedVectorDrawable的版本,不過低版本的可以使用Android support library兼容。

可以說VectorDrawable是Android中的一種矢量方案,是svg的一種實現,它支持大部分的svg語法。

怎么用?

如果你沒有資源,android studio中提供了一選擇,下面會提到,還有一些網站可以得到免費svg資源:

SVG圖片下載地址
選擇要下載的圖片,下載時選擇svg下載

獲取到的svg文件后,要轉為android中的xml以VectorDrawable的形式使用。可以用工具:
svg2android
能將一個svg圖片轉換成Android中的vector文本。
Android Studio中提供了方便的工具轉換,(如果沒有請升級至最新版,記得升級gradle插件)

android中的使用步驟:

  1. res-drawable-new-Vector Asset


    vetcor-asset

2.可以選擇android studio自帶的一些vector資源


android-svg

3.如果有自己的svg資源,可以選擇本地上傳


local-svg

左下角的Enable auto mirroring for RTL layout指是否支持從右向左布局,使用于從右向左閱讀的語言體系。

4.添加頭像svg后生成的文件:ic_admin.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:autoMirrored="true"
        android:viewportHeight="40"
        android:viewportWidth="40">
    <path android:fillColor="#000000"
          android:fillType="evenOdd"
          android:pathData="M2,20C2,10.0589 10.0589,2 20,2C29.9411,2 38,10.0589
          38,20C38,29.9411 29.9411,38 20,38C10.0589,38 2,29.9411 2,20ZM10.1784,
          31.3377C12.4742,30.0084 14.6212,29.3867 14.6212,29.3867C14.6212,29.3867
           16.5914,28.8271 16.5914,27.1482C16.5914,26.5559 16.3099,26.0289 16.0285,
           25.7491C15.8585,25.5801 14.765,23.9827 13.9252,22.0659C12.6614,21.5192
           12.3857,20.5971 12.3857,19.6526C12.3857,19.0841 12.6926,18.8678 12.9647,
           18.7878C12.9437,18.5862 12.9325,18.3879 12.9325,18.1939C12.9325,15.1159
           12.9774,15.1017 13.0728,13.9633C13.2133,12.629 13.1573,11.092 15.0223,
           9.7958C16.8872,8.4997 18.0211,8.5659 19.4438,8.6501C20.376,8.7104 22.6178,
           8.6501 23.8114,7.9948C25.005,7.3395 26.7902,11.1296 26.9717,13.5465C27.1532,
           15.9634 27.0624,16.5744 26.9717,17.793C26.9717,17.793 26.9545,18.167 26.8726,
           18.757C27.1542,18.8268 27.4942,19.0349 27.4942,19.6334C27.4942,20.5551 27.2317,
           21.4554 26.0447,22.0064C25.7745,22.691 25.4266,23.3748 24.9791,23.9846C23.1572,
           26.4668 23.5532,26.0343 23.4128,26.9265C23.5532,27.6696 22.5923,28.5217 27.3369,
           29.9336C28.3379,30.2315 29.2776,30.6097 30.1373,31.0561C33.1263,28.3141 35,24.3759
           35,20C35,11.7157 28.2843,5 20,5C11.7157,5 5,11.7157 5,20C5,24.528 7.0063,28.5874
            10.1784,31.3377Z"
          android:strokeColor="#00000000"
          android:strokeWidth="1"/>
</vector>
  • vector是VectorDrawable對應的根標簽
  • android:width與android:height對應矢量圖的實際大小(矢量圖是可以無限大, 但通常情況下一個圖片都應該有一個原始大小, 假如你將此VectorDrawable作為一個ImageView的src, ImageView的大小都設置為wrap_content, 則ImageView對應的實際大小就是這里設置的大小),由于矢量圖首次加載會消耗更多的CPU資源,建議設置合適的大小以節省繪制時間。
  • android:viewportWidth與android:viewportHeight是指當前Drawable對應的虛擬Canvas的大小, 之所以說是虛擬的是因為實際上并不存在這樣一個Canvas, 又之所以需要這個值是因為在 <path/>標簽中的路徑數據要基于具體的坐標系來繪制.
  • <path/>標簽對應路徑信息, 這里的path與我們自定義繪制圖形時用的Path原理一樣, 就是記錄一些繪圖操作, 具體對應其中的pathData,PathData中對應的路徑描述符號不需要我們去記, 通常情況下由繪圖軟件生成svg圖片再從svg文件中提取。
  • android:fillType對應Path的fillType方法,顏色設置也是,比如android:fillColor是畫筆顏色。可以改變這些屬性然后在旁邊的preview欄里看到實時預覽。

如果不使用android的導入功能,也可以使用其他方式獲取到相應代碼直接定義在xml文件中。

5.使用這個xml,與使用png資源一樣,直接通過drawable引用就可以了。

 <ImageView
        android:id="@+id/iv_user"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:src="@drawable/ic_admin"/>

也可以作為drawable檢索

Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.iv_user);

有那些坑?

  • 小于Api21的低版本適配有兩種方式
  1. android studio2.2+以及gradle插件1.5.0+下,會自動給低版本生成對應的所有分辨率的png資源,所以這樣會導致apk包比較大,但是可以通過下面的設置要生成的分辨率信息。
defaultConfig { 
      vectorDrawables.generatedDensities = [edDensities 'hdpi','xxhdpi']
}

2.使用Support Library 23.2+(不會自動生成位圖),Android Support Library 23.2其中主要增加了對VectorDrawable與AnimateVectorDrawable的支持.VectorDrawable可以被兼容到Android2.1, AnimateVectorDrawable可以被兼容到Android3.0

android {
  defaultConfig {
    vectorDrawables.useSupportLibrary = true
  }
}

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

此時,使用的方式會發生變化,比如需要用app:srcCompat來代替android:src。

    <ImageView
        android:id="@+id/iv_user"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:srcCompat="@drawable/ic_admin"/>
  1. 一個處理了android4.0+上svg使用兼容性問題的開源庫:SVG-Android

主要場景

  1. 圖標各種狀態:修改繪制的顏色
  2. 圖標+矩形背景,背景各種狀態:修改背景繪制的顏色
  3. svg可以實現很多酷炫的動畫。可以通過定義AnimateVectorDrawable完成動畫的定義,也可以使用三方庫:PathAnimView

參考文獻

Android 中使用 SVG

Vector Asset Studio的使用

SVG 在Android中的應用

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,763評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,238評論 3 428
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,823評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,604評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,339評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,713評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,712評論 3 445
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,893評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,448評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,201評論 3 357
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,397評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,944評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,631評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,033評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,321評論 1 293
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,128評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,347評論 2 377

推薦閱讀更多精彩內容