初識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) } } } } } ```