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

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

实战编程-程序图标

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

image.png

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

image.png

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

image.png

实战编程-启动页

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

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

image.png

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

image.png

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

image.png

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

image.png

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

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

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

image.png

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

image.png

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

image.png

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

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

实战编程-页面准备

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

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

image.png

这时,我们就有了默认的启动页LaunchScreen、引导页GuidePageView,登录页LoginView,首页ContentView


相关文章
|
4月前
|
Web App开发 前端开发 异构计算
前端如何实现网页变灰功能?
前端如何实现网页变灰功能?
|
6月前
|
前端开发 开发工具 iOS开发
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(1)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
125 0
|
24天前
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
|
2月前
|
PHP
【ripro美化】设计子主题sheji-child素材资源下载站模板(集成后台+无授权+独立运行)
安装教程 第一步:首先对应单个上传替换包里面的文件到ripro原主题里面(单个文件覆盖不是替换整个文件包) 第二步:将下载的sheji-child压缩包上传到/wp-content/themes/直接解压,完成后到后台-外观-启用子主题 后台新建页面 1:页面-新建页面-选择VIP介绍模板,链接填vip 2:页面-新建页面-选择自助申请友链模板,链接填links
12 0
【ripro美化】设计子主题sheji-child素材资源下载站模板(集成后台+无授权+独立运行)
|
6月前
|
前端开发 数据处理 Swift
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(3)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
53 0
|
6月前
|
小程序 前端开发 JavaScript
微信小程序框架--视图层、逻辑层与页面的生命周期
微信小程序框架--视图层、逻辑层与页面的生命周期
81 0
|
7月前
|
存储 小程序 前端开发
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
29 0
|
9月前
|
小程序 JavaScript
整理微信小程序控制view隐藏显示的五种方法
整理微信小程序控制view隐藏显示的五种方法
625 0
|
存储 前端开发 JavaScript
你可能需要的多文档页面交互方案(一)
你可能需要的多文档页面交互方案
98 1
|
安全 JavaScript 网络协议
你可能需要的多文档页面交互方案(二)
你可能需要的多文档页面交互方案
52 0