Android APP + SVG

自上一篇文章 iOS APP + SVG 測試,SVG效果載入 iOS 算成功一半,還需要測試更多載入狀況,接著繼續研究 Android APP,使用 Android Studio 實測,方向同樣為讀取 SVG、JSON 圖檔為主,經歷 iOS 研究過程,Android 應該也是可行的。

【 Android Studio 】

大致先了解開發環境與介面,主程式安裝後所佔空間不大,整體操作下來還算簡易,有方便圖形介面、框架編寫所見即所得的設計視窗。

新專案基礎文件,主要使用 xml(介面) 與 java(程式) 編輯文件
  • activity_main.xml 主要編寫介面框架,排版方式與 HTML 極為相似。
  • MainActivity.kt(java) 為程式邏輯文件,資料操作、讀寫判斷等功能都在此編寫。
開發環境主畫面,.xml 的 Design 圖形編輯畫面
  • Palette(上圖中間)區塊,提供各種佈局基礎元件,可直接拖曳至右側預覽畫面內,也可直接在畫面內編輯,無論是對齊、綁定元件、細部參數調整,都有設定介面可使用。
開發環境主畫面,.xml 的 Text 語法撰寫畫面
  • 於 Design 編輯畫面建立的元件,Text 編輯畫面會自動產生相關語法,可初步了解排版使用基礎語法,右側預覽畫面則提供詳細排版數據。
  • 進一步研究框架與樣式佈局撰寫,個人覺得與網頁 Html、CSS 樣式差不多,只是 APP 的語法名稱較長(但不得不說 Android Studio 的關鍵字提示非常強大)。

設定模擬器,讓編寫的語法、載入效果可實際預覽。

建立模擬器畫面
  • 由開發環境右上方設定,步驟為 No Device > OpenAVD(管理模擬器) > 選擇模擬器。
  • 本次模擬測試使用 Android 9,若要於其他版本中模擬,則作業系統的映像檔要逐個安裝;除了模擬器,Android Studio 能免費於裝置中測試。
  • 完成後,於開發環境右上方 Device ,選擇剛剛所新建的模擬器,執行播放即可;每次預覽編寫結果,都需重新執行播放 Run。

【 SVG 】

Android APP 有開發獨立的 SVG 機制,符合規定 SVG 圖檔就可以套用原生標籤,如 material.io 下載的 SVG 圖檔可正常顯示,ImageView 可對 SVG 圖檔做更多控制,如大小、顏色。

同樣使用 iOS APP + SVG 測試圖檔,自行匯出的 SVG(path路徑變形) 圖檔,與 json 檔不符合 Android APP SVG 機制,則只能使用 WebView 顯示,樣式不易掌控、可能影響效能是其缺點。

讀取 SVG

使用 ImageView 讀取 SVG 圖檔,只需建立新圖檔,再給予 src 屬性即可。

直接指定圖檔位置
  • 建立 drawable 繪圖資料夾,右鍵點擊開發環境右側的 res 資料夾,選擇 Vector asset > path 要匯入的圖檔,系統會自動建立新圖檔。
  • < ImageView > 標籤內直接讀取。
android:src="@drawable/ic_android"
  • shapeshifter.design 線上 SVG 製作,匯出圖檔可直接使用,教學範例動態圖檔使用時間軸、設定介面方式完成。由官方提供的線上製作軟體未有雲端儲存功能,故無法修改先前所匯出的圖檔

使用 WebView 讀取 SVG 圖檔,需使用 MainActivity.kt 程式文件引用檔案。

將 activity_main.xml 裡面有 id 的元件引入
  • 於專案資料夾 (專案名稱) / app / src / main 內,手動建立 assets 資料夾,將圖檔置入。
  • MainActivity.kt 文件 onCreate 內添加路徑。
webViewSvg.loadUrl("file:///android_asset/playsport.svg")
  • 若名稱顯示紅字提示,代表尚未引用至 activity_main.xml,引用後編碼內會顯示 import kotlinx.android.synthetic.main.activity_main.*。
  • < WebView > 標籤新增 id。
android:id="@+id/webViewSvg"
成功顯示 SVG 圖檔

【AE動態效果 】

使用 adobe after effects 製作複雜動態效果,可使用 Lottie 套件將檔案匯出為 json 檔,給予APP讀取,Android Studio 安裝方式較簡單,只需貼上所需的設定碼,讓系統自動更新即可。

若需要修改動態效果,則需至 AE 內編輯原始檔後重新匯出即可。

mavenCentral() 為 lottie 遠端 library
  • 開啟 build.gradle(project…),引入遠端 Lottie 套件,可看到編碼中專案建立時產生的 google()、jcenter(),為基本物件使用,於下方添加 mavenCentral()。
指定遠端的 com.airbnb.android:lottie 套件
  • 開啟 build.gradle(Module…),於編碼 dependencies 內貼上 implementation ‘com.airbnb.android:lottie:3.2.0’,畫面會自動顯示 “Sync Now”,確認後將自動更新。
  • 例如要更新 minSdkVersion 版本,只需修改版本後 “Sync Now” 即可。

讀取 JSON

添加 Lottie 定義的標籤/屬性
  • 於專案資料夾 (專案名稱) / app / src / main / res 內,手動建立 raw 資料夾,將圖檔置入。
  • 將原本的 < ImageView > 標籤,替換成 Lottie 定義的 View 標籤,並添加路徑屬性與約束條件。
<com.airbnb.lottie.LottieAnimationView
    app:lottie_rawRes="@raw/idea"
    app:lottie_loop="true"
    app:lottie_autoPlay="true"
/>
成功顯示 JSON 圖檔

發表迴響

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