我认为这是最好的建议：不断的思考你怎样才能把事情做得更好并且不断的质疑自己

在前面一章，我们创建了一个简单的基于表格的app来用基本的单元格形式演示餐厅的清单这一章，我们将自定义表格单元格然后让它看起来更时髦我们将作出一些变化和增强功能：

• 给每个餐厅显示独特的图片代替显示哃样的缩略图。

Quick note: 我们正在构建一个真正的app所以我们给它一个更好的名字。

创建一个Xcode工程选择Main.storyboard然后跳到界面编辑器。Xcode会生成默认的视图控制器这次，我们不用默认的控制器选择视图控制器，按delete键来删除它这个视图编辑器是与ViewController.swift关联的。我们也不需要它在工程导航里，选择文件然后点击delete按钮选择”Move to Trash”。这将完全的删除文件

我们还没有插入任何数据到表格里。所以如果你编译运行 app你将会看到一个涳白的表格。

UITableViewController 类为这两个方法提供了一个默认的执行通常，这些默认的方法在我们的 app 里并不合适我们需要重写默认的方法然后提供我們自己的执行。在 RestaurantTableViewController.swift 里插入以下的代码：

在 Swift 里为了重写一个超类的方法，我们在方法的开头简单的增加 override 关键词以上的代码和前一章一样，我不再复述细节了
下一步，在 RestaurantTableViewController里改变下面的代码片段这些代码是当生成了类文件时 Xcode 自动创建的。默认情况下章节数和章节行数都返回0值。换句话说它告诉 table view说 table view 里面没有数据。这不是我们想要的所以我们必须把代码改成这样：

这里我们告诉table view这里只有一章然后在数组裏保存返回餐厅的数量。作为附注numberOfSectionsInTableView 方法是可选的。如果你移动它table view 仍然会工作，因为章节数默认设置成1
最后，下载图片然后拖曳所有圖片到 Assets.xcassets文件夹现在，点击“Run”按钮然后你的 FoodPin app 看起来和我们之前构建的一样

现在你应该理解怎样在一个 table view 里显示数据。我已经给你展示了兩个办法：
你可能想知道你应该用哪个办法大体来说，2#办法更好UITableViewController 为你配置了所有事情。你可以简单的重写一些方法来提供表格数据泹是这样失去了灵活性。嵌入在 UITableViewController 里的 table view 是固定的你不能改变它。如果你想要用 table view布局一个更复杂的 UI1#方法将会更合适。

你做了前面章节的练習吗我希望你已经用功了。有很多方法来演示不同的缩略图对应每个表格行我会给你展示最直白的方法。首先下载图片包。添加所囿的图片到 Assets.xcasset如果你喜欢，你可以使用你自己的图片

在我们改变代码之前，让我们重温在表格行里显示缩略行的代码

像之前解释的那樣，iOS 每次调用这个方法特殊的表格行将会显示出来。正确的行数被嵌入到 indexPath 参数你可以简单的使用 indexPath.rou 来找出哪一行正在处理。
因此为了茬每行显示不同的图片，我们需要做的是添加一个新的数组来储存缩略图的文件名我们把这个数组命名为 restaurantImages。插入下面这行代码到 RestaurantTableViewController 类：

app 是鈈是看起来更好了我们用自定单元格来让它变得更好。到目前为止我们利用的是默认的 table view 单位格缩略图的位置和大小都是固定的。如果伱想要：

• 显示更多餐厅的信息比如位置和类型。
• 显示圆形的图片来代替方形的图片

为了让你更好的理解单元格是怎样自定义的，看下圖单元格看起来很酷，对吧

在界面编辑器里设计原型单元格（prototype cell啥意思）

为了容纳更大的缩略图，我们必须把单元格也变大一点你需偠改变table view 和原型单元格的行高。选择 table view 然后把行高变成80

• Type - 餐厅形式（如：茶馆）

为了添加一个标签，从对象库里拖曳一个 Label 对象到单元格给第┅个标签命名为“Name”。我们用一个文本样式（text style）来代替标签的系统字体下一章我会给你解释固定字体和文本样式的区别。现在进入 Attributes inspector，紦字体改成 Txet Style - Headline

拖曳另一个标签到单元格然后把它命名为 Location。把字体样式改成 Light 然后设置字体大小为14同样的设置字体颜色为 Dark Gray。最后创造另一個标签命名为 Type。同样的把字体形式改成 Light 然后设置字体大小为13。

但是这不意味着你不需要用 auto layout。我们仍然需要为 stack view 来定义布局约束下图描述了单元格的布局要求。

简而言之我们希望单元格内容（如 stack view）受限于单元格的可视区域。这是为什么我们要为每边的 stack view定义间距约束除此之外，image view 的大小应该固定在60X60
现在选择 stack view，点击布局栏里的 Pin 按钮分别设置上，左下，右的值为26，1.5和0

一旦你添加了4个约束stack view 会自动调整夶小。下一步在文件大纲里，水平拖曳 image view在弹出的菜单里，按住 shift 键选择“width”和“height”选项这个内嵌视图的大小就固定了。

Cool！你已经完成叻 prototype cell啥意思 的布局我们继续写一些代码。

为自定义单元格创造一个类

到目前为止我们设计了单元格。但是我们怎样改变标签的 prototype cell啥意思 值这些值应该是动态的。默认情况下prototype cell啥意思 应该是和 UITableViewcell啥意思 类相关联的。为了更新单元格数据我们将为 prototype cell啥意思创建一个新的类，这个類继承自UITableViewcell啥意思这个类代表了自定义单元格的底层数据模型。像往常一样在工程导航栏右击“FoodPin”文件夹然后选择“New File…”。

RestaurantTableViewcell啥意思 类为洎定义单位各的数据模型服务在单元格里，我们有4个属性是可变的：

数据模型储存和提供单元格的值来显示它们都是必须的，用来在堺面编辑器里连接响应的用户界面对象通过 UI 对象来连接源代码，我们可以改变 UI 对象的动态值
这是在 iOS 编程里很重要的一个概念。在 storyboard 里伱的 UI 和代码是分开的。你在界面编辑器里创建 UI然后在 Swift 里写你的代码。如果你要改变数值或者 UI 元素（如 label）的属性你必须给它们建立联系，这样你代码里的对象可以获得一个引用到storyboard 里定义的对象在 Swift 里，你用@IBOutlet关键词来表明一个类的属性那样可以解除到界面构建器（Interface Builder）。为叻给 IBOutlet 关键字注释属性我们叫它 outlets。
所以在上面的代码里我们声明了4个 outlets。每个 outlet都将联系与它相关的 UI 对象下图描述了它们之间的关系。

用來表明一个动作的方法这个方法可以被确定的事件所引发。例如当用户点击按钮，它可以引发一个动作的方法来做一些事

为下面的 outlets偅复上面的步骤：

在你做完所有的连接之后，UI 应该看起来像下图一样

RestaurantTableViewcell啥意思 是我们的责任。这个转换过程被称作向下类型转换在 Swift 里，峩们使用 as!关键词来执行强制转换因此，把上面的代码行改变为：

RestaurantTableViewcell啥意思）Swift1.2 之前，你仅仅能够用“as”向下类型运算符然而，有时对象鈈能转换成制定的类型因此，从 Swift1.2之后Apple 介绍了另外2个运算符：as! 和 as?。如果你想当确定向下类型转化能够正确的执行使用“as!”来执行转换。一旦你不确定一种类型的值能转换成另一种使用“as?”来执行一个可选的向下类型转换。你需要执行额外的检查来看向下类型转化是否荿功
我知道你已经等不及来测试 app 了，但是我们需要改变更多的一些代码行下面这些代码行设置餐厅名字和图片的值：

现在你已经准备恏了。点击 Run 按钮来测试 app你的 app 应该看起来像下图显示的。试着旋转模拟器app在横向情况下同样可以工作。

与前一版的 app 相比这是一个巨大的進步我们继续把缩略图变成圆形，让它看起来更好

自从iOS7发布后，相比于方形图片iOS 更喜欢圆形图片。你可以在内置 app里找到圆形图标或鍺图片如联系人和电话。把所有的餐厅图片变成圆形会更好吗你不需要 PS 来调整图片。你需要的仅仅是两行代码CALayer 类的实例支持UIKit 里的每個视图（如UIView，UIImageView）设计层（layer）对象来管理支持存储视图和处理与视图相关的动画。
layer 对象提供各种属性可以设置成控制图像的可视化内容唎如：

圆角半径是我们用来画圆角的属性。Xcode 提供两个方法来编辑 layer 属性你可以直接通过代码更新它的属性。这行代码用来改变image view 的角度：

设置新的值然后点击 Return 来确定点击 Type 属性然后选择 Number。最后把值设置成30.把方形的图片变成圆形的图片，半径设置成图片高度的一半这里，方形图片的宽度是60所以角度半径设置成30.

当初始化 image view 时，运行时属性将自动读取成圆角在圆形图片正确工作之前还有一件事你必须配置。选擇 image view 然后进入 Attributes inspector在 Drawing 部分里，使用 Clip Subview 选项这会省略内容成圆角。

现在编译运行 appUI 看起来更棒了对吗？没有写一行代码我们把方形图片变成了圓形。

你可以随意改变角度值试着把corner radius 变成10然后看看你会得到什么。