首頁
博文
博文內容

iOS SwiftUI Bottom Card教學

關鍵字 :iOSSwiftUIXcode
一. 前言：

先前在大大通上發表過「iOS SwiftUI教學與實作 - 員工列表清單」的教學文章，裡面已經介紹過iOS SwiftUI的基本介紹，而本次的主題也會是以員工列表為主，但是會以「iOS SwiftUI Bottom Card」呈現。

 

二. 專案實作與講解：


由圖片所示，在列表中點擊員工資料時，會在下方彈出Bottom Card，顯示員工個人資料（圖片、名稱、職位、電話及郵箱），而往上滑動時，會顯示員工的職務名稱。

首先開啟一個全新的專案，命名為「EmployeeListApp2」，並且新增一個新的Swift檔案命名為「Employee」，這項檔案使用來建立我們的Model，也就是員工的基本資料。其中會使用到的資料包含“id、userId、jobTitleName、firstName、preferredFullName、phoneNumber、emailAddress、image及jobDetail，設定完成後再建立初始化。



接著將五項員工資料輸入進去：



輸入完成後，在Assets.xcassets內新增專案的圖片素材：



將圖片素材新增後，接著點擊「ContentView」檔案，進行首頁的設定：

（圖一）


（圖二）



首先在ContentView內，宣告兩個@State property來設計UI，一個命名為「showBottomSheetDetailView」，主要使用於判斷Bottom Card為開啟或關閉，另一個命名為「selectedEmployee」，主要使用於觸發列表上所選取到的員工。

接著介紹body內會使用到的功能：

  1. ZStack: 與其他stack相同，可以堆疊內部排列的元件。
  2. NavigationView: 點擊內部List（列表視圖）上的元件，可以透過NavigationView移動至下個介面。「.offset」為設定當showBottomSheetDetailView為開啟時，原介面的y座標位移量為-100；當showBottomSheetDetailView為關閉時，y座標位移量為0。觸發時的「.animation」則設定為「.easeOut」且期間為3秒。
  3. List（列表視圖）：內部透過ForEach的方式顯示員工資料，透過ImageRow將每行資料呈現於List上（圖三），而ImageRow設定的方式請見（圖二），透過在HStack內設定員工圖片、圖片大小及員工全名。回到（圖一）第21行程式碼，「.onTapGesture」為點擊手勢的設定方式，當點擊List上的員工時，將showBottomSheetDetailView設定為true(此時表示Bottom Card已開啟)，而selectedEmployee設定為選取到的員工。

 

接著看到（圖一）第32行程式碼，這邊主要判斷showBottomSheetDetailView的狀態，當showBottomSheetDetailView為true時（表示Bottom Card被觸發），BackGroundView的顏色設定為黑色（設定方式見圖二），且「.opacity（不透明度）」設定為0.8（見圖四紅框處），再點擊一次則會將showBottomSheetDetailView設定為false（表示Bottom Card會消失）。而selectedEmployee則會將資料傳送至下一個名為「BottomSheetDetailView」的介面，即會將員工資料顯示於Bottom Card上（見圖四綠框處）。

 

接下來新增一個名叫「BottomSheetDetailView」的檔案，此檔案主要建構Bottom Card中的內容：

(圖五)

(圖六)

(圖七)

(圖八)

(圖九)






首先我們看到（圖七）的Titile Bar，主要是建立（圖十）紅框處的標題文字「Employee Personal Information」。接著看到（圖七）的HeaderView，主要是建立（圖十）綠框處。

 

在HeaderView的body內有幾項重點：

  1. 建立Image：綠框處的圖片為員工圖片，透過Image(employee.image)將圖片資料帶入，並調整height為200以及其他參數。
  2. （圖八）為建立綠框處的員工First Name及職務名稱。

 

接著看到（圖九），建立一個DetaillnfoView顯示員工的個人資訊，如（圖十一）所看到，上方包含員工電話、郵箱及工作性質。其中DetaillnfoView內判斷System Icon的名稱，這邊的圖示會以System Icon為主。

 

建立好Bottom Card所需的基本元件後，接著要設定Bottom Card開啟後的幅度，及基本手勢操作功能（圖五）（圖六）：

首先在（圖五）的上方宣告幾項參數：

  1. @Binding var isOpen: Bool? -> 判斷Bottom Card是否展開
  2. let maxHeight: CGFloat -> Bottom Card的最大高度
  3. let minHeight: CGFloat -> Bottom Card的最小高度
  4. let content: Content -> 設置BottomSheetDetailView的內容
  5. let employee: Employee -> 員工資料
  6. @GestureState private var translation: CGFFloat -> Bottom Card位移資料
  7. private var offset: CGFloat { isOpen ? 0 : maxHeight - minHeight } -> 判斷當isOpen為true時，offset位移量為0；當isOpen為false時，位移量為maxHeight - minHeight

 

將1到5項的參數設定初始化後，接著設定body的部分（圖六）：

  1. GeometryReader: 取得原件在整個螢幕的座標尺寸。
  2. TitleBar()：建立（圖十）紅框處的標題文字「Employee Personal Information」。
  3. HeaderView：放入員工資料，會自動取出員工First Name及員工職稱。
  4. DetailInfoView：輸入System Icon的名稱、員工電話、員工郵件及員工工作性質。

 

設定完後，針對VStack做一些參數設定：

  1. .frame: 透過GeometryReader取得螢幕寬度及高度。
  2. .background: 將背景設定為白色。
  3. .cornerRadius: 將view設定為圓角。
  4. .offset: y座標位移量計算方式。
  5. .animation: 動畫效果。
  6. .gesture: 手勢觸發功能，透過DragGesture可以將Bottom Card向上拖曳（見成果展示）。

成果展示：




小結：

iOS SwiftUI Bottom Card的做法很多種，透過以上的方式即可完成最基本的Bottom Card效果。未來會再推出更多SwiftUI相關設計，感謝大家收看！

  

參考資料：

Building Bottom sheet in SwiftUI
iOS App程式開發實務攻略：快速精通SwiftUI

★博文內容均由個人提供，與平台無關，如有違法或侵權，請與網站管理員聯繫。

★文明上網，請理性發言。內容一周內被舉報5次，發文人進小黑屋喔~

評論