iOS开发-使用Storyboard进行界面跳转及传值
前言:苹果官方是推荐我们将所有的UI都使用Storyboard去搭建,Storyboard也是一个很成熟的工具了。使用Storyboard去搭建所有界面,我们可以很迅捷地搭建出复杂的界面,也就是说能为我们节省大量的时间。我们还可以很直观地看出各个界面之间的关系,修改起来也很方便。将来如果遇到需要作修改的地方,我们只需要找到相对应的Storyboard就可以了,比起以前来说,快捷了不少。
另外,建议大家实验每一种方法时,先清空界面上的内容,以避免出现错误。因为初学者很容易使得界面上有残留,具体的这里就不说明了。接下来,让开始我们的Storyboard之旅吧!
一、使用Storyboard进行跳转
1. 纯Storyboard界面操作
我们在Storyboard上放置一个按扭,在按扭上方点击并按住“右键”不放,拖动到跳转的下一个界面上。
![](https://img.haomeiwen.com/i18883237/cf93a0a6ec19f04a.png)
松开右键后,会有一个黑色透明的弹出框,选择跳转的方式:
![](https://img.haomeiwen.com/i18883237/2490993ce872f5cb.png)
从这里可以看到,界面和界面之间多了一条线连接,如下图:
![](https://img.haomeiwen.com/i18883237/6fb54860f5302c70.png)
我们可以在Xcode右边的工具栏看到,我们刚刚的连线操作(现在可以运行项目了):
![](https://img.haomeiwen.com/i18883237/ad1bb7eec6c3dcc7.png)
-
使用代码进行跳转
我们把刚刚的连线删除掉,如下图所示:
新建一个继承于UIViewController的类CodeViewController:
选中按扭所在的界面,设置它的类文件,默认都是继承于UIViewController,如下图所示:
我们把它改成刚刚新建的类“CodeViewController”,如下图所示:
把界面缩小(你可以在空白的地方双击一下,或者右键选择缩放比例),这次我们不是直接使用“按扭”连接界面,而是进行界面和界面之间的连线,如下图所示:
注意:100%的缩放是不能进行界面和界面之间的连线!
之后的操作和前面的一致,为了容易理解,我还是贴一下图:
选中“这条线”,在Storyboard Segue的Identifier指定一个标识符,后面我们会用到:
这时我们需要为按扭添加一个事件,为此需要同时显示Storyboard和.m文件,操作如下:
创建事件的操作和之前连线的操作一样:
为这个事件创建一个名字,然后点击Connect:
在事件里添加如下代码,把刚连线的Identifier传进去,sender一般为"self":
[self performSegueWithIdentifier:@"EasyCode" sender:self];
![](https://img.haomeiwen.com/i18883237/076662099229172a.png)
这样,就可以成功跳转了。
二、Storyboard界面传值
1. 使用prepareForSegue方法进行跳转:
我们创建两个类,PrepareViewController和ReceiveViewController
![](https://img.haomeiwen.com/i18883237/8882a0cf7dc94e15.png)
然后在Storyboard上新建两个ViewController,把两个界面连接起来。操作步骤和上方(代码跳转)的相同,这次我们把连线的Identifier定义为“SendValue”:
![](https://img.haomeiwen.com/i18883237/4c05a4f70d7a3346.png)
有按扭的界面的类设置为PrepareViewController,如下图所示:
![](https://img.haomeiwen.com/i18883237/e8b413b51471cc5a.png)
选择第二个界面,设置继承的类为ReceiveViewController:
![](https://img.haomeiwen.com/i18883237/a0c54d55a338750f.png)
ReceiveViewController.h:
#import <UIKit/UIKit.h>
@interface ReceiveViewController : UIViewController
@property (strong, nonatomic) NSString *name;
@property (assign, nonatomic) int age;
@end
ReceiveViewController.m
当然是要输出一下啦,不然怎么知道传值有没有成功:
#import "ReceiveViewController.h"
@interface ReceiveViewController ()
@end
@implementation ReceiveViewController
- (void)viewDidLoad {
[super viewDidLoad];
NSLog(@"name is %@, age is %d", _name, _age);
}
@end
PrepareViewController.m文件
#import "PrepareViewController.h"
#import "ReceiveViewController.h"
@interface PrepareViewController ()
@end
@implementation PrepareViewController
- (IBAction)goAction:(id)sender
{
// 根据指定线的ID跳转到目标Vc
[self performSegueWithIdentifier:@"SendValue" sender:self];
}
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
// segue.identifier:获取连线的ID
if ([segue.identifier isEqualToString:@"SendValue"]) {
// segue.destinationViewController:获取连线时所指的界面(VC)
ReceiveViewController *receive = segue.destinationViewController;
receive.name = @"Garvey";
receive.age = 110;
// 这里不需要指定跳转了,因为在按扭的事件里已经有跳转的代码
// [self.navigationController pushViewController:receive animated:YES];
}
}
@end
可以成功接收到值啦(大功告成):
![](https://img.haomeiwen.com/i18883237/ab46a56bf90d0aeb.png)
2. Storyboard Id跳转
继续拖两个纯净的界面(VC)到Storyboard上,第一个界面也是放上一个UIButton:
IdViewController是我刚新建出来的类,接收值的界面用回ReceiveViewController类,指定界面继承的类为(IdViewController、ReceiveViewController)
![](https://img.haomeiwen.com/i18883237/e0f05c3d1874d5f1.png)
![](https://img.haomeiwen.com/i18883237/08372c28baeb7f4c.png)
第二个界面设置Storyboard id为“IdReceive”,后面跳转会用到:
![](https://img.haomeiwen.com/i18883237/53fc41598fa68d87.png)
IdViewController.m
- (IBAction)action:(id)sender
{
// 获取指定的Storyboard,name填写Storyboard的文件名
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil];
// 从Storyboard上按照identifier获取指定的界面(VC),identifier必须是唯一的
ReceiveViewController *receive = [storyboard instantiateViewControllerWithIdentifier:@"IdReceive"];
receive.name = @"GC";
receive.age = 10;
[self.navigationController pushViewController:receive animated:YES];
}
可以运行程序了,能够成功接收到值,成功!
![](https://img.haomeiwen.com/i18883237/b527b3c1546e5c68.png)
小结:你们能否看出各个方法的优点和缺点?现在没发现不要紧,当你们以后遇上真正需要的时候,优缺点就很容易知道了,这也算是留给你们思考的一件事情吧。希望这篇文章能对大家所帮助,谢谢。
Demo下载地址:
http://pan.baidu.com/s/1bnCkydD