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