快速上手·10分鐘完成一個引導頁界面_文如秋雨

theme: smartblue

當用户首次啟用App時，客户端應用常常會出現一段過渡的App功能説明頁面，幫助用户快速瞭解並熟悉App的基本功能和亮點。

引導頁是用户瞭解產品的第一個窗口，能給用户留下最初的印象。

一個好的引導頁可以很好地傳達產品設計理念和產品設計調性，也是企業傳達企業文化很好的窗口。當然對於開發者來説，也是必不可少的練手項目。

接下來，我們同樣將用10分鐘來構建一個引導頁界面佈局。

頁面分析-元素構成

引導頁常常由3～5個滑動頁面組成，引導頁的設計內容較為規範統一，常規由圖片、説明文案、引導按鈕組成。當引導頁滑動到最後一個頁面時，用户可以點擊引導按鈕進入登陸頁或者首頁。

引導圖片：使用Image組件，保持其固定寬高比；
引導文字：使用Text組件，設置字體顏色等；
引導按鈕：使用Image組件，引用Apple官方的SF Symbols圖標庫圖標；

考慮完整體結構後，對於單個頁面佈局可以採用垂直佈局，以此為圖片>文字>引導按鈕。

實戰編程-創建項目

打開Xcode開發工具，點擊Create a new Xcode project，將新項目命名為GuidePage，如下彈窗所示：

命名好項目後，指定保存路徑，一個SwiftUI項目就創建完成了。

實戰編程-引導圖片

和上一章節導入登錄頁面背景圖片的方案一致，點擊視圖工具欄的Assets.xcassets文件，點擊底部“+”圖標，選擇Import，如下彈窗所示：

本次引導頁需要搭建4個頁面，因此需要到4張引導頁圖片。除了點擊“+”圖標，選擇Import導入本地圖片外，還可以在本地文件夾中選擇多張圖片拖入到中間的資源文件中進行導入，兩種方式在實際開發中均可使用。

導入文件完成後，如下彈窗所示：

當然別忘了給導入的圖片重命名，方便更好地找到圖片。圖片資源導入成功後，回到ContentView文件，多張圖片下，可以使用圖片數組的方式將導入的圖片創建在一個圖片數組中，代碼如下：

let imageModels = ["image001", "image002", "image003", "image004"]

let為聲明常量的方法，imageModels為聲明的對象，使用賦值運算符“=”給聲明的對象賦值。數組的符號為“[]”，由於圖片在SwiftUI引用的方式為字符串類型，因此數組內的元素為多個字符串元素，使用“,”隔開。

SwiftUI聲明式語法的魅力之處在於，我們聲明的對象imageModels可以自動根據賦值的內容確定其類型，省略了每次都需要指定類型的編程步驟。

我們使用Image組件展示imageModels圖片數組中的圖片看看效果，代碼如下：

struct ContentView: View { let imageModels = ["image001", "image002", "image003", "image004"] var body: some View { Image(imageModels[0]) .padding() } }

Image組件引導imageModels圖片數組的內容，使用[]進行索引，而計算機的索引是由0開始，因此0代表imageModels圖片數組第一個元素，也就展示了第一張圖片。

可以看到圖片尺寸已經超出了屏幕可見範圍，結合上一章內容所需，需要設置圖片修飾符讓Image內容展示在屏幕範圍內，如下代碼所示：

Image(imageModels[0]) .resizable() .scaledToFit()

resizable修飾符可對Image圖片對象進行縮放，scaledToFit修飾符在縮放的基礎上對Image圖片對象設置保持其寬高比，避免圖片拉昇變形。

實戰編程-引導文字

引導文字和引導圖片具有一一對應關係，每一張引導圖片對應一段引導文字，因此也可以使用數組的方式創建文字數字再引用，如下代碼所示：

let textModels = ["勤測體温","勤加消毒","勤洗雙手","出門戴口罩"]

引導文字和引導圖片的佈局方式為垂直佈局，這裏可以使用到VStack佈局容器，並可使用文字修飾符對文字進行美化，如下代碼所示：

VStack(spacing: 20) { Image(imageModels[0]) .resizable() .scaledToFit() Text(textModels[0]) .font(.title) .bold() }

實戰編程-引導按鈕

引導按鈕本質上也是一張圖片，與常規圖片類型不同，它是一種圖片圖片。我們可以直接導入引導按鈕的圖片，當然為了保持圖標的統一性，Apple官方提供了官方圖標庫供開發者使用，無需導入圖片，即可直接使用引用Apple官方的SF Symbols圖標庫圖標。

SF Symbols圖標庫圖標可以直接使用Image組件調用，與常規圖片對象引用不同，需要使用systemName指定為系統圖標類型，如下代碼所示：

Image(systemName: "arrow.forward.circle") .font(.largeTitle)

實戰編程-輪博滾動

單張引導頁的樣式我們基本完成了，要使得引導頁可以滑動切換，這裏需要使用到一個新的組件TabView，TabView組件是SwiftUI提供的切換視圖組件，使用方式如下：

TabView { //代碼塊 } .tabViewStyle(PageTabViewStyle()) .edgesIgnoringSafeArea(.all)

由於要實現滾動，那麼在TabView視圖的基礎上，還需要使用tabViewStyle修飾符進行修飾，需要使用PageTabViewStyle樣式。並且視圖需要鋪滿全屏，使用edgesIgnoringSafeArea修飾符去掉所有安全區域。

視圖內容部分，之前都是使用數組的索引方式，這隻能使用到1個數據，要想引用所有數據，需要使用到ForEach循環函數，代碼如下：

TabView { ForEach(imageModels.indices, id: \.self) { index in VStack(spacing: 80) { Image(imageModels[index]) .resizable() .scaledToFit() Text(textModels[index]) .font(.title) .bold() Image(systemName: "arrow.forward.circle") .font(.largeTitle) } } } .tabViewStyle(PageTabViewStyle()) .edgesIgnoringSafeArea(.all)

ForEach循環的方法遍歷imageModels數組中的數據，在ForEach循環方法中，indices獲得數據的範圍，imageModels.indices等同於0..imageModels.count。結合TabView組件，如此，便實現了引導頁的遍歷和滾動效果。

最後，當引導頁滾動到最後一個頁面時，引導按鈕需要切換變成引導點擊進入首頁/登陸頁的按鈕，我們可以使用if判斷語句，若當前引導頁為最後一張，則修改引導按鈕為指定的按鈕，可以使用last獲得數組中最後一個元素，代碼如下：

if imageModels[index] == imageModels.last { Button(action: {}) { Text("立即體驗") .font(.system(size: 17)) .bold() .frame(minWidth: 0, maxWidth: 120) .padding() .foregroundColor(.white) .background(.green) .cornerRadius(8) } } else { Image(systemName: "arrow.forward.circle") .font(.largeTitle) }

整體效果-預覽

點擊模擬器頂部的“運行”圖標，嘗試拖動頁面，效果如下：

本章小結

在本章節中，我們強化學習了Image組件和Text組件的使用，並學習使用systemName引用Apple官方圖標庫圖標。另外還學習2個新的組件TabView切換視圖容器和ForEach循環函數，其中ForEach循環函數中如何使用索引以及獲得最後一個元素等方法也有所涉及。

總的來説，新增知識點較多，希望各位童鞋好好消化下，更好地進行下面的學習。

説一千遍不如手敲一遍，腦子懂了手也要學會，快來試試吧～

在下一章節中，我們將學習更多SwiftUI項目知識，搭建一個又一個項目，請保持期待吧～

版權聲明

本文為稀土掘金技術社區首發簽約文章，14天內禁止轉載，14天后未獲授權禁止轉載，侵權必究！