Storyboard是Objective在XCode中的界面编辑利器,所见即所得。搭配上ARC的使用,在界面创作方面可谓如虎添翼。最近开始接触,所以打算写一个教程,从简单到复杂,慢慢深入Storyboard的使用。后面会配合Xib一起使用。
这篇文章先介绍Storyboard的简单视图跳转。本篇文章的结构:
1)新建工程2)完成主界面3)push方式跳转4)modal方式跳转5)总结
作者使用的是Xcode5.1.1,OS X 10.9.2。以下,正文。
1、新建工程
File->New->Project,选择SingleViewApplication,并写上自己工程名称,可以看到如下的工程列表。
(图1)
查看右上角,选择合适的选项,以查看正确的视图。
(图2)
点击工程中的Main.storyboard就可以开始编辑Storyboard了。
2、完成主界面
Xcode中间可以看到这么一个界面,里面显示的就是当前首个Controller对应的界面,直接运行就可以看到一个空的视图。
(图3)
双击这个视图,进入该视图的编辑状态。我们现在主界面上添加一个标签UILabel。方式是从右下角选择一个Label,并拖动到对应的界面上。
(图4)
可以任意地拖动这个Label的位置,修改它的内容。右边有该Label对应的属性,可以直接修改。即得到下面的画面。
(图5)
接下来,按照同样的方式,把两个按钮Button添加到视图中,得到下图。
(图6)
我这里把它们分别命名为Push和Modal,因为接下来我要用这两个按钮实现页面的跳转。还记得图2的那些选项吗?选择第二个,可以同时编辑视图和代码。选择Push按钮,按住Ctrl的同时拉拽到代码空余区域,生成按钮的事件。
(图7)
填入按钮名称,并确定,即可生成对应的代码。
(图8)
对Modal按钮进行同样的操作,得到下图所示代码。
(图9)
3、push方式跳转
在工程文件中新建控制器类PushViewController。在Storyboard中新建一个ViewController视图 (你可以在新建的视图上添加你喜欢的控件~)。在右边的Custom Class中写上PushViewController。这样,这个类和视图就可以联系在一起了。
选中初始化的ViewController,按住Ctrl的同时将鼠标拖拽到PushViewController上,在弹出的菜单上选择push。
(图10)
选中产生的那条连接线,在右边属性栏里将其Identifier设置为PushSegue。在ViewController里的pushButton事件里写上跳转的代码。
- (IBAction)pushButton:(id)sender
{
[self performSegueWithIdentifier:@"PushSegue" sender:sender];
}
运行项目,点击push按钮,发现程序崩溃!其实手打过界面代码的人都知道,push方式的跳转需要原来的ViewController是一个NavigationController。而这里,我们初始化的控制器就是一个简单的ViewController。
解决方法:1)选中初始化的控制器。2)在顶部菜单栏里选择:Editor->Embed In->Navigation Controller。也就是把该控制器包裹在NavigationController中。
(图11)
再运行代码,看到push的跳转方式了吗?
4、modal方式跳转
如果你足够聪明,相信你一定知道怎么用modal跳转了!以同样的方式在项目中创建一个ModalViewController和对应的视图,以拉拽的方式添加一个新的Segue并设置为Modal方式。同样的写上类似的代码,Modal跳转方式就完成啦~
这里要说的是Modal的四种方式:
(图12)
你可以分别设置,并尝试不同的表现形式,马上就知道这四种方式的区别了。
5、总结
跳转方式是Storyboard最常用的技巧,但这只是对跳转方式的简单掌握,还有更多可以深入了解的东西,比如传递数据等。以后会继续奉献上相关的教程。