iOS 7Development Recipes（中文版）之第二章 Storyboard（3）

Recipe2-2：实现一个表格控制器

现在，我们使用一个表格控制器来扩展我们的Recipe2-1。这个例子将会演示怎样点击表格视图中不同的单元格并显示其对应的细节视图。当你想到iOS的视图控制器时，第一个蹦出来的就是表格控制器了。而storyboard将表格控制器又带领到了一个新的高度。（参考第四章中有个特别介绍不使用storyboard创建表格视图）。

第一步，从object library中拖一个UITableView Controller,创建“App Table View”。在这个场景顶部，有一个部分叫做“Prototype Cells”。在storyboard中你可以通过这个东西自定义UITbaleViewCell的布局和objects。下面将进一步详细介绍。

          选中这个表格视图，在“属性检查器”中，将“Content”属性改为“Static Cells”，将“Style”设置为：“Grouped”。

          因为每一个cell都是一样的，你可以将其下面的两个删除，保留一个，再复制。接下来你可以自定义你的单元格了。

          选中一个cell并选择“subtitle”属性。这个将会在单元格的标题下面创建一个子标题。双击单元格就可以设置了。

          现在，你一共有三个单元格，分别设置其标题和子标题，如下图所示。

          下面，将“Our Apps”按钮和这个视图关联起来。建立一个push类型的segue，方法就不再赘述。

          现在你运行该app，点击“Our Apps”按钮，就会显示刚刚我们创建的视图。到此为止，我们仍然没写一行代码。iOS这么叼，它家里人知道吗？

添加详细视图

在之前，没有使用任何代码，我们的app也还不错，接下来，我们要开始添加一丢丢的代码，让我们的app更完善。开始编码之前，必须要建立一个详细视图的界面。

            首先，又要拖一个新的视图控制器到我们storyboard中，在这个新的视图控制器上添加一个label（显示标题）和一个text view（显示具体的描述信息）。

            在真实的场景中，这个页面可能会包含一些附加的信息，例如：一个你可以购买这个app的连接地址。当你松开鼠标的时候，这次你会发现，你不仅可以选择“selection segue”，还可以选择“Accessary Action”。针对我们这个app，我们选择push类型的segue触发点击cell事件，而不是点击accessory按钮。

类似的，从三个单元格中拉出三个push类型的segue，分别命名为：“PushAppDetailsFromCell1”，“PushAppDetailsFromCell2”，“PushAppDetailsFromCell3”。

无代码的日子结束了！！

现在你要开始写一些代码动态改变细节视图。

首先，我们要创建一个model类描述我们所需的信息。创建一个新类，NSObject的子类，取名为“AppDetails”。

添加如下的属性和方法：

在代码中，我们自定义了一个初始化方法，用名字和描述初始化一个细节视图控制器（这是我们自己定义的）。

建立自定义的视图控制器：

到现在，我们已经有了AppDetails类，现在我们需要创建一个跟它关联的视图控制器。新建一个Objective-C类，命名为“AppDetailViewController”,并使其父类为“UIViewController”。注意的是，不要勾选“WithXIB for user interface”。

            回到storyboard中，将“App Detail”视图控制器的Class属性设置为：“AppDetailsViewController”。

            接下来，创建outlet：label命名为“nameLabel”；将textview命名为“descriptionTextView”。

“AppDetailViewController.h”源码如下：

 

现在，这个视图控制器一切准备就绪，“坐等风来”。下一步，填充数据。此时我们需要新建一个新的表格视图控制器“OurAppsTableViewController”。回到storyboard中，将“Our Apps”视图控制器的class属性设置为：“OurAppsTableViewController”。

       打开我们新建的“OurAppsTableViewController”的m文件，第一件事就是删除它们默认的数据源和数据代理方法。这是系统默认的，将一下四个方法删除：

numberOfSectionInTableView:

tableView:numberOfRowsInSection:

tableView:cellForRowAtIndexPath:

tableView:didSelectRowAtIndexPath:

那我们用什么数据填充呢？不要忘记我们前面的创建的三个不同的segue，就是通过它们连接到我们的细节控制器。重写方法：prepareForSegue:sender:

注意：在我们的例子中，我们是通过不同的segue来决定跳转，但是prepareForSegue方法同样适用于两个视图控制器之间的跳转。代码如下：

 

从上面的代码中，你可以看到，我们通过判断不同的segue的identifier属性值的不同从而创建不同的AppDetails对象。

此时，你运行你的app，就可以得到三个不同的界面。

使用单元格原形

之前，我们的单元格内容都是固定的，接下来要教大家怎么动态改变单元格的内容。接下来，我们的prepareForSegue：sender：方法就变得简单多了，代码如下：

第一步，将tableView的“content”属性改为：“DynamicPrototypes”。

            第二步，我们将要创建我们的单元格的模板。你可以向之前创建静态单元格一样的方法，但是要在后面添加一个“disclosure indicator”标志。（在“Accessaory”这个属性里面设置）。你可以看到如下图所示：

            第三步，设置单元格的“Identifier”属性值为：AppCell。

            第四步，创建单元格到细节视图的segue，push类型，并将segue命名为“PushAppDetails”。

            到这里，我们的单元格就自定义完成了。剩下的工作就是写代码让其动态变化。点开“OurAppsTableviewController.m”输入以下代码：

接下来，我们的prepareForSegue：sender：方法就变得简单多了，代码如下：

现在，运行你的代码，在使用我们的单元格原型之前，首先会加载整个tableview，如果成功，你可以看到如下画面。但是，在我们这个例子中，细节视图控制器的内容仍然是静态的，我们将在第14章扩展该例子（从远程文件上获取数据）。