引言

當用戶首次啟用App時，客戶端應用常常會出現(xiàn)一段過渡的App功能說明頁面，幫助用戶快速了解并熟悉App的基本功能和亮點。

引導頁是用戶了解產(chǎn)品的第一個窗口，能給用戶留下最初的印象。

一個好的引導頁可以很好地傳達產(chǎn)品設(shè)計理念和產(chǎn)品設(shè)計調(diào)性，也是企業(yè)傳達企業(yè)文化很好的窗口。當然對于開發(fā)者來說，也是必不可少的練手項目。

接下來，我們同樣將用10分鐘來構(gòu)建一個引導頁界面布局。

頁面分析-元素構(gòu)成

引導頁常常由3～5個滑動頁面組成，引導頁的設(shè)計內(nèi)容較為規(guī)范統(tǒng)一，常規(guī)由圖片、說明文案、引導按鈕組成。當引導頁滑動到最后一個頁面時，用戶可以點擊引導按鈕進入登陸頁或者首頁。

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

考慮完整體結(jié)構(gòu)后，對于單個頁面布局可以采用垂直布局，以此為圖片>文字>引導按鈕。

實戰(zhàn)編程-創(chuàng)建項目

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

命名好項目后，指定保存路徑，一個SwiftUI項目就創(chuàng)建完成了。

實戰(zhàn)編程-引導圖片

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

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

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

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

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

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

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

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

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

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

可以看到圖片尺寸已經(jīng)超出了屏幕可見范圍，結(jié)合上一章內(nèi)容所需，需要設(shè)置圖片修飾符讓Image內(nèi)容展示在屏幕范圍內(nèi)，如下代碼所示：

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

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

實戰(zhàn)編程-引導文字

引導文字和引導圖片具有一一對應關(guān)系，每一張引導圖片對應一段引導文字，因此也可以使用數(shù)組的方式創(chuàng)建文字數(shù)字再引用，如下代碼所示：

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

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

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

實戰(zhàn)編程-引導按鈕

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

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

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

實戰(zhàn)編程-輪博滾動

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

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

由于要實現(xiàn)滾動，那么在TabView視圖的基礎(chǔ)上，還需要使用tabViewStyle修飾符進行修飾，需要使用PageTabViewStyle樣式。并且視圖需要鋪滿全屏，使用edgesIgnoringSafeArea修飾符去掉所有安全區(qū)域。

視圖內(nèi)容部分，之前都是使用數(shù)組的索引方式，這只能使用到1個數(shù)據(jù)，要想引用所有數(shù)據(jù)，需要使用到ForEach循環(huán)函數(shù)，代碼如下：

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循環(huán)的方法遍歷imageModels數(shù)組中的數(shù)據(jù)，在ForEach循環(huán)方法中，indices獲得數(shù)據(jù)的范圍，imageModels.indices等同于0..imageModels.count。結(jié)合TabView組件，如此，便實現(xiàn)了引導頁的遍歷和滾動效果。

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

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)
}

整體效果-預覽

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

本章小結(jié)

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

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

以上就是SwiftUI 引導頁界面實現(xiàn)示例的詳細內(nèi)容，更多關(guān)于SwiftUI 引導頁界面的資料請關(guān)注腳本之家其它相關(guān)文章！