初探Storyboard

简介:
  • 创建一个基于Navigation Controller的根视图
  • 绑定跳转事件
  • 修改Navigation Bar标题
  • ViewController

    • ViewController之间的数据传递
    • ViewController之间的跳转
    • Storyboard之间ViewController的跳转
  • 常见问题
  • 学习感悟

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

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

  1. 首先,我们选中默认生成的View Controller,在Editor -> Embed In 中有Navigation ControllerTab 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:自定义的
  1. 我们选中第一个Cell,按住Control键拖拉到要跳转的视图,在弹出的选项窗中选择show,这样就完成了页面跳转操作。接下来2个Cell也是同样的操作。

修改Navigation Bar标题

  1. 在Table View Controller上中选中Navigation Item(图三)。
    图三
  2. Attributes inspectorTitle设置为“绘图技术”,将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。你可以通过UIStoryboardinstantiateViewControllerWithIdentifier:这个方法获取到它,然后再用你想要的方式实现跳转,如:压栈。
  3. 如果目标ViewController不存在,则需要我们创建好ViewController才能进行接下来的操作。

Storyboard之间ViewController的跳转

Storyboard被看作是一个视图的容器,存放所有视图,方便管理。
【情景】
当project里面有StoryboardOneStoryboardTwo两个故事板。要求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的第一启动界面
    
    ![图五](http://ww2.sinaimg.cn/mw690/81f8a509gw1ex9nxmhp09j20ec0sawhk.jpg)
    

学习感悟

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

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

图六
图七


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

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

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

目录
相关文章
|
7月前
|
C# 容器
浅谈WPF之UniformGrid和ItemsControl
在日常开发中,有些布局非常具有规律性,比如相同的列宽,行高,均匀的排列等,为了简化开发,WPF提供了UniformGrid布局和ItemsControl容器,本文以一个简单的小例子,简述,如何在WPF开发中应用UniformGrid和ItemsControl实现均匀的布局,仅供学习分享使用,如有不足之处,还请指正。
248 0
Storyboard\Xib中给UIScrollView的子控件添加约束
Storyboard\Xib中给UIScrollView的子控件添加约束
356 0
Storyboard\Xib中给UIScrollView的子控件添加约束
UIView添加圆角边框
UIView添加圆角边框
84 0
|
存储 开发工具 数据库
在 Xcode 5 的 Storyboard 中使用 UITableView
当我们最开始启动 iOS 编程课程的时候,我们写了一个关于 UITableView 的教程,展示了如何使用 UITableView 去创建一个简单的表格应用。这是我们最受欢迎的教程之一。然而,你可能会发现这个教程在 Xcode 5 下不适用了。最新版的 Xcode 促进了界面生成器(Interface Builder)中 Storyboard 的使用。Storyboard 不再是一个开发项目时的候选,它是默认的了。这是为什么那份教程不适用的原因之一。
232 0
在 Xcode 5 的 Storyboard 中使用 UITableView
|
C# Windows
WPF ItemsControl ListBox ListView比较
原文:WPF ItemsControl ListBox ListView比较 在进行列表信息展示时,WPF中提供多种列表可供选择。这篇博客将对WPF ItemsControl, ListBox, ListView进行比较。
1164 0
|
C#
WPF 可触摸移动的ScrollViewer控件
原文:WPF 可触摸移动的ScrollViewer控件 ListBox支持触摸滑动,而ScrollViewer默认不支持。 ScrollViewer如需要添加上下/左右触摸移动,需要在Touch事件中处理。
1904 0
|
C#
WPF中ControlTemplate和DataTemplate的区别
原文:WPF中ControlTemplate和DataTemplate的区别 下面代码很好的解释了它们之间的区别: ...
1584 0