初识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


相关文章
|
前端开发 开发工具 iOS开发
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(1)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
340 0
|
8月前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
258 1
|
前端开发 数据处理 Swift
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑(3)
初识MVVM·关于启动页、引导页、登录页的设计细节和交互逻辑
150 0
|
存储 小程序 前端开发
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
89 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用1
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用1
46 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用5
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用5
78 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用3
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用3
78 0
|
存储 前端开发 JavaScript
你可能需要的多文档页面交互方案(一)
你可能需要的多文档页面交互方案
140 1
|
安全 JavaScript 网络协议
你可能需要的多文档页面交互方案(二)
你可能需要的多文档页面交互方案
74 0
|
前端开发 小程序
前端工作小结86-小程序学习4开始布局页面4
前端工作小结86-小程序学习4开始布局页面4
89 0
前端工作小结86-小程序学习4开始布局页面4