初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑

语言: CN / TW / HK

theme: smartblue

在上两个章节中,我们快速搭建并完成了登录页面和引导页,在常规的App开发中,除了引导页、登录页外,一闪而过的启动页可能最容易让人忽略。

启动页,作为在App启动过程中用户所感知的第一个页面,与引导页、登录页构成了用户对产品形成的第一印象。

本章节中,我们来探讨它们之间的关系,并且采取实战编程的方式实现它们之间的交互逻辑。

需求分析-页面逻辑

首先,我们先分析下常规的App登录交互逻辑。当用户打开App时,会遇到哪些页面?

1.png

  • 启动页:当用户打开APP时,在启动APP的过程中被用户所看到的过渡页面或动画。
  • 引导页:当用户安装或更新APP后首次启动APP时展示的3-5个滑动页面就是引导页,帮助用户更加清晰的了解产品定位与功能服务。
  • 登录页:提供账号登录方式,获取用户基本信息,用于统计用户留存或者提供专属服务的身份认证页面。
  • 首页:APP的主要功能展示。

启动页、引导页、登录页、首页,它们的逻辑顺序如下图所示:

2.png

当用户打开App时,系统启动App并伴随着启动页,若当前用户为首次打开App,则会打开引导页。

用户随着引导页的指引,在引导页最后一页点击操作,进入到登录页面,对于强登录的App,则需要登录认证身份后才可以使用App功能。

而对于弱登录性质的App,可通过跳过关闭登录页面进入首页,并在下一次打开应用时不再弹出登录页。若是工具类应用,则可以直接不要登录页。

UI设计-应用图标

在正式进入编码之前,我们先设计一个简单的应用图标的UI。应用图标设计方式呈现多样化,最能凸显产品品牌和产品服务宗旨的也是最简单的,便是简单的背景颜色+图标icon。

下载并打开AdobeXD设计软件,选择“自定义大小”,设置宽高为1024*1024,如下弹窗所示:

3.png

选中视图,选择右侧样式栏中的“填充”操作,选择“线性渐变”,设置角度为斜45度,颜色渐变为#9890e3→#b1f4cf

4.png

拖入一个icon图标,调整其大小,设置其填充颜色为白色,我们就得到了一个产品Logo图标,如下所示:

5.png

设计好基本样式后,选择文件 > 导出 > 导出,选择所有面板。在保存文件弹窗中修改名称为“logo”,导出格式为“PNG”,导出大小为“1x”,点击“导出所有面板”,AdobeXD将会保存导出一张1024*1024的UI设计稿图片。

6.png

为了得到不同尺寸的程序图标,我们可以下载Apple官方的ProductionTemplates,下载并打开,拖入设计好的1024*1024尺寸的设计稿到最大的空白框中,就可以遍历得到符合Apple官方的全部尺寸程序图标,如下图所示:

7.png

批量导出保存之后,程序图标的准备工作就完成了。

实战编程-创建项目

打开Xcode开发工具,点击Create a new Xcode project,将新项目命名为PageSetting,如下弹窗所示:

8.png

命名好项目后,指定保存路径,一个SwiftUI项目就创建完成了。

实战编程-程序图标

点击视图工具栏的Assets.xcassets文件,我们发现有一个空的应用程序图标组选择AppIcon,选中时将会出现多个不同尺寸的导入图标界面,如下页面所示:

9.png

我们将设计好的图标图片拖入到AppIcon对应尺寸的空白框中,如图所示:

10.png

完成后点击“运行”,我们就可以在模拟器中看到带有设计图标的应用程序了,如下图所示:

11.png

实战编程-启动页

接下来,我们正式搭建启动页。Xcode开发工具制作启动页动画的方式有2种,一种是通过故事板和约束布局技术来创建启动动画,另一种是直接指定图片作为启动页。这里,我们为了更好地扩展性和编程灵活性,采用第一种方式构建启动页。

Assets.xcassets文件拖入3种尺寸的程序图标,并把最终的应用图标命名为logo,如下弹窗所示:

12.png

选择File > New > File,选择LaunchScreen,点击Next,如下弹窗所示:

13.png

Xcode开发工具将自动创建好一个故事板页面,开发者可以直接在故事板中使用拖动的方式构建页面,这也是我在SwiftUI之前最喜欢的开发方式,使用故事板和极少的代码即可完成一个简单的静态页面。

14.png

点击顶部工具栏右上角的“+”按钮,选择之前导入到素材库的图片,将组件拖到视图中。再选择一个Label组件,双击修改文字为“连接你和世界”,将组件拖到底部,如下图所示:

15.png

元件放置在视图之后,还需要建立约束布局关系,才能保证在不同机型下组件的位置和大小不会发生偏移和形变。

建立约束的方式为选中单个组件,然后点击右下角的“添加布局约束”按钮,设置好组件相对距离,示例:Label文字,我们设置它距离底部60,距离左右间距20,文字排布为居中。同理,我们设置logo图片为固定展示尺寸,并且距离顶部距离为200,与视图垂直居中。

故事板和约束布局在这里就不展开讲了,后续也基本用不上这种开发方式。

16.png

创建好LaunchScreen内容后,我们在PageSettings应用主要设置页面中设置启动画面为LaunchScreen文件,如下图所示:

17.png

完成后,当我们每次打开App时,应用启动过程中都会加载启动页画面。

18.png

启用页是用户第一眼看到的视图页面,但仅限于应用程序被启用时展示。由于Apple独有的虚拟后台技术,及时应用程序挂至后台也是处于虚拟启用状态,因此不是每一次都能看到启动页。

接下来,我们在完成启用页,结合前两章的引导页、登录页的基础上完成应用程序页面之间的交互逻辑。

实战编程-页面准备

我们创建2个SwiftUI文件,右键,选择New File,选择SwiftUI文件,登录页命名为LoginView,引导页命名为GuidePageView

并将前两章的代码复制到新创建的SwiftUI文件里,别忘了导入的本地图片也需要再导入到这个SwiftUI项目中。完成后如下图所示:

19.png

这时,我们就有了默认的启动页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 } ```

20.png

引用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)                 }             }         }     } } ```

21.png

完成后,相应地我们在引导页GuidePageView中也需要引用ViewModel类,代码如下:

@EnvironmentObject var viewModel: ViewModel

声明好后,在引导页最后一页点击按钮操作时,更新Apps_firstLaunch状态为false,如下图所示:

22.png

同理,在LoginView页面中也需要做同样的操作,引入ViewModel类,将isLogin状态更新为true,如下图所示:

23.png

整体效果-预览

点击模拟器顶部的“运行”图标,尝试拖动页面,效果如下:

24.gif

本章小结

本章涉及到的知识点有点多,如果有哪一块不太了解可以重复看一下实现细节。其实在过往的产品研发过程中,产品、设计、开发,本身就是一体化的工作,只是现在因为劳动分工导致的职业化罢了。

其中引导页、登录页为上两章节的内容,如果不太了解,可以先行学习上两章节内容再回到本章进行学习。

在本章中首次使用到了MVVM开发模式,相比较MVC模式,代码更加清晰简洁,更适合协同开发。当然对个人开发者来说,也更好地符合面向对象编程的方式,但具体使用什么开发方式,还是要根据不同开发环境和业务需求制定。

还是那句,说再多不如自己敲一遍,学习最好的方法便是吸收、转化、输出。下面的章节我们继续来学习和完成一个又一个项目,敬请期待吧~

版权声明

本文为稀土掘金技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!

「其他文章」