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文件，看看那上面是怎么说的：?

?
在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，加入?

?
新的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标签，不错吧?




制作一个表格视图?

目前连接到Tab bar Controller的视图都是普通的View Controller，现在，我要用一个TableViewController来代替其中的一个ViewController。?

单击第一个视图并删除，从Library中拖出一个TableViewController。?
?
在选中这个TableViewController的前提下，从Library中拖出一个NavController，将会直接附着在上面。?
?
当然也可以调换顺序，我完全没意见。?

由于NavController和TabBarController一样也是一个包含控制器视图，所以他也必须包含另一个视图，你可以看到同样的箭头连接者这两个View。?
?
请注意所有嵌套在NavController下的View都会有一个Navigation Bar，你无法移除它，因为他是一个虚拟的Bar。?

如果你检视属性检测器，你就会发现所有bar的属性都在一起：?
?
“Inferred”是Storyboard中的默认设置，他意味着继承的关系，但是你也可以改变他。但是请注意这些设置都是为了让你更好的进行设计和这样设置的，随意修改默认设置会带来不可遇见的后果，施主自重。?

现在让我们把这个新的场景连接到Tab Bar Controller中，按住Ctrl拖动，或者右键。?
?
当你放手的时候，一个提示框会出现。?
?
当然是选第一个了，Relationship – viewControllers ，这将自动创建两个场景之间的关系。?
?
?
直接拖动就可以改变Tab Item的顺序，同时也会改变显示Tab的顺序，放在最左边的Tab会第一个显示。?

现在运行试试看吧?
?
在我们在这个应用中加入任何实质性的功能之前，我们先来清理一下Storyboard，你不需要改变TabBarController中的任何内容而只需要改变他的子视图就可以了。?

每当你连接一个新的视图到TabBarController中的时候，他就会自动增加一个Tab Item，你可以使用他的子视图来修改该Item的图片和名称。?

在NavController中选中Tab Item并且在属性编辑其中将其修改为Player。?
?
将第二个Tab Item命名为“Gesture”?

我们接下来把自定义的图片加入到这些item中， 源码 中包含一个名为“Image”的文件夹，在那里你可以找到我们用到的资源。?

接下来，将NavController的title改为Player，也可以使用代码··?
?
运行看一看，难以置信吧，你到现在也没写一条代码。?
?





原型表格单元?

你也许已经注意到了，自从我们加入了Table View Controller之后，Xcode便会现实下面这样一条警告。?
?
这条警告是：“Unsupported Configuration: Prototype table cells must have reuse identifiers”意思是，原型表格单元必须有一个身份证（意译啦）?

原型单元格是另一个Storyboard的好特性之一。在之前，如果你想要自定义一个Table Cell，那么你就不得不用代码来实现，要么就要单独创建一个Nib文件来表示单元格内容，现在你也可以这样做，不过原型单元格可以帮你把这一过程大大的简化，你现在可以直接在Storyboard设计器中完成这一过程。?

Table View现在默认的会带有一个空白的原型单元格，选中他，在属性控制器中将他的Style改为subtitle，这样的话，每一格就会有两行字。?
?
?
将附件设置为Disclosure Indicator并且将这个原型单元格的Reuse Identifier 设置喂“PlayerCell”，这将会解决Xcode所警告的问题。?

试着运行一个，发现什么都没变，这并不奇怪，因为我们还没有给这个表格设置一个数据来源（DataSource），用以显示。?

新建一个文件，使用UIViewContoller模板，命名为 PlayersViewController ，设置喂UITableViewController的子类，不要勾选建立XIB文件。?

回到Storyboard编辑器，选择Table View Controller，在身份控制器中，把他的类设置为PlayerViewController，这对于把Storyboard中的场景和你自定义的子类挂钩是十分重要的。要是不这么做，你的子类根本没用。?
?
现在起，当你运行这个应用时，table view controller其实是PlayersViewContoller的一个实例。?

在 PlayersViewController.h 中声明一个MutableArray（可变数组）?

?
请注意：我们这里只使用一种单元格原型，如果你需要使用不同类型的单元格的话，只需要在storyboard中另外加入一个单元格原型就可以了，不过不要忘记给他们指派不同的身份证。?




设计自定义的原型单元格?

对于很多应用来说，使用默认的单元格风格就OK了，但是我偏偏要在每一个单元格的右边加上一个一个图片来表示选手的评级，但是添加图片对于默认类型的单元格来说并不支持，我们需要自定义一个设计。?

让我们转回MainStoryboard.storyboard，选中table view中的prototype cell，把它的Style attribute改为Custom，所有默认的标签都会消失。?

首先把单元格变得更高一些，你可以直接拉它，也可以在大小控制器中修改数字，我在这里使用55点的高度。?

从 Objects Library中拖出两个标签物体，按照之前的样式安插到单元格里，记得设置label的Highlighted颜色为白色，那样的话当单元格被选中的时候会看起来更好看一些。?

之后添加一个Image View对象，将它放置在单元格的右边，设置他的宽度为81点，高度并不重要，在属性检查器中设置模式为置中。?

我把标签设置为210点长以确保他不会和ImageView重合，最后整体的设计会看起来象下面这样：?
?
由于这是一个自定义的单元格，所以我们不能够使用UITableView默认的textLabel和detailLabel来设置数据，这些属性也不再指向我们的单元格了，我们使用标签（tags）来指定标签。?

将Name标签的tag设置为100，Game的设置喂101，image的设置喂102，在属性检查器里设置哦亲。?

之后打开 PlayersViewController.m ，在PlayersViewcontroller中将cellForRowatIndexPath修改为：?

?
这和我们想象的结果并不是很符合，我们修改了原型单元格的属性和高度，但是table view却没有考虑进去，有两种方法可以修复它，我们可以改变table view的行高或者加入 heightForRowAtIndexPath 方法来修改，地一种方法更简单，我们就用他。?

注意：在一下两种情况下，你应该使用 heightForRowAtIndexPath 方法：一是，你不能预先知道你的单元格的高度，二是不同的单元格会有不同的高度。?

回到MainStoryboard.storyboard,在大小检查器中将高度设置为55:?
?
通过这种方式的话，如果之前你是使用拖动而不是键入数值的方式改变高度的属性的话，则table view的数值也会自动改变。?

现在运行看看，好多了吧?





为原型单元格设置子类?

我们的表格视图已经相当像模像样了，但是我并不是很喜欢使用tag来访问label，要是我们能够把这些lable连接到输出口，之后在回应属性中使用他们，该多好，而且不出所料，我们可以这样做。?

使用 Objective-C class模板新建一个文件，命名为PlayerCell，继承UITableViewCell。?

修改PlayerCell.h?

?
请注意：要把这个control连接到table view cell而不是view controller哦亲，别选错了。?

现在我们把一切都链接好了，只需要加入数据源的代码就可以了。?

?
第二点，确保你加入单元格的字符大小是可以变化的，这样，当单元格大小变化时，他的内容的大小也会跟着变化，比如说：?

在PlayersViewController.m中加入如下方法：?

?
Delete按钮出现在右边，遮住了一部分评级图片，怎么解决呢？?

打开MainStoryBoard.storyboard，选中table view cell中的image view，在大小检查器中修改Autosizing属性，是它能够跟随上级view的边缘。?
?
为labels设置同样的属性。?
?
加入了这些变动之后，删除按钮如我们意料的出现了：?
?
其实，最好的做法是让这些星星在出现delete按钮的时候消失，不过这只是一个练习，不要太较真哦亲?