先前在大大通上發表過「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內會使用到的功能:
- ZStack: 與其他stack相同,可以堆疊內部排列的元件。
- NavigationView: 點擊內部List(列表視圖)上的元件,可以透過NavigationView移動至下個介面。「.offset」為設定當showBottomSheetDetailView為開啟時,原介面的y座標位移量為-100;當showBottomSheetDetailView為關閉時,y座標位移量為0。觸發時的「.animation」則設定為「.easeOut」且期間為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內有幾項重點:
- 建立Image:綠框處的圖片為員工圖片,透過Image(employee.image)將圖片資料帶入,並調整height為200以及其他參數。
- (圖八)為建立綠框處的員工First Name及職務名稱。
接著看到(圖九),建立一個DetaillnfoView顯示員工的個人資訊,如(圖十一)所看到,上方包含員工電話、郵箱及工作性質。其中DetaillnfoView內判斷System Icon的名稱,這邊的圖示會以System Icon為主。
建立好Bottom Card所需的基本元件後,接著要設定Bottom Card開啟後的幅度,及基本手勢操作功能(圖五)(圖六):
首先在(圖五)的上方宣告幾項參數:
- @Binding var isOpen: Bool? -> 判斷Bottom Card是否展開
- let maxHeight: CGFloat -> Bottom Card的最大高度
- let minHeight: CGFloat -> Bottom Card的最小高度
- let content: Content -> 設置BottomSheetDetailView的內容
- let employee: Employee -> 員工資料
- @GestureState private var translation: CGFFloat -> Bottom Card位移資料
- private var offset: CGFloat { isOpen ? 0 : maxHeight - minHeight } -> 判斷當isOpen為true時,offset位移量為0;當isOpen為false時,位移量為maxHeight - minHeight
將1到5項的參數設定初始化後,接著設定body的部分(圖六):
- GeometryReader: 取得原件在整個螢幕的座標尺寸。
- TitleBar():建立(圖十)紅框處的標題文字「Employee Personal Information」。
- HeaderView:放入員工資料,會自動取出員工First Name及員工職稱。
- DetailInfoView:輸入System Icon的名稱、員工電話、員工郵件及員工工作性質。
設定完後,針對VStack做一些參數設定:
- .frame: 透過GeometryReader取得螢幕寬度及高度。
- .background: 將背景設定為白色。
- .cornerRadius: 將view設定為圓角。
- .offset: y座標位移量計算方式。
- .animation: 動畫效果。
- .gesture: 手勢觸發功能,透過DragGesture可以將Bottom Card向上拖曳(見成果展示)。
成果展示:
小結:
iOS SwiftUI Bottom Card的做法很多種,透過以上的方式即可完成最基本的Bottom Card效果。未來會再推出更多SwiftUI相關設計,感謝大家收看!
參考資料:
評論