第七章 使用prototype Cell定制Table View（二）

显示不同的缩略图

上一章的练习你完成了吗？我希望你已经完成了。为不同的餐馆显示不同的缩略图有很多方法。我将会你演示最直接的方法。首先下载另一个图片压缩包http://pan.baidu.com/s/1b648Ya .然后将全部图片拖到images.xcassets.压缩包里有一些示例美食图片和餐馆图片。当然，如果你愿意，你可以自由使用你自己的图片。 

再我们修改代码之前，我们重新看一下用于在表格行里显示缩略图的那行代码。

这行在tableView(_:cellForRowAtIndexPath:)中的代码通知UITableView在每一行显示restautant.jpg图片。很明显，要显示不同的图片，我们需要其他的代码。正如前面解释的，每次表格行显示时iOS都调用该方法。

如果你明白餐馆名是如何显示的，你肯定知道indexPath参数包含表格行数（还有节数）。你直接调用indexPath.row就能获得当前的行号。

因此，为了显示不同的缩略图，我们需要添加一个新的数组（我们可以将这个数组命名为restaurantImages）来存储缩略图文件名。

你可以从上面的代码中看出，我们用一系列图片文件名来初始化restaurantImages数组。图片文件名和restaurantNames顺序匹配。

最后，修改tableView(_:cellForRowAtIndexPath:)方法中的代码：

cell.imageView.image=UIImage(named:restaurantImages[indexPath.row]

保存所有的修改，再次尝试运行你的App。现在每个餐馆将会显示不同的图片。

定制表格单元格

现在App是不是看起来更好了？我们接下来通过定制表格单元格让App变的更好。到现在为止我们使用的都是表格单元格默认的样式。缩略图的位置和大小都是固定的。但是如果你想：

修改单元格的高度

让缩略图变得更大一些

显示餐馆更多的信息例如位置和类型

修改字体类型和大小

使用圆形图片替代方形图片

为了让你更好的理解如何定制单元格，参考下图.这个单元格是不是看起来很漂亮？

在Storyborad中设计Prototype Cells

Prototype cells的优点是允许开发者直接在table view controller中定制。为了创建一个可定制的单元格，你只要在Prototype cell上直接添加其他的UI控件（例如：UILabel，UIImage View）。

首先我们修改单元格的风格。当单元格风格设置为Basic时你是午饭定制单元格的。选中单元格然后在属性检查器中将单元格风格从Basic修改为Custom。

为了容纳更大的缩略图，我们修改单元格的高度。你需要同时修改表格和prototype cell的高度。选中表格然后将高度修改为80。

然后选中prototype单元格然后点击“Size”查看器。选中定制复选框然后修改行高为80。

调整完行高之后，从对象库中拖拽一个Image View到prototype cell。你可以自由定制图片适应你的需求。图6-12展示了我的推荐尺寸。你可以选中Image View，点击“Size”检查器然后修改“X”，“Y”，“Width”和“Height”属性。

接下来我们添加三个标签：

Name－餐馆名

Location－餐馆地址（如New York）

Type－餐馆类型（如茶馆）

为了添加标签，从对象库中拖拽Label对象到单元格中。将第一个标签命名为“Name”。在尺寸查看器中，设置“X”为86，“Y”设置为9，“With”设置为205，“Height”设置为21。

我们不使用系统为标签设置的默认字体，我们使用新的字体。在属性查看器中，在字体栏选择“Custom”，设置字体“Avenir Next”（或者任何你喜欢的字体）并且设置字号为16。

把另一个标签拖到单元格上并且命名为“Location”。在尺寸查看器中，设置“X”为86，“Y”为35，“Width”为205，“Height”为18。修改字体为“Avenir Next”并且设置字体大小为13。

最后，创建另一个标签并且命名为“Type”。在尺寸查看器中，设置“X”为86，“Y”为54，“Width”为205，“Height”为21。修改字体为“Avenir Next”并且设置字体大小为11。

为定制的单元格创建一个类

到现在为止，我们已经设计好了单元格。但是我们如何修改prototype cell中的标签值呢？这些值是动态的。我们接下来创建一个新类与单元格关联。这个类代表定制的单元格的数据模型。和前面一样，在工程导航窗口右击“FoodPin”文件夹，选择“New File”。之后Xcode提示你选择一个模板。由于我们想要创建一个用于定制表格单元格的类，所以我们选择“Cocoa Touch Cals说”并且点击“Next”。填“CustomTableViewCell”作为类名并且在“Subclass of”选项中填写“UITableView Cell”。

点击“Next”文件在FoodPin工程文件夹中存储。在工程导航窗口中可以看到Xcode创建的名为CustomTableViewCell.swift的文件。

接下来，在CustomTableViewCell中声明下面的变量：

CustomTableViewCell类作为定制单元格的数据模型。在单元格里，我们有4个可以修改的属性：缩略图image view， 名字标签，位置标签和类型标签。数据标签存储和提供用于显示的值。

这所有的变量都会和Interface Builder中的对应的用户界面对象关联。通过将这些代码和UI对象相互关联起来，我们能够动态的修改UI对象的值。回想一下我们使用@IBAction说明动作方法，使用@IBOutlet关键字说明是一个输出属性。

在我们为Interface Builder中的prototype cell和customTableViewCell类之间建立联系之前。我们首先要设置custom class。

默认情况下，prototype cell和UITableView Cell类关联。为了为prototype cell设置custom类，在storyboard中选择cell，在标识查看器中设置custom类为CustomTableViewCell。

建立关联

接下来我们建立prototype cell中的UI objects与源代码之间的联系。首先转到storyboard。

右击Interface Builder里DocumentOutline中的cell，调出Outlets查看器。点击thumbnaillmageView右侧的圆圈并且按住左键拖拽到prototype cell中的UIImage View对象中。当你释放按钮后，Xcode自动建立关联。

为下面的输出属性（outlets）重复上面的过程：

locationLabel-和单元格中的Location label关联

nameLabel-和单元格中的Name label关联

typeLabel-和单元格中的Type label关联

在你建立完所有的关联之后，UI界面 如图所示

在Table View Controller中编码

我们已经完成了为定制单元格设计和编码的工作。最后我们到最后一个修改的地方。在RestaurantTableViewController中，我们仍然使用UITableViewCell(例如stock cell）来显示内容。我们需要修改一行代码以便使用定制单元格。如果查看tableView(_:cellForRowAtIndexPath:)方法你可以看到已经存在的实现代码。代码的第二行是：:

我们已经解释过了dequeueReusableCellWithIdentifier方法的含义。但是”as UITableViewCell”是什么意思呢？dequeueReusableCellWithIdentifier方法非常灵活，它可以从队列中返回各种类型的单元格。实际上它返回的是一种通用单元格。将通用单元格转换为实际类型的单元格是我们的责任。Swift使用“as”关键字完成类型转换。在前面我们处理的是默认的表格单元格（table view cell），所以我们需要转换单元格为CustomTableViewcell。所以将上面的代码改为

好的，我知道你已经迫不及待想测试App了（你可以试一试，呵呵）但是我们还需要修改一些代码。下面这些代码设置餐馆名和图片的值:

textLabel和image View是UITableView Cell默认的属性。因为我们现在使用CustomTableViewCell所以我们需要使用custom class（定制类）。将上面的代码修改为：

现在准备工作已经做完了。点击Run按钮然后测试App。你的App应该如图所示。旋转仿真器。App将会以横屏显示。

相对默认的表格，现在有了巨大的提升。我们再改进一些，我们接下来把缩略图修改为圆形。

圆角图片

从iOS 7发布开始，iOS采用圆角图片替代方型图片。你可以在系统自带的App例如联系人和电话中找到圆角图片。如果所有的餐馆图片都是圆角的是不是很不错？你不需要用Photoshop来修改图片。你只需要两行代码。

你可能从来没有听过CALayer类，也可能你已经在某些时候使用过它。在CALayer类的实例支持UIKit中的每一个View类（如UI View，UIImage View）。Layer对象设计用来管理view背后的存储并且处理view相关的弹出动画。

layer对象提供各种各样的属性，这些属性用于设置view内容的可见性，例如：

背景颜色

外边框以及外边框宽度

阴影颜色，宽度等等

不透明度

圆角半径

圆角半径就是我们将要用来绘制圆边和圆角图片的属性。理解一个东西工作原理最好的方法就是直接使用它。在tableView(_:cellForRowAtIndexPath:)方法的“return cell”之前插入下面的代码：

向我在前面说的，每一个view对象都有一个layer属性，UIImage view也不例外。代码的第一行设置layer对象的cornerRadius属性。为了将方型图片设置为圆形图片，UIImage View的半径需要设置为宽度的一半。例如，如果方型图片宽度是100像素。那么半径需要设置为50像素。你可以通过UIIamgeView的frame属性设置它的大小。最后我们将clipsToBounds属性设置为YES，将layer设置为启用。

现在编译并且运行App。所有的缩略图都变成了圆形。很简单，不是吗？只用了两行代码，图片就从方型图片变成了圆形图片。完全不需要Photoshop。

你可以自由更改圆角半径的值。按下面的代码修改它的值看看有什么变化。

你的练习

你可能奇怪为什么APP中所有的行都只简单显示“Location”和“Type”。因为我希望这作为一个练习，把这个问题留给你解决。试着修改你的代码并且更新两个标签。这里提示一下，你需要两个数组

你也可以试着从新设计单元格并且看看能不能创建一个像下图一样的App

小结

恭喜！你已经有了巨大的进步。如果你懂得定制单元格的输入输出，你已经能够做一些令人惊讶的UI。Table view是很多优秀的App的核心。除了游戏开发，你做App很可能会采用一种或其他的方法实现Table view。希望你花一些时间完成练习并且稍微修改一下代码。“把手弄脏”是学习编码最好的方法。

你可以下载Xcode项目http://pan.baidu.com/s/1nu95UXj，用于参考。

在下一章，我们将会学习如何处理单元格选取动作。那会很有趣。-