第七章 使用prototype Cell定制Table View(一)

使用prototype Cell定制Table View

在上一章,我们使用平常的单元格风格创建了一个简单的基于表格的App来显示一系列餐馆名。再这一张,我们将要定制单元格让它看起来更好看。我们将会一起做一系列的修改:

1、使用UITableView Controller替代UITableView重建App

2、为每个餐馆使用不同的图片替代每个餐馆一样的缩略图

3、定制表格单元格而不是使用基础风格的表格单元格

你可能很奇怪为什么我们需要重建一样的App。做一件事情有很多的方法。上次我们使用对象库的UITableView创建表格。这次我们使用UITableView Controller创建表格。这种方法会更简单吗?回答是肯定的。回忆一下在原来的例子里我们需要明确实现UITableViewDataSource和UITableViewDelegate协议,UITableView Controller实现了这些协议并且已经建立好了关联。除上面之外,它还包含容器右侧自动布局的约束。

使用UITableView Controller创建表格App

首先,让我们看一下如何使用UITableView Controller重建Simple Table App。先打开Xcode。然后使用“Single View application”模版创建一个新项目。将这个项目命名为FoodPin,然后填写Xcode工程所需要的其他信息,就像你在前面章节一样。


第七章 使用prototype Cell定制Table View(一)

Xcode工程建立完毕后,选择“Main.storyboard”打开Interface builder。和前面一样禁用Size Classes。在文件查看器里,取消“Use Size Classes”并且选择iPhone设备。因为我们选择了“Single View application”模版,会发现Xcode在storyboard中已经生成了一个默认的view controller。这次我们不使用默认的controller。所以选中view controller然后点击delete按钮删除它。view controller和ViewController.swift关联。我们同样不需要。在工程导航窗口,选择ViewController.swift同样删除它。

回到storyboard。从对象库拖拽一个Table View Controller(或者UITableView Controller)并且把它放在storyboard。你需要指定这个view controller作为初始view controller,即第一个加载的view controller。选择属性检查器并且选中“Is Initial View Controller”选项。随后你将会看到一个指向table view controller的箭头。


第七章 使用prototype Cell定制Table View(一)

如果你现在编译和运行App,那将会看到一个空白表格的App。很明显,我们还没有插入任何数据到表格里。

现在,我们添加的table view controller和默认的UITableView Controller类关联。为了添加数据,我们需要将table

view controller和我们自己的类关联。


第七章 使用prototype Cell定制Table View(一)

回到工程导航窗口并且右击FoodPin文件夹。选择“New Files...”创建新文件。选择“Cocoa Touch Class”作为模版然后点击“Next”。为新的类命名为”RestaurantTableViewController”。因为新类是从UITableView Controller中扩展的,所以修改“Subclass of”的值为“UITableView Controller”。其他选项值保持不变。点击“Next”并且在项目文件夹中存储。这样就在工程里创建了一个RestaurantTableViewController.swift文件。


第七章 使用prototype Cell定制Table View(一)

超类和子类

Swift是面向对象语言(OOP)。在OOP中,一个类可以由另一个类继承而来。在这次的例子里,RestaurantTableViewController类就是从UITableView Controller类继承而来。RestaurantTableViewController继承了UITableView Controller类所有的状态和功能。RestaurantTableViewController就称为UITableViewController的子类。换句话说UITableView Controller就是RestaurantTableViewController类的父类或者超类。

在storyboard中的table view controller并不知道RestaurantTableViewController类的存在。所以下一步我们需要在table view controller和新的类之间建立联系。回到storyboard并且选择table view controller。在标志查看器(Identity Inspector)中选择custom class为RestaurantTableViewController。现在我们在storyboard中的table view controller和新类之间建立了联系。


第七章 使用prototype Cell定制Table View(一)

还有一件事情,配置table view。选择单元格。在属性查看器中修改单元格风格为“Basic”并且设置标识名为“Cell”。

OK,用户界面准备好了。让我们回到编码工作。选择项目导航窗口中的RestaurantTableViewController.swift然后声明一个变量实例来保存表格数据。


第七章 使用prototype Cell定制Table View(一)

前面说过了UITableView Controller已经实现了UITableViewDataSource协议。如果你还记得,我们需要实现下面的方法:

tableView(_:numberOfRowsInSection:)

tableView(_:cellForRowAtIndexPath:)

UITableViewController类为这两个方法提供了默认实现。通常情况下,这些默认实现的方法不适合我们自己的App,我们这个App也有这个问题。我们需要重载默认实现的方法并且提供我们自己的实现。添加下面的代码到RestaurantTableViewController.swift:

第七章 使用prototype Cell定制Table View(一)

在Swift中,要重载超类的方法我们只需要在方法开头处添加override。上面的代码和前面的章节里的代码是一样的,所以这里我们不在介绍这些代码的细节。

下一步,我们修改RestaurantTableViewController中的代码片段。再Xcode创建类文件时这些代码就生成了。默认情况下,方法返回表格节数为0。但是我们要实现的表格有一个节。


第七章 使用prototype Cell定制Table View(一)

顺便提一下,上面的代码是可选的。如果你移除它,表格依然默认被设置为1节。

现在从 http://pan.baidu.com/s/1miqldlI 下载图片压缩包,并且将全部图片拖到images.xcassets。如果你忘记了操作过程可以参考上一章。现在点击“Run”按钮,你的FoodPin App会看起来和我们前面创建的simple table app一样。

相关文章:

  • 2022-01-07
  • 2022-01-05
  • 2021-09-03
  • 2022-12-23
  • 2022-02-19
  • 2022-01-12
  • 2021-11-25
  • 2021-12-20
猜你喜欢
  • 2021-07-17
  • 2021-07-29
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-23
相关资源
相似解决方案