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