Storyboard进行界面跳转及传值

末蓝、 2022-06-05 04:39 185阅读 0赞

一、使用Storyboard进行跳转

1）纯Storybard界面操作

2）使用代码进行跳转

二、Storyboard界面传值

1）使用prepareForSegue方法进行跳转：

2）Storyboard Id跳转

一、使用Storyboard进行跳转

1）纯Storyboard界面操作

我们在Storyboard上放置一个按扭，在按扭上方点击并按住“右键”不放，拖动到跳转的下一个界面上。

![181547007042730.png][]

松开右键后，会有一个黑色透明的弹出框，选择跳转的方式:

![181552304691774.png][]

从这里可以看到，界面和界面之间多了一条线连接，如下图：

![181621394237889.png][]

我们可以在Xcode右边的工具栏看到，我们刚刚的连线操作（现在可以运行项目了）：

![181603228131602.png][]

2）使用代码进行跳转

我们把刚刚的连线删除掉，如下图所示：

![181609072353657.png][]

新建一个继承于UIViewController的类CodeViewController：

![181613066734108.png][]

选中按扭所在的界面，设置它的类文件，默认都是继承于UIViewController，如下图所示：

![181612329232797.png][]

我们把它改成刚刚新建的类“CodeViewController”，如下图所示：

![181615240799753.png][]

把界面缩小（你可以在空白的地方双击一下，或者右键选择缩放比例），这次我们不是直接使用“按扭”连接界面，而是进行界面和界面之间的连线，如下图所示：

注意：100％的缩放是不能进行界面和界面之间的连线！

![181618130322135.png][]

之后的操作和前面的一致，为了容易理解，我还是贴一下图：

![181552304691774.png][]

选中“这条线”，在Storyboard Segue的Identifier指定一个标识符，后面我们会用到：

![181624397518680.png][]

这时我们需要为按扭添加一个事件，为此需要同时显示Storyboard和.m文件，操作如下：

![181636032668131.png][]

创建事件的操作和之前连线的操作一样：

![181634079073288.png][]

为这个事件创建一个名字，然后点击Connect：

![181634565167138.png][]

在事件里添加如下代码，把刚连线的Identifier传进去，sender一般为"self"：

[self performSegueWithIdentifier:@"EasyCode" sender:self];

![181726544383715.png][]

这样，就可以成功跳转了。

二、Storyboard界面传值

1）使用prepareForSegue方法进行跳转：

我们创建两个类，PrepareViewController和ReceiveViewController

![181707574388954.png][]

然后在Storyboard上新建两个ViewController，把两个界面连接起来。操作步骤和上方（代码跳转）的相同，这次我们把连线的Identifier定义为“SendValue”：

![181658340324964.png][]

有按扭的界面的类设置为PrepareViewController，如下图所示：

![181659331888636.png][]

选择第二个界面，设置继承的类为ReceiveViewController：

![181711286885826.png][]

ReceiveViewController.h：

![复制代码][copycode.gif]

#import <UIKit/UIKit.h>
    
    @interface ReceiveViewController : UIViewController
    
    @property (strong, nonatomic) NSString *name;
    @property (assign, nonatomic) int age;
    
    @end

![复制代码][copycode.gif]

ReceiveViewController.m，当然是要输出一下啦，不然怎么知道传值有没有成功：

![复制代码][copycode.gif]

#import "ReceiveViewController.h"
    
    @interface ReceiveViewController ()
    
    @end
    
    @implementation ReceiveViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        NSLog(@"name is %@, age is %d", _name, _age);
    }
    
    @end

![复制代码][copycode.gif]

PrepareViewController.m文件：

![复制代码][copycode.gif]

#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

![复制代码][copycode.gif]

可以成功接收到值啦（大功告成）：

![181730495323203.png][]

2）Storyboard Id跳转

继续拖两个纯净的界面（VC）到Storyboard上，第一个界面也是放上一个UIButton：

IdViewController是我刚新建出来的类，接收值的界面用回ReceiveViewController类，指定界面继承的类为（IdViewController、ReceiveViewController）

![181740210639842.png][]

![181740373136141.png][]

第二个界面设置Storyboard id为“IdReceive”，后面跳转会用到：

![181752211885078.png][]

IdViewController.m

![复制代码][copycode.gif]

- (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];
    }

![复制代码][copycode.gif]

可以运行程序了，能够成功接收到值，成功！

![181756121736079.png][]

小结：你们能否看出各个方法的优点和缺点？现在没发现不要紧，当你们以后遇上真正需要的时候，优缺点就很容易知道了，这也算是留给你们思考的一件事情吧。

[181547007042730.png]: /images/20220605/8de0a6d7132744bf878f685054601a9f.png
[181552304691774.png]: /images/20220605/96b141b86d734b6eb26796fef391ed54.png
[181621394237889.png]: /images/20220605/cf8013c5812f4fd4ba721ee43975d6f3.png
[181603228131602.png]: /images/20220605/755e2325021a4edeb34eff6a1e7647f5.png
[181609072353657.png]: /images/20220605/5f2370cf9b074e14b48c840f936be6cc.png
[181613066734108.png]: /images/20220605/bc5e316c8fbb4a9590d8aa72c8972784.png
[181612329232797.png]: /images/20220605/d00c705f9016457cbb1ad08caac98c8b.png
[181615240799753.png]: /images/20220605/ea2bb144ab0645109563a96eb90cc36f.png
[181618130322135.png]: /images/20220605/b03db268b35149d9a67a2186488eada1.png
[181624397518680.png]: /images/20220605/1cfd3f2616984c1d900dbb6b0391c144.png
[181636032668131.png]: /images/20220605/f79367a57a9049e0baccfd9b3ef958e1.png
[181634079073288.png]: /images/20220605/3c2b25f1bfa04e0186177c51c738ceae.png
[181634565167138.png]: /images/20220605/288e578757304c50b3d6878929e82d86.png
[181726544383715.png]: /images/20220605/a3e3356336724187a72aa0f34deb9eb8.png
[181707574388954.png]: /images/20220605/09a61fe3e62149afb460263720703c2c.png
[181658340324964.png]: /images/20220605/11697150714d4e2db25b8b529adc9590.png
[181659331888636.png]: /images/20220605/5b277a9a4272455fa3d3d234e0fda794.png
[181711286885826.png]: /images/20220605/957e0230feec4817b41a7570585ba0fa.png
[copycode.gif]: /images/20220605/6039a02a103b4449a1babb4857f4ae07.png
[181730495323203.png]: /images/20220605/6def19cf8b62473a9b8bf80294f53e81.png
[181740210639842.png]: /images/20220605/f4628e3074a34e7ea97349f167e49ef1.png
[181740373136141.png]: /images/20220605/dc8d1710c4854d8ab5dce4268f0e6162.png
[181752211885078.png]: /images/20220605/07cfa35d5f1f435ca2193ca460a9edb6.png
[181756121736079.png]: /images/20220605/323f73d46d0f42a8a14599877d0a7d44.png