storyboard进阶教程 搭建完整APP

相关例程:http://download.csdn.net/detail/q562679764/9272385
上一次我们讲解了如何使用storyboard,这次说一下如何利用storyboard搭建一个完整的APP
目标结构:
登陆界面:使用navigation跳转到注册界面或用户界面
注册界面:返回登陆界面
用户界面:包含两个界面 A和B AB使用tabbar跳转
界面A:使用navigation跳转到A1和A2
界面B:无操作
界面A1:返回登陆界面
界面A2:无操作
下面是效果图

首先 创建一个storyboard工程
因为登陆界面是使用navigation进行下一级的跳转的 所以我们要把根视图设为navigationController
切换到storyboard界面 使用delete键删除 拖拽一个navigationController 到视窗中,注意 是navigationController图标是黄色的然后把navigation自带的一个tableViewcontroller删除 只留下一个navigation

将is initial View controller选中 左边就会有一个箭头指向navigationController了 添加一个ViewController 到视图上 并将它设置成navigation的rootViewController

设置完成后 viewController上面会自动添加一个navigation Item 选中 它 将title设置成登陆 这样就完成登陆界面的创建了
再创建一个viewController 然后选中登陆界面 右键上方的黄色按钮 然后拖拽到新创建的ViewController上面 在弹出的选择框中选择push 然后再添加一个tab Bar Controller ;
tab Bar Controller 自带两个ViewController 选中登陆界面 使用push方式连接到tab Bar Controller 完成后的效果是这样的

现在虽然我们已经连线好了 但是还无法跳转,因为我们是通过controller的黄色按钮连接的,这样的连接方式不同于直接在按钮上连接,使用这样的连接方式,只是指定了视图间的跳转方式 至于何时跳转 我们需要在代码中定义
在登陆视图中添加两个button登陆和注册 并将登陆视图和入口类ViewController关联起来 连线button的方法到ViewController

接着 为登陆视图的两个segue设置标识符 一个设置成denglu 一个设置成zhuce
这个将作为我们跳转到那个视图的依据

切换到viewController的.M文件中 在button的方法中写入跳转代码

- (IBAction)zhuCe:(id)sender {    //通过segue的identifer来进行跳转 第一个参数要填上对应segue的identifier 如果错误将会崩溃    [self performSegueWithIdentifier:@"zhuce" sender:nil];}- (IBAction)dengLu:(id)sender {    [self performSegueWithIdentifier:@"denglu" sender:nil];}

这样就可以实现登陆界面跳转到注册和tabbarController了
由于注册是通过push跳转的自带返回按钮 所以不需要写返回方式了
下面是效果图

可以看到 我们只写了登陆界面的跳转 tabbarController的跳转我们并没有写代码 ,系统就自动为我们实现了
严格意义来说 我们只用了两行代码 就基本将这个工程的视图架构完成了,现在我们进行最后的一些步骤,为B增加一个二级视图 并使用navigation方式跳转 还要让B的二级视图能够返回登陆界面
首先 我们选中视图B

选择为B视图控制器增加一个navigation 接着 在B中添加一个Button 再拖拽一个新的ViewController 作为B的二级视图 在Itme中添加一个button 右键button 然后拖拽到二级视图上面 选择push 这样不需要写代码 点击按钮就可以直接跳转了 缺点是无法进行跳转前的判断
接着 我们为二级视图设置一个返回登陆界面的button, 将这个button使用modal连线到第一个navigationController .
这样 就完成了 下面是完成样板和效果图

下面是效果图:

关键点:
1.为什么根视图是navigationController?
和使用代码构造相同 如果视图想使用push方式跳转 必须有一个navigationController的实例 这样将main页面设置成navigationController的rootViewController之后 Main就可以使用push方式跳转到注册和登陆界面了,相当于写入了下面的代码

        UINavigationController * nav = [[UINavigationController alloc] initWithRootViewController:mainViewController];

2.什么时候直接使用按钮与视图连线 什么时候使用视图与视图连线?
如果不需要在跳转页面之前进行操作,可以直接使用按钮与视图连线,如果需要进行一些操作之后再跳转或者直接取消跳转 则使用视图与视图连线,并设置连线的identifier,在按钮的事件方法中写入跳转方法:

- (IBAction)zhuCe:(id)sender {- //这里可以写入一些跳转前的操作    if (跳转条件){    [self performSegueWithIdentifier:@"identifier" sender:nil];    }}

3.最后从B1跳转到main页面的时候为什么选择modal?
这是测试过的结果,使用其他方式跳转要么携带navigationBar要么携带tabbar,这样就违背了我们返回主界面的要求,看下使用show的效果:

4.为什么连线的时候跳转方式选项很少? 如图中1的样子 而不是图2的样子?

这是因为关闭了auto layout的选项 打开就可以了

PS: 使用storyboard确实方便了很多 但是缺点也很多,一个看似无害的设置可能就会造成想象不到的奇怪效果,对于出现问题后的调试造成很大的阻碍,因为你很难找到问题的关键,尤其是代码写完之后,你不但需要排查代码还要去梳理storyboard中的关系