Storyboards Tutorial 01

Storyboarding 是在ios 5时候引进入的一个非常出色的特性。节省了为app创建user interfaces的时间。

如果你的app有多个屏幕storyboards可以帮助你降低代码的粘合度。比如从一个屏幕进入到另外一个屏幕。不会为每一个view controller使用单独的nib文件。你的app将只使用一个storyboard就可以包含所有这些view controllers的设计和关系。

storyboard有很多优势：

可以对所有app中的屏幕以及他们之间的关系有个更好的概念上的概览。更容易跟踪一切因为整个设计是在单独的一个文件中。而不是分成多个独立的nib文件。

storyboard描述了不同屏幕间的传输。这些传输称为segues并且只要通过简单的ctrl-dragging从一个view controller到另一个就可以建立了。由于segues的存在减少了代码量

storyboard使得table view的设计和使用更加方便。包含了cels和static sells features和属性。

还可以讲storyboard和nib文件混用

Storyboards tutorial: iOS 7 style

打开xcode创建新的工程，使用single view applicaiton模版。

并填写如下的选项

• Product Name: Ratings
• Organization Name: fill this in however you like
• Company Identifier: the identifier that you use for your apps, in reverse domain notation
• Class Prefix: leave this empty
• Devices: iPhone

之前版本的xcode需要特别指出是否使用storyboards，但是xcode5不再有这个选项，storyboards默认可用。

创建完成后是下面这个样子：

新的工程有两个class，AppDelegate和ViewController. Main.storyboard文件，并且没有nib文件

这是一个只支持竖屏显示的app，所以需要在Deployment Info, Device Orientation 下面 uncheck Landscape Left和Landscape Right选项

打开Main.storyboard文件，在iphone中每次只有一个scene是可视的，但是在ipad中可以一次展示多个，例如master和detail panes或者popover content

Note: Xcode 5 enables Auto Layout by default for storyboard and nib files. Auto Layout is a cool new technology for making flexible user interfaces that can easily resize, which is useful on the iPad and for supporting the larger iPhone 5, but it only works on iOS 6 and up. It also has a bit of a learning curve, which is why you’re not using it in this tutorial. To learn more about Auto Layout, see our books iOS 6 by Tutorials and iOS 7 by Tutorials.

Dock显示了在这个scene中的top-level objects.每一个scene至少有一个view controller object,一个First Responder object和一个Exit item. 但是可以暗含其他的top-level objects. Dock方便使用connections to outlets和actions.如果你需要连接什么到view controller，你可以尝试简单drag他在dock中的图标。

Note: You probably won’t be using the First Responder very much. This is a proxy object that refers to whatever object has first responder status at any given time. It was also present in your nibs and you probably never had a need to use it then either. As an example, you can hook up the Touch Up Inside event from a button to First Responder’s cut: selector. If at some point a text field has input focus then you can press that button to make the text field, which is now the first responder, cut its text to the pasteboard.

如果你之前使用过nib app那么总是会有一个MainWindow.xib的文件。这个nib文件包含了top－level UIWindow object.一个app delegate的引用和一个或者多个view controllers。当你使用storyboard含纳你的app ui时，MainWindow.xib不再使用。那么storyboard又是如何被app加载的呢？

应用程序代理，打开AppDelegate.h可以看到：

这是个使用storyboards的要求，你的应用程序delegate需要继承自UIResponder并且有一个UIWindow的属性。如果查看AppDelegate.m,你会看到什么都没有。秘密在Ratings-Info.plist 文件中。

storyboards app使用关键字UIMainStoryboardFile或者Main storyboard file base name来指定当app启动时必须加载的storyboard名字。

当这个设置后，UIApplication在加载这个storyboard文件的时候会自动初始化这个storyboard中的第一个view controller，然后把它的views放到一个新的UIWindow object中去。这些都不需要自己写代码。在Project Settings窗口中的Deployment Info中也可以看到这个。

在main.m文件中，

app delegate不是storyboard的一部分。你必须传递app delegate class的名字到UIApplicationMain(),否则无法找到它。

Just Add It To My Tab

这个Rating app有一个tabbed interface包含两个屏幕。利用storyboard非常容易创建这个tabs。

打开Main.storyboard,并且拖放一个Tab Bar Controller有两个view controllers附带。

两个view controllers每个对应一个tab。UITabBarController之所以称为container view controller是因为它包含一个或者多个view controllers.

container 关系被Tab Bar Controller和view controllers之间的arrows代表着。

Note: If you want to move the Tab Bar Controller and its attached view controllers as a group, you can ⌘-click to select multiple scenes and then move them around together. (Selected scenes have a thick blue outline.)

drag一个label到第一个view controller中并且设置文本为"First Tab".并且拖一个label到第二个view controller中去并命名为"Second Tab".

选择tab bar controller并且进到Attributes inspector中勾选box "Is Initial View Controller".

这时候会发现之前指向regular view controller的箭头指向了tab bar controller

这表明当你启动app的时候，UIApplication会讲tab bar controller包含进main screen. storyboard总是有一个单独的view controller被设计成initial view controller,即storyboard的入口点

Tip: To change the initial view controller, you can also drag the arrow between view controllers. 也可以拖拉箭头来指定initial view controller

运行app后的效果：

Note: If you connect more than five scenes to the Tab Bar Controller, it automatically gets a More… tab when you run the app. Pretty neat!

如果你连接了超过5个屏幕到tab bar controller，它会自动得到一个more的tab，非常灵巧