Android Studio 自適應啟動圖示

APP 圖片需要符合系統規定,其實 Android Studio 內有 Image Asset 工具可以使用,統整裝置內圖片,並自動放置於適當的資料夾,讓裝置自適應去載入圖片。

Vector Asset 也同樣可以管理圖片,包含 SVG 向量圖、各種 icon 動態效果,但唯獨 APP 啟動圖示無法使用,只能透過 Image Asset 來管理。不管是 Image Asset 或 Vector Asset 管理圖片,皆可成為裝置自適應使用的 icon 圖片。

【圖片規範】

除了官方啟動圖示之外,目前好像很少看到其他產品使用動態啟動圖示, 更不用說還要符合官方規範 Material Design Guidelines;製作一種尺寸的圖片為自適應啟動圖示優點,不需額外再匯出其他尺寸的圖片。

與一般啟動圖示不同的原理,在於它使用遮罩切割圖形的顯示方式,可以透過 Image Asset 匯入前景+背景的方式,設定自適應啟動圖示,效果會依不同裝置而有所差異。

  • 製作圖片時,需注意前/背景圖片的規範尺寸,與動態效果時的圖片誤差。官方也有提供相關規範參考,色彩與陰影規範也同樣適用於啟動圖示。
規範參考線
  • 如上圖,自適應啟動圖示的背景大小為黃線框 108dp x 108dp,並於藍圈 72dp x 72dp 範圍內放置圖形,確保動態效果正常,圖形若超出藍圈外可能會被遮罩裁切,以下使用玩運彩的 APP 啟動圖示進行測試。
  • 如上圖,將原本的圖形(上方),拆分為前景與背景使用圖片(下方),為背景的藍色圖片必須不透明,前景則可;讓即時比分動態啟動圖示有延伸的視覺感,可直接把圖形範圍拓展至黃線框處。
  • 圖片使用 Illustrator 或 Sketch 繪製皆可,最後匯出四倍大尺寸即可,為 Android 使用的 xxxhdpi.png。

【匯入引用】

Image Asset
  • 如上圖,於 File > New > Image Asset 開始匯入:
    1. 選擇 Icon Type 為 Launcher Icons (Adaptive and Legacy) 自適應版型。
    2. 匯入 Foregrouand Layer 前景圖片與 Background Layer 背景圖片。
    3. 右側可預覽樣式,Resize 可微調前景圖片的顯示尺寸。
其他 .xml 頁面內可載入使用
  • 在一般頁面內也可以使用 <ImageView> 載入,如上圖,可見數個由 Image Asset 自動產生資料夾,檔名前綴皆相同(範例為ic_livescore),於自適應啟動圖示所使用的所有圖片資源。
ic_livescore.xml
  • 如上圖,由 ic_livescore/ic_livescore.xml 檔內引用前/背景圖片。
更換 APP 啟動圖示
  • 如上圖,於 AndroidManifest.xml 文件內,變更 <application> 內屬性icon、roundIcon 引用的對象,改為剛剛匯出的範例目錄 ic_livescore。
  • 修改完成後即可測試裝置的動態啟動圖示效果囉。

【動態效果】

Android Studio 模擬測試
adapticon

使用 adapticon 快速線上預覽即時比分討論區動態啟動圖示,直接上傳前/背景圖片即可顯示,畫面右側選項提供於裝置操作時常見的效果。

了解前/背景圖片的應用原理,圖形上或許可做些變化,如討論區置中樣式、即時比分延伸樣式。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *