代码改变世界

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

2018-08-02 14:19  Ansersion  阅读(1292)  评论(0编辑  收藏  举报

概述

正所谓“一生二,二生三,三生万物”,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

 

上一节           回目录          下一节