快速上手·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天后未獲授權禁止轉載，侵權必究！