初探Storyboard

• 创建一个基于Navigation Controller的根视图
• 绑定跳转事件
• 修改Navigation Bar标题
• ViewController
  • ViewController之间的数据传递
  • ViewController之间的跳转
  • Storyboard之间ViewController的跳转
• 常见问题
• 学习感悟

以前一直使用xib，后来来到新公司就使用纯代码。从来没有用过Storyboard（中文称故事板），今天趁有几分兴致，在学习绘图的同时练练故事板。这里做一下笔记，方便以后查看。如果大家有什么Storyboard使用技巧可以留言分享哟！

创建一个基于Navigation Controller的根视图

1. 首先，我们选中默认生成的View Controller，在Editor -> Embed In 中有Navigation Controller和Tab Bar Controller两个选项（图一），我们选择嵌入Navigation Controller。
   

2. 另外拖一个Table View Controller到故事板中，选中Table View Controller的Table View。打开Attrbutes inspector，将Content设置为Static Cells，layout area中的Table View上出现了3个Cell。

3. 我们依次给每一个Cell设置不同的背景颜色，并依次选中3个Table View Cell，然后在Attributes inspector中将他们的Style改成Basic并给每一个Cell设置标题（图二）。
   

---

绑定跳转事件

1. 脑补时刻，先讲解一下一些关键的跳转事件

   • Selection Segue：当用户点击table view cell的任何部分，都会产生反应。
   • Accessory Action：只有当用户点击table view cell右边的圆圈箭头按钮时，才会产生的反应。
   • Show：在master或detail区域展现内容(典型的如iPad的设置界面，左侧是master，右侧是detail)，究竟是在哪个区要取决于屏幕上的内容，如果不分master/detail，就单纯的把新的内容push到当前view controller stack的顶部
   • Show Detail：大致同Show，在detail区域展现内容，如果不分master/detail，新的内容取代当前view controller stack的顶部
   • Present Modally：模态展示内容
   • Present as Popover：在当前的view上出现一个小窗口来展示内容，无处不在的“选中文字后出现 复制/翻译 按钮就是这个
   • Custom：自定义的

2. 我们选中第一个Cell，按住Control键拖拉到要跳转的视图，在弹出的选项窗中选择show，这样就完成了页面跳转操作。接下来2个Cell也是同样的操作。

---

修改Navigation Bar标题

1. 在Table View Controller上中选中Navigation Item（图三）。
   

2. 将Attributes inspector中Title设置为“绘图技术”，将Back Button设值为“绘图”（图四）。
   

注意，这里的Back Button并不是显示在当前的Navigator Bar上的，而是显示在下一个sub view controller的navigator bar上的返回按钮的文字

---

ViewController

ViewController之间的数据传递

当你从当前scene中触发一个segue的时候，系统会自动调用prepareForSegue:sender:这个方法。如果你想从一个界面切换到里另一个界面的时候传递数据，你应该override这个方法。
比如：
视图A -> 视图B

- (void)prepareForSegue:(nonnull UIStoryboardSegue *)segue sender:(nullable id)sender {
    ThreeViewController *b_vc = segue.destinationViewController;
    //我们传递了一个字符串到视图B
    b_vc.str = @"dataStr";

    //更多功能
    //源视图控制器(当前控制器)
    [segue sourceViewController];
    //目标视图控制器
    [segue destinationViewController];
    //过渡标识
    [segue identifier];
}

ViewController之间的跳转

在上文中我提及到通过绑定事件进行ViewController之间的跳转。这里罗列一下有三种情况可进行跳转：

1. 如果在Storyboard中当前的ViewController和要跳转的ViewController之间的segue存在，则可以执行performSegueWithIdentifier:sender:这个方法实现跳转。

2. 如果目标ViewController存在Storyboard中，但是没有segue。你可以通过UIStoryboard的instantiateViewControllerWithIdentifier:这个方法获取到它，然后再用你想要的方式实现跳转，如：压栈。

3. 如果目标ViewController不存在，则需要我们创建好ViewController才能进行接下来的操作。

Storyboard之间ViewController的跳转

Storyboard被看作是一个视图的容器，存放所有视图，方便管理。
【情景】
当project里面有StoryboardOne和StoryboardTwo两个故事板。要求Storyboard之间的ViewController需要进行交互时（我们在StoryboardOne里面的ViewControllerOne要跳转到StoryboardTwo里面的ViewControllerTwo），可使用以下方式进行跳转：

//这个是ViewControllerOne里面Button绑定事件的代码
- (IBAction)buttonActoin:(id)sender {
    UIStoryboard *sb = [UIStoryboard storyboardWithName:@"StoryboardTwo" bundle:nil];
    //Identifier为‘ViewControllerTwo’在Storyboard里面设置的StoryboardId
    UIViewController *vc = [sb instantiateViewControllerWithIdentifier:@"ViewControllerTwo"];
    [self.navigationController pushViewController:vc animated:YES];
}

常见问题

1. 在使用storyboard时，报错：Failed to instantiate the default view controller for UIMainStoryboardFile ‘MainStoryboard’ - perhaps the designated entry point is not set?

   原因分析：在StoryBoard中没有一个view controller设置了Initial Scene。

   解决方案：在Storyboard中，选择一个view conroller作为story board的第一启动界面

   

---

学习感悟

在学习Storyboard过程中，慢慢有所感悟，在这里记录一下。可能我说的不一定是最好的，但是会再学习的过程中慢慢提升。

1. 当Storyboard中如果VC的数量越来越多的时候，可能会出现一种情况就是，用户要定位到某一个VC比较困难。所以我在每一个VC的Title属性都设置成该VC的类名（图五），方便以后可直接在Document Outline界面定位（图六）
2. 待续…

---

暂时就讲这些，后面会将文章补全。

再一次感谢您花费时间阅读这篇文章！

微博： @Danny_吕昌辉
博客： SuperDanny

赏

谢谢你请我吃糖果

支付宝

微信