引言

當(dāng)用戶首次啟用App時(shí)，客戶端應(yīng)用常常會(huì)出現(xiàn)一段過渡的App功能說明頁(yè)面，幫助用戶快速了解并熟悉App的基本功能和亮點(diǎn)。

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

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

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

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

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

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

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

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

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

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

實(shí)戰(zhàn)編程-引導(dǎo)圖片

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

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

導(dǎo)入文件完成后，如下彈窗所示：

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

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

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

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

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

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

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

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

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

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

實(shí)戰(zhàn)編程-引導(dǎo)文字

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

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

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

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

實(shí)戰(zhàn)編程-引導(dǎo)按鈕

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

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

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

實(shí)戰(zhàn)編程-輪博滾動(dòng)

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

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

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

視圖內(nèi)容部分，之前都是使用數(shù)組的索引方式，這只能使用到1個(gè)數(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組件，如此，便實(shí)現(xiàn)了引導(dǎo)頁(yè)的遍歷和滾動(dòng)效果。

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

if imageModels[index] == imageModels.last {
    Button(action: {}) {
        Text("立即體驗(yàn)")
            .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)
}

整體效果-預(yù)覽

點(diǎn)擊模擬器頂部的“運(yùn)行”圖標(biāo)，嘗試拖動(dòng)頁(yè)面，效果如下：

本章小結(jié)

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

總的來說，新增知識(shí)點(diǎn)較多，希望各位童鞋好好消化下，更好地進(jìn)行下面的學(xué)習(xí)。

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

最新評(píng)論