初識MVVM·關於啟動頁、引導頁、登入頁的設計細節和互動邏輯_文如秋雨

theme: smartblue

在上兩個章節中，我們快速搭建並完成了登入頁面和引導頁，在常規的App開發中，除了引導頁、登入頁外，一閃而過的啟動頁可能最容易讓人忽略。

啟動頁，作為在App啟動過程中使用者所感知的第一個頁面，與引導頁、登入頁構成了使用者對產品形成的第一印象。

本章節中，我們來探討它們之間的關係，並且採取實戰程式設計的方式實現它們之間的互動邏輯。

需求分析-頁面邏輯

首先，我們先分析下常規的App登入互動邏輯。當用戶開啟App時，會遇到哪些頁面？

啟動頁：當用戶開啟APP時，在啟動APP的過程中被使用者所看到的過渡頁面或動畫。
引導頁：當用戶安裝或更新APP後首次啟動APP時展示的3-5個滑動頁面就是引導頁，幫助使用者更加清晰的瞭解產品定位與功能服務。
登入頁：提供賬號登入方式，獲取使用者基本資訊，用於統計使用者留存或者提供專屬服務的身份認證頁面。
首頁：APP的主要功能展示。

啟動頁、引導頁、登入頁、首頁，它們的邏輯順序如下圖所示：

當用戶開啟App時，系統啟動App並伴隨著啟動頁，若當前使用者為首次開啟App，則會開啟引導頁。

使用者隨著引導頁的指引，在引導頁最後一頁點選操作，進入到登入頁面，對於強登入的App，則需要登入認證身份後才可以使用App功能。

而對於弱登入性質的App，可通過跳過關閉登入頁面進入首頁，並在下一次開啟應用時不再彈出登入頁。若是工具類應用，則可以直接不要登入頁。

UI設計-應用圖示

在正式進入編碼之前，我們先設計一個簡單的應用圖示的UI。應用圖示設計方式呈現多樣化，最能凸顯產品品牌和產品服務宗旨的也是最簡單的，便是簡單的背景顏色+圖示icon。

下載並開啟AdobeXD設計軟體，選擇“自定義大小”，設定寬高為1024*1024，如下彈窗所示：

選中檢視，選擇右側樣式欄中的“填充”操作，選擇“線性漸變”，設定角度為斜45度，顏色漸變為#9890e3→#b1f4cf。

拖入一個icon圖示，調整其大小，設定其填充顏色為白色，我們就得到了一個產品Logo圖示，如下所示：

設計好基本樣式後，選擇檔案 > 匯出 > 匯出，選擇所有面板。在儲存檔案彈窗中修改名稱為“logo”，匯出格式為“PNG”，匯出大小為“1x”，點選“匯出所有面板”，AdobeXD將會儲存匯出一張1024*1024的UI設計稿圖片。

為了得到不同尺寸的程式圖示，我們可以下載Apple官方的ProductionTemplates，下載並開啟，拖入設計好的1024*1024尺寸的設計稿到最大的空白框中，就可以遍歷得到符合Apple官方的全部尺寸程式圖示，如下圖所示：

批量匯出儲存之後，程式圖示的準備工作就完成了。

實戰程式設計-建立專案

開啟Xcode開發工具，點選Create a new Xcode project，將新專案命名為PageSetting，如下彈窗所示：

命名好專案後，指定儲存路徑，一個SwiftUI專案就建立完成了。

實戰程式設計-程式圖示

點選檢視工具欄的Assets.xcassets檔案，我們發現有一個空的應用程式圖示組選擇AppIcon，選中時將會出現多個不同尺寸的匯入圖示介面，如下頁面所示：

我們將設計好的圖示圖片拖入到AppIcon對應尺寸的空白框中，如圖所示：

完成後點選“執行”，我們就可以在模擬器中看到帶有設計圖示的應用程式了，如下圖所示：

實戰程式設計-啟動頁

接下來，我們正式搭建啟動頁。Xcode開發工具製作啟動頁動畫的方式有2種，一種是通過故事板和約束佈局技術來建立啟動動畫，另一種是直接指定圖片作為啟動頁。這裡，我們為了更好地擴充套件性和程式設計靈活性，採用第一種方式構建啟動頁。

在Assets.xcassets檔案拖入3種尺寸的程式圖示，並把最終的應用圖示命名為logo，如下彈窗所示：

選擇File > New > File，選擇LaunchScreen，點選Next，如下彈窗所示：

Xcode開發工具將自動建立好一個故事板頁面，開發者可以直接在故事板中使用拖動的方式構建頁面，這也是我在SwiftUI之前最喜歡的開發方式，使用故事板和極少的程式碼即可完成一個簡單的靜態頁面。

點選頂部工具欄右上角的“+”按鈕，選擇之前匯入到素材庫的圖片，將元件拖到檢視中。再選擇一個Label元件，雙擊修改文字為“連線你和世界”，將元件拖到底部，如下圖所示：

元件放置在檢視之後，還需要建立約束佈局關係，才能保證在不同機型下元件的位置和大小不會發生偏移和形變。

建立約束的方式為選中單個元件，然後點選右下角的“添加布局約束”按鈕，設定好元件相對距離，示例：Label文字，我們設定它距離底部60，距離左右間距20，文字排布為居中。同理，我們設定logo圖片為固定展示尺寸，並且距離頂部距離為200，與檢視垂直居中。

故事板和約束佈局在這裡就不展開講了，後續也基本用不上這種開發方式。

建立好LaunchScreen內容後，我們在PageSettings應用主要設定頁面中設定啟動畫面為LaunchScreen檔案，如下圖所示：

完成後，當我們每次開啟App時，應用啟動過程中都會載入啟動頁畫面。

啟用頁是使用者第一眼看到的檢視頁面，但僅限於應用程式被啟用時展示。由於Apple獨有的虛擬後臺技術，及時應用程式掛至後臺也是處於虛擬啟用狀態，因此不是每一次都能看到啟動頁。

接下來，我們在完成啟用頁，結合前兩章的引導頁、登入頁的基礎上完成應用程式頁面之間的互動邏輯。

實戰程式設計-頁面準備

我們建立2個SwiftUI檔案，右鍵，選擇New File，選擇SwiftUI檔案，登入頁命名為LoginView，引導頁命名為GuidePageView。

並將前兩章的程式碼複製到新建立的SwiftUI檔案裡，別忘了匯入的本地圖片也需要再匯入到這個SwiftUI專案中。完成後如下圖所示：

這時，我們就有了預設的啟動頁LaunchScreen、引導頁GuidePageView，登入頁LoginView，首頁ContentView。

實戰程式設計-頁面互動

在學習頁面互動之前，我們先來了解下MVVM開發模式。MVVM開發模式，指的是Model-View-ViewModel模式，簡單來說，就是將頁面、資料、資料處理分開。

之前的章節內容我們完成的最多的是View的部分，Model資料部分在後面的章節中我們也經常提及，這裡我們頁面互動邏輯用的的邏輯部分，都屬於ViewModel。

在左側檢視工具欄中右鍵，選擇New File，選擇Swift檔案，命名為ViewModel。鍵入以下的程式碼：

``` import Foundation import SwiftUI

class ViewModel: ObservableObject { @Published var isLogin: Bool = false @AppStorage("App_firstLaunch") var Apps_firstLaunch: Bool = true } ```

引用SwiftUI後，我們建立了一個類ViewModel，遵循ObservableObject協議。這裡聲明瞭2個變數，一個是isLogin，判斷是否登入。另一個是控制引導頁，由於引導頁是初始首次開啟App時才展示，因此需要使用@AppStorage宣告。

宣告好必要的引數後，我們來到PageSettingsApp頁面，這是整個App載入時展示的頁面，也就是@main主函式頁面。

首先引用建立好的ViewModel類，程式碼如下：

@StateObject var viewModel = ViewModel()

在主體程式碼部分，App載入的內容需要根據我們宣告好的變數狀態進行展示，當我們是第一次展示時，載入引導頁GuidePageView，如果不是，則判斷是否登入，若沒有登入則展示登入頁，登入後則展示主頁，完整程式碼如下：

``` import SwiftUI

@main struct PageSettingsApp: App { @StateObject var viewModel = ViewModel() var body: some Scene { WindowGroup { if viewModel.Apps_firstLaunch { GuidePageView().environmentObject(viewModel) } else { if viewModel.isLogin { ContentView().environmentObject(viewModel) } else { LoginView().environmentObject(viewModel) } } } } } ```