使用 SVG格式 向量圖

Android 8 Oreo / Android Studio / Android / Java / Kotlin / 教學 / 開發

HKT 線上教室 每週六日 更新影片
▶ YouTube 頻道
https://goo.gl/3f2pJi
▶ KT 線上教室 臉書粉絲團
https://goo.gl/27H9Li
▶ 贊助我們
https://goo.gl/FiKXAu
▶2018 Android 中文開放式課程 目錄
https://goo.gl/Ti8mGA

前情提要

• 若「不支援」不同密度，在低、中、高密度螢幕上的顯示情況
  UI 畫面元件複雜情況下，有可能出現，畫面跑版，出框等非預期的畫面呈現樣式。
  
• 「支援」不同密度，在低、中、高密度螢幕上的顯示情況
  各種裝置解析度下，畫面看起來一至。
  

過往我們圖片要支援不同螢幕解析度，會將一張圖片分成大約 5~6 種左右解析度倍數大小圖片，然後放到對應的圖片資源資料夾中。若我們使用 SVG 向量格式圖片，我們只要一張圖片，系統將會幫我們根據裝置解析度向量變畫圖片大小。

相關資料

36x36 (0.75x) 用於低密度
48x48（1.0x ）用於中密度 <= 基線
72x72 (1.5x) 用於高密度
96x96 (2.0x) 用於超高密度
144x144 (3.0x) 用於超超高密度
192x192 (4.0x)用於超超超高密度

px 、 dp 換算公式

px = dp *(dpi/160)
dp = (px * 160) / PPI

粗略螢幕分級

LDPI: 320px X 200px
MDPI: 480px X 320px
HDPI: 800px X 480px
XHDPI: 1280px X 720px
XXHDPI: 1600px X 960px
XXXHDPI: 2560px X 1440px

res / layout / my_layout . xml               // layout for normal screen size ("default") 
res / layout - large / my_layout . xml         // layout for large screen size 
res / layout - xlarge / my_layout . xml        // layout for extra- large screen size 
res / layout - xlarge - land / my_layout . xml   // layout for extra-large in landscape orientation 

res/ drawable - mdpi / graphic . png          // bitmap for medium-density 
res / drawable - hdpi / graphic . png          // bitmap for high-density 
res / drawable - xhdpi / graphic . png         // bitmap for extra-high-density 
res / drawable - xxhdpi / graphic . png        // bitmap for extra-extra-high-density 

res / mipmap - mdpi/ my_icon . png          // launcher icon for medium-density 
res / mipmap - hdpi / my_icon . png          // launcher icon for high-density 
res / mipmap - xhdpi / my_icon . png         // launcher icon for extra-high-density 
res / mipmap - xxhdpi / my_icon . png        // launcher icon for extra-extra-high-density 
res / mipmap - xxxhdpi / my_icon. png       // launcher icon for extra-extra-extra-high-density

---

如何使用 SVG格式 向量圖

準備一張 SVG 圖片

SVG 圖片來源範例: flat icon

新增一個向量資源檔

File -> Vetor Asset

匯入電腦本地端 SVG 圖片

設定檔名， KT 建議可以加 SVG 後綴名，方便之後辨識與維護

匯入後，就可以在資源檔看到，剛生成的SVG檔：

build.gradle 配置

android{
  ...
  defaultConfig {
    ...
    vectorDrawables.useSupportLibrary = true
   }
  ...
}
dependencies {
  ...
  compile "com.android.support:appcompat-v7:21+" // 至少 API 21 以上
  ...
}

minSdkVersion 最低支援版本，若設定低於 Android 5（API 21），系統將會生成 png 圖片檔案，來支援低版本，反之則不會額外生成 png 圖片檔案，將能更節省 APK 大小。

XML 設定 SVG 圖片方式：

 <android.support.v7.widget.AppCompatImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_fire_svg" />

Java 設定 SVG 圖片方式：

AppCompatImageView iv_Main = findViewById(R.id.iv_Main);
        iv_Main.setImageResource(R.drawable.ic_fire_svg);

---

參考資料：
Add Multi-Density Vector Graphics
https://developer.android.com/studio/write/vector-asset-studio.html#about

Supporting Multiple Screens
https://developer.android.com/guide/practices/screens_support.html