自定义 UITableViewCell 的使用

UITableViewCell 是干嘛用的

在内置的 TableView 中，提供了几种默认的 Cell 样式。但是在很多情况下，这几种 Cell 的样式是不能够满足需求的。
所以在需要展示自定义样式单元格的时候，就需要用到自定义的 UITableViewCell。
UITableViewCell 相当于安卓中 ListView 的 item，但是初次使用的话，会稍微有一点坑。
第一次用的时候，上网找得到的资料有的是用 Objective-C 写的，就直接 Pass 掉了，剩下用 Swift 写的有些有没有写清楚，虽说是一个很小很小的问题，但不注意还是会踩到雷。

怎么搞出一个 UITableViewCell

创建 UITableViewCell 的方法可以分成纯代码和可视化两种。我比较喜欢可视化的操作，好处是所见即所得，而且其实整体效率也高于纯代码。

1. 新建一个 Cocoa Touch Class 文件，新建的时候勾选上同时创建 XIB 文件。
   

   

   勾选上 **Also create XIB file**

2. XIB 可以理解为一个轻量的 StoryBoard。打开 ContactTableViewCell.xib 的界面，就可以拖动控件来完成布局，最好结合 AutoLayout 自动布局来适配多种机型。比如我需要创建一个联系人列表，每一个单元格由头像和名字组成。

   
   
   

   **UITableViewCell XIB**

3. 把 ContactTableViewCell.xib 的类关联设置为 ContactTableViewCell，连接avatarImageView 和 nameLabel 到 ContactTableViewCell.swift 中，操作和 StoryBoard 一样，按住 control 键拖动。
   

   

   XIB 的类关联
   
   
   

   XIB 的控件连接

4. 为了在之后能连接并使用 UITableViewCell 的小布局，需要选中 Cell 为它添加 Identifier。这里把它设置为 "ContactTVC"。
   

   

   设置 Identifier

5. 新建一个 ViewController.swift 文件，继承 UIViewController、UITableViewDelegate、UITableViewDataSource，并在 Main.storyboard 中为它添加 TableView 控件。同样需要设置类的关联和控件的连接。这个是平常使用 TableViewCell 的常用套路，就不多嘴 BiBi 了。

6. 接下来是注册 ContactTableViewCell。很多文章就说了 注册 这两个字，结果我在哪里注册都不知道… 其实只需要在 ViewController.swift 的 viewDidLoad() 方法中，添加这样的两行代码。

let cellNib = UINib(nibName: "ContactTableViewCell", bundle: nil)
self.tableView.register(cellNib, forCellReuseIdentifier: "ContactTVC")

• forCellReuseIdentifier 的值就是刚刚为 Cell 设置的 Identifier "ContactTVC"。
• 需要特别注意的是 nibName 的值，如果随便填写某一个名字，比如 "IHaveAPen"，运行的时候就会成功地打开模拟器然后给你一个空白的列表… 并向你丢出一个这样的错误——

Could not load NIB in bundle:
'NSBundle (loaded)' with name 'IHaveAPen'

这个时候你可能一脸懵逼… 

其实这个错误就是说 Xcode 找不到这个叫做 "IHaveAPen" 的鬼东西。要解决这个错误，只需要把名字改成和你新建的 Cell 文件名字相同就可以了。比如这里就用 "ContactTableViewCell"。

7. 接下来的也是使用 UITableView 的基本套路。设置 delegate 代理和 datasource 数据源。不赘述。为了偷懒，头像就用同一个图片了……

var testData = ["牛大春", "牛百叶", "牛欢喜", "牛津完", "牛柔万", "牛伟巴", "牛燕京"]
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return testData.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ContactTVC", for: indexPath) as! ContactListViewCell
        cell.avatarImgV?.image = #imageLiteral(resourceName: "avatar")
        cell.nameLabel?.text = testData[indexPath.row]
        return cell
}

8. 到这里就完成了，把 Main.storyboard 中的 App 入口设置成后来新建的 ViewController，运行模拟器。

   
   
   

   将将～ 搞定！