星期日, 1月 28, 2018

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

0 意見 :

張貼留言

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。