IOS开发之使用Storyboard实现复杂界面
白羽 2018-06-15 来源 :网络 阅读 1490 评论 0

摘要:本文将带你了解IOS开发之使用Storyboard实现复杂界面,希望本文对大家学IOS有所帮助。


Storyboard是IOS5以后新增的内容,从名字上看,是以故事面板的形式来展现界面间的逻辑关系,Storyboard的功能很强大,今天就简要介绍Storyboard的基本使用,界面间的关系,以及如何使用xib和Storyboard共同使用的情况。

首先新建一个Empty工程,并新建一个Storyboard,我命名为MainStoryboard,以下是完整的工程目录结构:

 IOS开发之使用Storyboard实现复杂界面

打开MainStoryboard后拖入一个UITabViewController,并设置两个tab为UINavigationController,第三个tab设置一个ViewController。关联的方式为按住control点击鼠标左键拖动到目标界面即可,松开鼠标后点击如下第一个选项:

 IOS开发之使用Storyboard实现复杂界面

最后在UINavigationController上分别添加Next按钮,同样按住control键点击拖动到下一个界面松开选择push就完成了跳到下一页的功能,这比之间在代码中手写要方便、快捷。第一个Storyboard的整体布局如下:

 IOS开发之使用Storyboard实现复杂界面

在最后一个ViewController中(Third)中添加按钮,点击后跳到另外一个Storyboard(SecondStoryboard),SecondStoryboard的布局如下:

IOS开发之使用Storyboard实现复杂界面

 

同样给SecondStoryboard添加一个导航视图。

然后新建几个ViewController文件,分别命名为FirstViewController、SecondViewController。。。,并在storyboard中选中指定的界面关联这些ViewController文件:IOS开发之使用Storyboard实现复杂界面

 

接下来就是主要实现的代码,在AppDel额gate中添加如下代码:

[cpp] view plain copy

1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  

2. {  

3.     self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];  

4.     // Override point for customization after application launch.  

5.       

6.     //使用Storyboard初始化根界面  

7. //    UIStoryboard *storyBoard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];  

8. //    self.window.rootViewController = [storyBoard instantiateInitialViewController];  

9.       

10.     //启动后首先进入登陆界面  

11.     LoginViewController *loginViewController = [[LoginViewController alloc] initWithNibName:@"LoginViewController" bundle:nil];  

12.     self.window.rootViewController = loginViewController;  

13.       

14.     self.window.backgroundColor = [UIColor whiteColor];  

15.     [self.window makeKeyAndVisible];  

16.     return YES;  

17. }  


现在编译运行后,就可以看到界面了:

 IOS开发之使用Storyboard实现复杂界面

然后打开ThirdViewController,为按钮添加如下事件,切换到SecondStoryboard

[cpp] view plain copy

1. - (IBAction)openStoryboard:(id)sender {  

2.     UIStoryboard *secondStoryboard = [UIStoryboard storyboardWithName:@"SecondStoryboard" bundle:nil];  

3.     [self presentModalViewController:[secondStoryboard instantiateInitialViewController] animated:YES];  

4. }  


这样就完成了从一个storyboard切换到另一个storyboard。

运行截图如下:

    IOS开发之使用Storyboard实现复杂界面   

接下来实现如何结合xib和storyboard共同使用,在一般开发中有这么一种场景,首先打开软件后进入登陆或者注册界面,登陆成功后跳转到软件首页,那么这里建立一个LoginViewController并创建LoginViewController.xib文件,里面添加一个Login按钮,并响应事件:

[cpp] view plain copy

1. <span style="font-family:Comic Sans MS;font-size:18px;">- (IBAction)loginBtnClicked:(id)sender {  

2.     //点击登陆按钮后切换到storyboard界面  

3.     UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard" bundle:nil];  

4.   

5. //    self.view.window.rootViewController = [storyboard instantiateInitialViewController];  

6.     [self presentModalViewController:[storyboard instantiateInitialViewController] animated:YES];  

7.       

8.     [storyboard release];  

9. }</span>  


点击Login按钮后,就跳转到之前实现Storyboard的首页了:

 IOS开发之使用Storyboard实现复杂界面

 

以上实现了Storyboard的基本使用,以及结合xib的使用,代码没有上全,实现细节请参照源码。

 


本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之IOS频道!


本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程