iOS APP + SVG

svg 確實可運用於網頁,一般讀取、匯入即可顯示,效果可透過 svg <path> 路徑變化,或 CSS animation 動畫屬性控制;那 svg 也能在 APP 顯示嗎?使用 Xcode 測試,往“能否讀取svg圖檔”方向,嘗試研究看看。另外也測試由 adobe AE 所匯出的 json 檔是否也用於 iOS APP。

【 SVG 】

首先,了解一下 Xcode 介面環境與新專案基礎文件,先學習如何讀取外部檔案,再依參考範例編寫語法讀取 svg 圖檔,本篇測試圖檔皆由官方下載使用。

新專案基礎文件

建立新專案後,第一層級的 new_project 為專案總檔,測試內容會在 ViewController.swift 進行編寫,上圖文件為開啟 APP 後載入的第一個頁面(也只有一頁…)。

simulator路徑

預覽測試則使用內建 simulator,點擊左上角的 run 按鈕,自動開啟 iOS 模擬器,右側選單可選擇其他 iOS 版本。需要注意的是,若編碼、文件有錯誤,會無法順利開啟模擬器。

讀取外部檔案

在這之前, Xcode 怎麼讀取外部檔案,並顯示檔案內容,參考了 gitbookstackoverflow 上的案例教學,了解讀取 txt 純文字檔的編碼邏輯,於 viewDidLoad 內開始編寫:

讀取外部檔案編碼範例
  • 隨意新增一個純文字檔,拖曳至專案資料夾內(上圖紅框),需勾選 “copy if need” 選項另外複製,若未勾選則為路徑引用方式載入。
  • 建立一個 UILabel ,相當於 html 的文字標籤。
  • 編碼讀取檔案/類型。
  • 最後添加 self.view.addSubview() 將 UILabel 於畫面中顯示。
成功顯示文字檔內容

讀取svg

參考案例教學,有兩種方式可讀取 svg,SVGKit 與 UIWebView ,這裡使用 UIWebView 來實驗效果,編寫邏輯與讀取外部檔案差不多,於 viewDidLoad 內開始編寫:

讀取svg檔編碼範例
  • 使用 svg 圖檔實驗,拖曳至專案資料夾內(上圖紅框),“android.svg” 與 “playsport.svg”,後者檔案為動態圖,svg+css篇的製作範例。
  • 建立 UIWebView 。
  • 編碼讀取,將專案內的 svg 檔路徑轉換成 URL。
  • 添加 self.view.addSubview() 將 UIWebView 於畫面中顯示。
成功顯示svg圖檔
  • 專案資料夾內 Assets.xcassets 只能放置純圖檔,如 jpg、png 等等,若放置 svg 圖檔會出現錯誤訊息,故將 svg 圖檔移至一般路徑。
  • “playsport.svg” 顯示為剪影,原因是範例中使用 css 樣式控制顏色,這裡測試直接在 svg 圖檔編碼做修改,<path> 路徑添加 fill="#ffe200″ ,為嘴角黃色亮點。

【 JSON 】

Lottie 是一套函式庫(Library) ,可將動畫應用至 APP,adobe AE 能透過插件,將動畫效果匯出成 json 檔,節省撰寫編碼的時間,對製作圖示效果方便許多,為讀取 json 檔,Xcode 專案內需安裝 swiftPackageManager (SPM,官方軟體包管理器),參考教學文章內程序執行:

  • 開啟終端機進入專案目錄開始安裝。
$ cd new_project (此為個人專案資料夾)
$ mkdir Library
$ cd Library
$ swift package init --type library

使用 Lottie官方 所提供的 json 檔進行實驗,需再安裝 Lottie 相關插件:

  • 挑選任一個檔案,選擇 apple 圖示,或連結至官方提供的 GitHub教學
  • 承上,搜尋關鍵字 “Swift Package Manager” ,把套件編碼添加至 Package.swift (如下圖),檔案位於剛剛安裝的 Library 資料夾內。
套件編碼添加處
  • 回到終端機下載插件。
$ swift package fetch
  • 終端機產生專案設定檔。
$ swift package generate-xcodeproj
  • 執行完成後 Library 資料夾內會產生設定檔 Library.xcodeproj ,直接將檔案拖曳至工作視窗中的專案總檔下即可。
  • 最後,專案總檔內的 Linked Frameworks and Libraries 需新增 Library.framework (如下圖),這樣就大功告成啦~
Library.framework新增步驟
  • 執行指令時若發生錯誤,可能是 Command Line Tools 選項為空白,可至選單 Xcode > Preferences > Locations > Command Line Tools 選擇版本號,再重新安裝即可。

讀取json

官方提供的 GitHub教學內也有案例示範,測試讀取幾組不同 json 檔,發現部分較複雜的動態效果未能完全展示,推測可能是套件本身的問題,不過確實可在 iosAPP 內執行 json 動態效果,於 viewDidLoad 內開始編寫:

讀取json檔編碼範例(參考官方)
  • 使用 json 圖檔實驗,拖曳至專案資料夾內(上圖紅框),“like.json” 與 “idea.json”。
  • UIViewController 前加入函式庫 import Lottie。
  • UIViewController 內宣告 var animationView = AnimationView(),與 viewDidLoad 層級相同。
  • 編碼讀取 json 檔。
  • 添加 viewDidAppear 編碼執行動畫,與 viewDidLoad 層級相同。
成功顯示json動態,附上先前文章實測web版效果

One thought to “iOS APP + SVG”

發表迴響

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