• 八、UIViewController们之间的协作——Segue


    概述

    正所谓“一生二,二生三,三生万物”,1个UIViewController没什么花样,多个UIViewController相互协作就有了各式各样丰富多彩的APP。但是UIViewController们自成一体互不认识,整天就只知道在自己的界面里码代码,该怎么让他们配对成功呢?这时候就需要我们的介绍人——Segue——登场了。首先我们会介绍UIViewController是如何通过Segue暗送秋波,Segue共分为5类:show,show detail,present modally,present as popover和custom(另有push和modally两类,因被xcode弃用,所以此处不表)。

    传递参数

    现在我们要再创建1个UIViewController,并且让初始UIViewController可以传递1个字符串到第2个UIViewController。

    首先,创建1个新工程,然后在Main.storyboard上再拖入1个UIViewController。

    然后再创建1个UIViewController所对应的类文件,我们将其命名为SecondViewController。

    然后我们将SecondViewController和Storyboard上的UIViewController关联起来:选中第2个UIViewController,将其Class属性设置为SecondViewController。

      

    “control-拖拽”初始UIViewController的“铜钱状”图标到第2个UIViewController上,并选择“Show”。

     

     

    于是我们创建了我们的第1个Segue,就是在两个UIViewController面板之间那条带箭头的线。那我们如何在代码中引用这个Segue呢?Segue不像Label或者button,它是无法通过“controller-拖拽”的方式来引用的,但是可以通过索引Segue的Identifier来引用Segue。在Storyboard上选中Segue那条线,然后修改“Identifier属性”为“MySegue”。

    接着,我们在第一个UIViewController添加1个触发Segue的Button,并为其添加触发Segue的代码,其中performSegue的参数“withIdentifier”用于确定segue的Identifier,从而确定触发哪一个Segue。

    到目前为止,Segue确实可以触发了,但是两个UIViewController之间还没有产生数据交互。

    我们先加入1个内嵌的导航栏,并命名其标题为SegueTest

    我们在SecondViewController中添加1个字符串作为其导航栏的标题。

    现在我们要在触发Segue时,向SecondViewController中传入1个字符串作为其导航栏的title。

    大功告成。

    Segue的类型

    开头我们就介绍了,segue有show,show detail,present modally,present as popover和custom共5种类型,那它们之间有什么区别呢?

    在刚刚的例子中,我们发现在触发Segue进入SecondViewController后,导航栏自动添加了1个回退键(内嵌导航栏真贴心~)

    这就是“show segue”的特点:在进入新的UIViewController时,新的UIViewController会保留前一个UIViewController的内嵌导航栏,并且提供返回按键。

    那如果我把“show segue”换成“show detail segue”呢?

    我们再新建1个工程,基本复制前一个例子,唯独把“show segue”换成“show detail segue”。我们来看看效果:

    千万不要说:“居然没有效果?!”

    因为效果很明显:导航栏没了!

    这就是“show detail segue”的特点:在进入新的UIViewController时,新的UIViewController不在使用前一个UIViewController的内嵌导航栏,更不会提供返回键。

    于是我们给SecondViewController单独添加导航栏:选中SecondViewController的面板再依次选择Editor->Embeded in->Navigation Controller。

    这时需要注意,“MySegue”的关系改变了,它不再是“ViewController->SecondViewController”的关系,而是“ViewController->SecondViewController的导航栏”的关系。所以我们要做如下代码修改,否则运行会崩溃。

    同时再添加1个返回按键

    这时有个问题,那就是ViewController无法将数据直接交给SecondViewController,而是必须将数据先交给SecondViewController的NavigationController,我们可以重新定义1个SecondNavigationController并继承UINavigationController,然后将SecondViewController的NavigationController的class设置成SecondNavigationController。我们在SecondNavigationController中预设我们想要传递的数据,ViewController将数据传递给SecondNavigationController后SecondViewController就可以通过navigationController成员变量获取数据,此处不再举例。

    “present modally”的特点:和“show detail”基本相同,但是多一些动画效果。

    “present as popover”的特点:常用于菜单弹框。

    老样子,第一步先Control拖拽1个Segue,并选择Segue as popover。

     我们在第2个UIViewController添加2个按钮“唧唧”和“喳喳”。然后选中Segue,设置其“Identifier”为“MySegue”,将“Anchor”拖拽到第1个UIViewController上的Button上。

    修改UIViewController的代码,添加“UIPopoverPresentationControllerDelegate”代理,并重写“adaptivePresentationStyle”函数,并在prepare中将代理设置给Segue,同时添加第1个UIViewController中按钮的事件触发代码(actionTriggerSegue)

    看看效果:感觉弹框略大了些,而且还把Button给遮住了。

    选中第2个ViewController,并设置其“Content Size”。

    Xcode上的模拟效果似乎没什么变化。我们再修改模拟的大小,这样弹框的尺寸就变小了。

    然后我们要希望弹框不要遮住“Button”,于是我们让“Button”位于弹框右侧。

     如果你还想要一些更炫酷的过场动画,那么你可以使用“Custom”Segue。

    “Custom”的特点:多用于自定义过场动画。

    首先,自定义1个Segue,我们此处命名其为“CustomSegue”

    重写“perform”函数,其中srcView和dstView分别为Segue切换时,切换前的ViewController和切换后的ViewController,我们为dstView添加3种动画:

    旋转动画、X轴放大动画和Y轴放大动画。

    Control拖拽Segue,使用Custom类型,然后设置“Identifier”为“MySegue”,并将Class设置为“CustomSegue”

     最后别忘记给按钮添加触发Segue的事件

    源码下载(Show Segue):https://pan.baidu.com/s/1qTugv5cWriVg4kx5vZTxHg

    源码下载(Show Detail Segue):https://pan.baidu.com/s/1rL2J_uxe4xMJcJatbG-niA

    源码下载(Present Modally Segue):https://pan.baidu.com/s/1qemWf7n9vfSgLz0v6d6HNA

    源码下载(Present as popover Segue):https://pan.baidu.com/s/1DzpXJnLPmHlfvTNqTiJYlg

    源码下载(Custom Segue):https://pan.baidu.com/s/1E7A__CamnJz-BFhhlS_tZg

    上一节           回目录          下一节 

  • 相关阅读:
    ant design pro梳理
    JSON.stringify()
    数组小细节
    js this细节
    策略模式解决if-else过多
    使用useState的赋值函数异步更新问题
    Hook
    React Api
    Intent
    树的非递归遍历
  • 原文地址:https://www.cnblogs.com/ansersion/p/9346174.html
Copyright © 2020-2023  润新知