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
总结:第一次写这么长的文字。表达也是个问题,日后会改正。继续努力,多多练习!!
FROM:/1686863.html