使用 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

這個網誌中的熱門文章

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

nano 文字編輯器

Android Studio 歷代版本下載點

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)