现在的位置: 首页 > 综合 > 正文

Storyboard 之segue用法总结

2013年02月01日 ⁄ 综合 ⁄ 共 4145字 ⁄ 字号 评论关闭

Storyboard的好玩之处在于它可以帮我们省略了很多要手动写的代码,其中segue的功劳功不可没,现总结一下学习心得,若有错误之处,望指正。

创建工程,选择 Single View Application,给工程起个名字,这里是SegueDemo,注意要把下面的Use Storyboard选项勾选上,我使用ARC,这里可以随意。

        

点选工程文件中的MainStoryboard.storyboard文件,可以看到只有一个视图。这里我要加入一个Tab Bar Controller,那么就可以把原有的视图删除了。接下来要做的一步很重要!storyboard必须要知道从哪个视图开始,选中Tab Bar Controller,按照如下图所示步骤,完成之后将可以看到Tab Bar Controller左侧多出一个箭头,即红色箭头所指。这样storyboard就知道就哪个视图开始了。

ok,现在可以继续了。现在我想item1是在navigationconroller中,选中items1那个视图,Editor ->Embed In -> Navigation Controller

确定之后,效果如下图所示:

ok,现在选中navigationcontroller 右边这个视图,将其Class设置为ViewController,这样这个视图就关联了ViewController这个类。

view controller这个视图上放置两个UIButton,分别命名为push和modal,再在这个视图右侧加入两个UIViewController,效果如下:

选中“push'那个button,按住鼠标右键,拖拽指右侧视图上,会出现一个弹出选项,这里选择push。

同理,选中”modal“那个button,鼠标右键拖拽至右侧另外一个视图上,在弹出的选项框中选择”Modal"。为了明显可以设置这两个视图的背景色。现在可以运行这个程序了,一切都不错,但是,点选modal之后没有办法在回到前一个视图了!

解决这个,需要使用代理。创建一个UIViewController的子类,这里是ModalViewController,不要勾选“with xib for user interface"!因为已经在使用storyboard了。

在ModalViewController.h中完成如下代码。创建一个ModalViewControllerDelegate协议,该协议只有一个方法。

回到storyboard中,在ModalViewCotroller类所对应的视图上添加一个navigationbar和bar button item,双击bar button item,修改文本为“返回”。选中该视图,将其Class修改为“ModalViewController"。

1.选中'ModalViewController"这个视图。

2.选择右上角“鬼脸”模样的按钮。这时会出现ModalViewController.h这个文件。

        3.选中“返回”按钮,按住鼠标右键拖拽至ModalViewController.h文件@property 和 @end 之间。

弹出的选项框中选择 "Action" , 名字是backButtonDidTap,回车。

选中ModalViewController.m文件,可以在文件底部多出了刚才添加的方法。完善该方法。

回到storyboard文件中,选中“modal”那个segue,将其identifier改为modal。下面有个Transition选项,里面有其他风格的,可以尝试。

          

选中ViewController.m文件,修改代码如下,这里你需要写明

        1.#import "ModalViewController.h"

2.让该类实现ModalViewControllerDelegate

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender 方法系统会在跳转的时候自己调用。用if做判断是必要的,因为可能有多个segue,系统都是调用这个方法,为了区别,必须要做判断,而且还要标志segue独一无二的identifier!!!!

运行一下,一切都完好。继续。

接下来,想让Tab Bar Controller的另一个视图放入navigationcontroller中,

1.选中“item2",  Editor ->Embed In -> Navigation Controller (参看上面的截图)

2.在“item'视图navigationbar的右侧添加一个bar button item,双击修改文本为 go

3.再向storyboard中添加个UIViewController视图.

选中”go“按钮,右键拖拽至右侧视图,在弹出的选项框中选择"Custom",这将会出现一个不同与先前的segue,选中这个segue,将其indetifier修改为go

               

创建继承自UIStoryboardSegue的子类MyStoryboardSegue,从写父类的-(void)perform方法。这个方法要用到图形方面的方法,所以导入 

-(void) perform {

          UIViewController *sourceViewController =  self.sourceViewController;

          UIViewController *destionationViewController = self.destionationViewController;

//  1

  UIGraphicsBeginImageContext(destionationViewController.view.bounds.size);

 [destionationViewController.view.layer    renderInContext:UIGraphicsGetCurrentContext()];

 UIImage *destionViewControllerImage = UIGraphicsGetImageFromCurrentImageContext();

 UIGraphicsEndImageContext();

     

// 2

     UIImageView *destionationViewControllerImageView = [[UIImageView alloc] initWithImage:destionationViewControllerImage];

[sourceViewController.parentViewController.view    addSubview:destionViewControllerImageView];

// 3

CGAffineTransform   scaleTransform = CGAffineTransformMakeScale(0.1, 0.1);

CGAffineTransform   rotateTransform = CGAffineTransformMakeRotation(M_PI);

destionationViewControllerImageView.transform = CGAffineTransformConcat(scaleTransform, rotateTransform);

//  4

CGPoint    latterCenter = destionationViewControllerImageView.center;

  CGPoint    formerCenter = CGPointMake(latterCenter.x - destionationViewControllerImageView.bounds.size.width, latterCenter.y);

        destionationViewControllerImageView.center = formerCenter;

// 5

[UIView animationWithDuration:0.5    animations:^(void) {

destionationViewCotrollerImageView.transform = CGAffineTransformIdentity;

destionationViewControllerImage.center = latterCenter;

}completion:^(BOOL finished) {

[destionationViewControllerImageView removeFromSuperview];

[souceViewController presentViewController:destionationViewController animated:NO completion: nil];

}];

}

解释一下:

1.截取将要跳转到的视图控制器的界面,得到的是UIImage对象

2.将UIImage对象放到UIImageView中,添加到原视图的父视图中,这里是navigationcontroller对象

3.设置UIImageView的两个动画,放大和旋转。

4.将截图的视图放置在屏幕之外。

5.创建并完成动画,结束后将UIImageVIew视图从父视图中去除。

再次选中自定义的segue,将其Segue Class修改为MyStoryboardSegue,这样自定义的segue算是完成了,perform方法是系统自己调用的,不需要操心。

运行一下,一切正常。不过遇到了先前一样的问题,无法回到前一个视图。将SecondViewController修改一下,

                 

SecondViewController.h

需要实现这个协议,点击FirstViweController.m,修改如下:

当然,必要的头文件和协议申明还是需要的。

再次运行一下。一切还算不错。为了效果明显一些,可以给视图设置不同的颜色。

程序代码:SegueDemo

总结:第一次写这么长的文字。表达也是个问题,日后会改正。继续努力,多多练习!!

抱歉!评论已关闭.