可视化编程之Storyboard

1 StoryBoard到底是什么?

如上图所示,就是我们一直在说的Storyboard,创建项目的时候选择Single View Application

模板,我们就可以默认得到一个控制器类ViewController.h/.m和一个Main.storyboard文件,Main.storyboard文件就是的故事板(Storyboard),在这里可以操作我们的几乎所有的控制器。

Storyboard中存在的不仅仅是View那么简单的概念,而是放置了一个ViewController的概念。也就是说,我们在可视化页面中,除了可以在页面中操作视图之外,我们还可以在页面中操作控制器的一些设置等等。

Storyboard就是把很多的Xib文件添加到了一个文件中,让我们可以在一个文件中操作所有视图,更加的方便和快捷。同时,我们还可以设置页面之间的联系。展示程序页面之间的逻辑关系

不同的是,Xib中代表的仅仅是View,Storyboard中代表的是控制器

2 StoryBoard与xib相比较的优势与劣势?

Xib的和纯代码开发相比起来优势已经很明显了:方便、快速、直观。。。可以帮我们提高工作效率,节省开发时间。

Storyboard和xib比起来,除了拥有Xib拥有的优势外,它还有自己的优势。

方便、快速、直观
显示各个控制器之间的顺序关系
快速设置控制器的一些属性

3 如何使用

3.1 单独创建Stioryboard文件

cmd + N,选择User Interface->StoryBoard

创建之后如何让程序去加载呢,在这里设置下:选中项目->General->Main Interface,在Main Interface输入storyboard文件名

设置好了之后,程序启动后就会自动加载我们的Stroyboard文件了

3.2 Storyboard中那么多控制器,哪个是根视图控制器?

Storyboard中可以包含很多的视图控制器,那到底哪个是根视图控制器呢?注意,这里不需要我们去写代码声明。只需要勾选就OK了。

视图控制器左侧的小箭头就表示当前的为根视图控制器,设置的位置就是右侧Is Initial View Controller的复选框。

小箭头也可以直接拖动,可以从一个控制器拖到另一个控制器上,这样就更改了根视图控制器。

3.3 添加新的视图控制器和关联


从右下角直接找到View Controller拖到Stroyboard,这样就创建了一个视图控制器,但是需要和ViewController.h/.m进行关联,

Class中输入对应的控制器的名称,这样就进行了关联,怎么样,比Xib简单吧。

3.4 使用Segue

Segue,就是我们在storyboard中看到的那些线,相对应的类是UIStoryboardSegue,segue的作用就是可以表示出控制器之间的跳转关系,并且,是可以直接实现跳转的。
在一个控制器中拖入一个UIButton,然后按住Control按钮,从button上拖到另外一个控制器中,

松手后可以看到弹出这样一个HUD:

最下面的两个,push和modal大家都认识,一个是导航控制器的跳转页面,另一个是模态的效果。

大家也可以发现,已经被deprecated掉了,所以我们不应该再去使用。

解释下最新的:

show:相当于push,但是有一个好处:如果没有导航控制器,跳转的方式就是模态,如果存在导航控制器,就是push的效果。

show detail:相当于modal。

我们选择show,这样可以看到一条线:

这条线就是segue,代表了转场。(segue的使用后期再做详细介绍)

这样搞定之后,我们就实现了页面之间的跳转,都不需要写代码。

3.5 设置代理

如果我们添加了tableView到视图中,我们不需要写代码,可以直接设置代理:

按住Control,从tableView拖到对应的控制器上,松手后会看到:

可以看到dataSource和delegate,把两个都选中就代表我们设置了tableView的代理为当前的视图控制器。选中的代理项会在前面出现小点点,就比如dataSource。

3.6 给控制器添加导航控制器或者标签控制器

选中一个控制器,然后去菜单栏:Editor->Embed In->Navigation Controller

我们选中控制器可以将当前控制器装载到控制器中,当我们选中几个View的时候,我们也可以装载到View或者ScrollView中,非常的方便。

建议大家在个人项目中使用Storyboard,

团队项目的时候使用Xib,

总之就是尽量使用可视化编程,提高我们的工作效率。