IOS开发之Storyboard应用

转载 2015年07月08日 00:09:13

(Storyboard)是一个能够节省你很多设计手机App界面时间的新特性,下面,为了简明的说明Storyboard的效果,我贴上本教程所完成的Storyboard的截图: 


现在,你就可以清楚的看到这个应用究竟是干些什么的,也可以清楚的看到其中的各种关系,这就是Storyboard的强大之处了。如果你要制作一个页面很多很复杂的App,Storyboard可以帮助你解决写很多重复的跳转方法的麻烦,节省很多时间,以便你能够完全的专注于核心功能的实现上。 

开始 
首先启动Xcode,新建一个工程,我们在这里使用Single View App Template,这个模板会提供一个类和一个Storyboard,免去我们自己创建的麻烦。 

创建完成之后,Xcode的界面大概是这样的


这个新的工程由两个类:AppDelegate和ViewController以及一个Storyboard组成(如果你选择了两个设备会有两个Storyboard),注意这个项目没有xib文件,让我们首先看看Storyboard是什么样的,双击Storyboard打开他: 


Storyboard的样子和工作方式都和Interface Builder(以下简称为IB)像极了,你可以从左下方的控件库中拖动控件到你的View之中并且组织他们的排放顺序,唯一不同的地方就是,Storyboard不止是包含一个视图控件,而是所有的视图控件以及他们之间的关系。 


Storyboard对一个视图的官方术语是一个场景,但是一个场景其实就是一个ViewController,在iPhone中一次只能够展示一个场景,而在iPad中一次可以展示多个场景,比如Mail应用程序。 

通过尝试添加一些控件,你可以感受一下Storyboard的工作方式。 


这个是数据显示器,显示所有场景及其控件的结构。


在IB中,这个位置显示的是你的NIB文件中的文件,而在Storyboard中这里显示的是ViewController,目前这里只有一个ViewController,我们接下来可能会增加一些。 

这是一个文档管理器的缩小版,叫做dock。 


Dock展示场景中第一级的控件,每个场景至少有一个ViewController和一个FirstReponder,但是也可以有其他的控件,Dock还用来简单的连接控件,如果你需要向ViewController传递一个关系时,只需要将其按住Ctrl键拖到ViewController上就可以了。 

Note:你大概不会太长使用FirstResponder,因为它只是一个代理控件,代表着当前你所使用的控件。 

现在运行这个应用,他会向我们设计的界面一样。


如果你以前制作过NIB型的应用的话,你也许回去寻找MainWindow.xib ,这个文件包括所有的ViewController,Appdelegate等等,但是在Storyboard中这个特性已经被废止了。 


那么,没有这个文件,应用从那里起始呢? 

让我们打开AppDelegate文件,看看那上面是怎么说的: 

Java代码  收藏代码
  1. #import <UIKit/UIKit.h>  
  2.   
  3. @interface AppDelegate : UIResponder <UIApplicationDelegate>  
  4.   
  5. @property (strong, nonatomic) UIWindow *window;  
  6.   
  7. @end  

如果要使用Storyboard特性,那么AppDelegate必须继承自UIResponder类, 之前则是继承自NSObject类的,而且必须有一个不是UIOutlet类的Window属性声明才可以。 

如果你再去看AppDelegate的执行文件,里面大概什么都没有,甚至连 application:didFinishLaunchingWithOptions: 也只是返回了一个 YES,而之前,这里则需声明一个ViewController并且将他设置成起始页面,但是现在这些都没有了。 

秘密就在info.plist文件中, 打开Ratings-Info.plist (在 Supporting Files group里) 你就会看到这些: 


在NIB为UI的应用里,info.plist文件中有一个键兼做NSMainNibFile,或者叫做Main nib file base name,他用来指示UIApplication载入MainWindow.xib,并且将他与应用链接起来,而现在这个键值消失了。 

而Storyboard应用则利用 UIMainStoryboardFile,或者 “Main storyboard file base name” 键值来表示当App初始化时的Storyboard名称,当程序运行时,UIApplication会使用MainStoryboard.sotryboard作为第一加载项,并且将他的UIWindow展示在屏幕上,不需要任何编程工作。 

在项目总结面板上,你也可以看到并且编辑这些信息: 


如果你还想设置nib文件的话,另外有地方去设置的。 

为了完成这个实验性的小程序,我们打开main.m,加入 

Java代码  收藏代码
  1. #import <UIKit/UIKit.h>  
  2.   
  3. #import "AppDelegate.h"  
  4.   
  5. int main(int argc, char *argv[])  
  6. {  
  7.     @autoreleasepool {  
  8.         return UIApplicationMain(argc, argv, nil,  
  9.             NSStringFromClass([AppDelegate class]));  
  10.     }  
  11. }  

之前是UIApplicationMain()的函数现在是空的, 变成了 NSStringFromClass([AppDelegate class]). 

与之前使用MainWindow.xib的一个最大的不同是:现在app delegate已经不是Storyboard的一部分了,这是因为app delegate不再从nib文件中,而侍从Storyboard中加载了,我们必须告诉 UIApplicationMain 我们的app delegate类的名字是什么,否则他将无法找到。 





制作一个Tab类型的应用 

本教程中的Rating App拥有两个Tab,在Storyboard中,很轻松就能够做出一个Tab视图。 

回到MainStoryboard.storyboard中,直接从左边的Library拖进来一个TabViewController就可以了。 

新的Tab Bar Controller附带了两个View controller,分别作为Tab的视图使用,UITabBarController被称为包含视图,因为他包含这其他一些View,其他常见的包含视图还有那vi嘎提鸥鸟 Controller和SplitView Controller。 

在iOS 5中,你还可以自己写一个自定义的Controller,这在以前是做不到的。 

包含关系在Storyboard中用一下这种箭头表示。 


拉一个Label控件到第一个子试图中,命名为“First Tab”,再在第二个子视图中添加一个Label,命名为“Second Tab”。 

注意:当屏幕的缩放大于100%时,你无法在单个场景中添加控件。 

选中Tab Bar Controller,进入属性检查器,选中“作为起始场景”,如下图: 


现在那个没有头的虚虚的小箭头指向了Tab Bar Controller,说明他是起始场景。 


这意味着,当你启动这个应用的时候,UIApplication将会将这个场景作为应用的主屏幕。 

Storyboard一定要有一个场景是起始场景才行。 

现在运行试试吧 


code专门为创造这种Tab Bar的应用准备了一个模板,我们也可以使用他,但是自己有能力不用模板自己做一个Tab Bar也是不错的事。 

如果你添加了多于五个子视图到一个TabBarcontroller的话,并不会创造五个Tab,第四个tab会自动变成More标签,不错吧 


IOS开发之Storyboard应用

(Storyboard)是一个能够节省你很多设计手机App界面时间的新特性,下面,为了简明的说明Storyboard的效果,我贴上本教程所完成的Storyboard的截图:  现在,你就可以...

IOS开发学习笔记(六)——多视图应用程序之StoryBoard实践

StoryBoard是iOS开发中重要的角色,可以实现可视化的程序页面切换逻辑控制。下面我们通过简单的例子来看看StoryBoard的使用方法。 我们新建一个SingleViewAp...

iOS开发之xib或storyboard上给UIScrollView添加子控件约束报错的问题

当我们在xib或者storyboard中添加UIScrollView并像给其他控件设置约束一样设置好约束后(例如top,leading,tralling,bottom都为0),显示一切正常,如图:但是...

iOS开发教程:Storyboard全解析

  • 2014年05月29日 14:10
  • 3.62MB
  • 下载

iOS开发教程:Storyboard全解析2

  • 2014年05月29日 14:10
  • 1.54MB
  • 下载

为什么iOS开发不需要Storyboard

为什么iOS开发不需要Storyboard? 发表于15小时前|1513次阅读| 来源Martin Normark's Blog|10 条评论| 作者Martin H. Normark ...

iOS开发之storyboard的小技巧

本文主要介绍在storyboard中预览UI在不同分辨率屏幕上的运行效果
  • shxwork
  • shxwork
  • 2015年12月03日 14:28
  • 187

iOS开发教程:Storyboard全解析-第二部分

如果你想了解更多Storyboard的特性,那么你就来对了地方,下面我们就来接着上次的内容详细讲解Storyboard的使用方法。 在上一篇《iOS开发教程:Storyboard全解析-第一部分...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IOS开发之Storyboard应用
举报原因:
原因补充:

(最多只允许输入30个字)