初识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) } } } } } ```
完成后,相应地我们在引导页GuidePageView中也需要引用ViewModel类,代码如下:
@EnvironmentObject var viewModel: ViewModel
声明好后,在引导页最后一页点击按钮操作时,更新Apps_firstLaunch
状态为false
,如下图所示:
同理,在LoginView页面中也需要做同样的操作,引入ViewModel类,将isLogin
状态更新为true
,如下图所示:
整体效果-预览
点击模拟器顶部的“运行
”图标,尝试拖动页面,效果如下:
本章小结
本章涉及到的知识点有点多,如果有哪一块不太了解可以重复看一下实现细节。其实在过往的产品研发过程中,产品、设计、开发,本身就是一体化的工作,只是现在因为劳动分工导致的职业化罢了。
其中引导页、登录页为上两章节的内容,如果不太了解,可以先行学习上两章节内容再回到本章进行学习。
在本章中首次使用到了MVVM开发模式,相比较MVC模式,代码更加清晰简洁,更适合协同开发。当然对个人开发者来说,也更好地符合面向对象编程的方式,但具体使用什么开发方式,还是要根据不同开发环境和业务需求制定。
还是那句,说再多不如自己敲一遍,学习最好的方法便是吸收、转化、输出。下面的章节我们继续来学习和完成一个又一个项目,敬请期待吧~
版权声明
本文为稀土掘金技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!
- 实战教程·元宇宙来了,准备好你的电子名片了吗?(一)
- 实战教程·元宇宙来了,准备好你的电子名片了吗?(八)
- 实战教程·什么年代了还在敲传统木鱼?(二)
- 实战教程·元宇宙来了,准备好你的电子名片了吗?(七)
- 实战教程·元宇宙来了,准备好你的电子名片了吗?(六)
- 实战教程·元宇宙来了,准备好你的电子名片了吗?(五)
- 实战教程·元宇宙来了,准备好你的电子名片了吗?(四)
- 实战教程·元宇宙来了,准备好你的电子名片了吗?(三)
- 实战教程·元宇宙来了,准备好你的电子名片了吗?(二)
- 实战教程·什么年代了还在敲传统木鱼?(一)
- 技术下午茶:产品经理是如何工作的?如何才算一份好的需求文档?如何设计一个简单的列表,它应该具备哪些基本功能?
- 发布&选择发布,使用SwiftUI搭建一个新建发布弹窗(上)
- 发布&选择发布,使用SwiftUI搭建一个新建发布弹窗(下)
- 使用SwiftUI搭建一个风筝摇摆动画,实现放风筝的梦想~
- SwiftUI100天:使用SwiftUI搭建一个计时器App
- 实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)
- 初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
- 谁说程序员不懂浪漫,教你使用SwiftUI搭建一个电子相册送给她吧~
- 实战编程·刻在男人DNA里的浪漫,空气投篮(二)
- 实战编程·使用SwiftUI从0到1完成一款iOS笔记App(四)