前言
在2019年6月Apple針對UI Framework發表了全新的框架，那就是“SwiftUI”。在這之前，原先UIKit的底層的程式語言為Objective-C，而SwiftUI的底層為Swift。本篇博文會介紹UIKit與SwiftUI的比較，並且實作「員工列表清單」供大家參考。
1. UIKit與SwiftUI比較
 |
| 資料來源：
https://franksios.medium.com/swiftui-淺玩-swiftui-用其建構一簡單的-app-2f2477bd49d7 |
如上表所示，在UIKit的部分，在系統需求上無限制，底層語言為Objectice-C；而在SwiftUI中，系統需求需達到iOS13+及macOS 10.15+，底層語言為Swift，在語法簡潔度大勝Objective-C，且開發的專案可以支援macOS、watchOS、tvOS等系統，非常便利。Automatic Preview為本次SwiftUI才新增的功能，開發者可以一邊編譯程式，一邊觀察結果。
2. 專案實作與講解
選擇Single View App
輸入專案名稱，並在User Interface處選擇SwiftUI
專案成功開啟後，接下來要設置員工列表清單會用到的資料，首先設置Model的部分：
新增一個Model資料夾，並且新增一個「Employee」的Swift檔案，裡面宣告id、userId、jobTitleName、firstName、lastName、preferredFullName、region、phoneNumber、emailAddress及image，以上將會對應至我們的員工資料。
接下來新增一個“Empty”檔案
將檔案名稱取名為“employee.json”，按下確認後，在檔案內編譯json格式的資料
JSON格式內的資料需要依照上方Model宣告的名稱進行編譯，本文內的資料量一共只有6項（員工基本資料），輸入員工的個別資料。
完成JSON格式內的資料後，新增一個Data的Swift檔案，用來解析JSON檔案。
宣告一個employeeData為「Employee」檔案陣列的格式，並且使用load的函式進行「employee.json」檔案解析。此時employee.json中的資料會對應到Employee檔案，陣列中一共會出現六筆資料。
將Data檔案編譯完畢後，接下來要設置本篇最主要的重點部分：View。
首先我們先在Assets.xcassets內加入我們會用到的圖片素材：
接著我們新增一個「CircleImage.swift」，這個檔案是用來裝飾圖片的外框：
首先設置一個以CircleImage為名的View架構，並宣告var imageName:String來設定圖片名稱及var size: CGFloat來定義圖片大小，接著在var body: some View {} 內宣告會用到的參數來設定白色外框，以下解釋會用到的圖片參數：
- .resizable(): 將圖片設定為可調整的狀態。
- .frame(width: CGFloat, height: CGFloat): 設定圖片大小。
- .scaledToFit(): 顯示完整的圖片。
- .clipShape(_ shape:): 設定裁切形狀。
- .overlay(_ overlay): 設定白圈覆蓋的大小。
- .shadow(radius): 設定陰影大小。
經過設定這些參數，可以出現以下畫面：
（Automatic Preview: 下方的PreviewProvider可以設定預覽模式，右邊為預覽呈現的畫面）
將圖片設定好後，接著設定首頁每一行的資料：
首先新增“EmployeeRow”的檔案，並且宣告var employee: Employee （定義Model資料夾中的Employee檔案），接著宣告var body: some View {} 來定義每一行預顯示的資料，以下解釋在body內使用到的參數：
- HStack: 使元件在此方框內呈現水平排列。最後面的.frame(height: 100)為將每一行的高度設定為100。
- CircleImage(imageName: String, size: CGFloat): 設定圖片元件，導入image的字串名，Size大小輸入80，.padding()為在圖片上下左右增加空格，作為排版使用。
- Text(String): 設定文字，導入firstName的字串名、.bold為設定粗體字、.font(.callout)及.font(.system(size: 60))為設定字型及大小。
- Spacer(): 作為排版使用，根據手機尺寸來調整可用空間。
將參數設定好後，透過PerviewProvider進行測試，可以看到右邊圖示為呈現的樣子。
將首頁每一行的資料設定好後，接著設定點擊個別資料時，會出現的Detail列表：
首先新增一個“EmployeeDetail”的檔案，一樣宣告var employee: Employee（定義Model資料夾中的Employee檔案），接著宣告var body: some View {} 來定義每一行預顯示的資料，以下解釋在body內使用到的參數：
- Divider(): 設定水平分割線，作為排版使用。可以從下方第一張圖的程式碼看到，使用Devider()包住CircleImage（圓形頭像）及Text（人名），則可以呈現出右邊UI的樣子。
- VStack(alignment: .leading) : 使元件在此方框內呈現垂直排列，並使用alignment進行位置校正。
- HStack(alignment: .leading) : 使元件在此方框內呈水平排列，並使用alignment進行位置校正。
從下圖看到，每一項資料都是以HStack去做水平封裝，像是“Job Title對應RD”，再透過VStack將所有HStack的資料做垂直堆疊。
接下來要設置首頁的列表，並且將“EmployeeRow”及“EmployeeDetail”結合：
首先創建一個“EmployeeList”檔案，再body內新增NavigationView，透過List將Data檔案內宣告的“employeeData”放入，再透過迴圈的方式執行每一項資料並顯示在“EmployeeRow”中。而NavigationLink(destination: EmployeeDetail(employee: employee))則是可以在點擊List上的資料時，進入到“EmployeeDetail”的畫面，下方畫面則為List介面最終呈現的結果。
小結
透過以上教學，相信大家對於iOS最新的SwiftUI已經有更多的了解，相較於原先的Objective-C來說確實簡易許多，未來會再推出更多SwiftUI的相關設計，感謝大家收看！
評論