在上两个章节中,咱们快速树立并完结了登录页面和引导页,在惯例的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天后未获授权制止转载,侵权必究!