UITableViewCell 是干嘛用的
在内置的 TableView 中,提供了几种默认的 Cell 样式。但是在很多情况下,这几种 Cell 的样式是不能够满足需求的。
所以在需要展示自定义样式单元格的时候,就需要用到自定义的 UITableViewCell。
UITableViewCell 相当于安卓中 ListView 的 item,但是初次使用的话,会稍微有一点坑。
第一次用的时候,上网找得到的资料有的是用 Objective-C 写的,就直接 Pass 掉了,剩下用 Swift 写的有些有没有写清楚,虽说是一个很小很小的问题,但不注意还是会踩到雷。
怎么搞出一个 UITableViewCell
创建 UITableViewCell 的方法可以分成纯代码和可视化两种。我比较喜欢可视化的操作,好处是所见即所得,而且其实整体效率也高于纯代码。
-
新建一个 Cocoa Touch Class 文件,新建的时候勾选上同时创建 XIB 文件。
-
XIB 可以理解为一个轻量的 StoryBoard。打开 ContactTableViewCell.xib 的界面,就可以拖动控件来完成布局,最好结合 AutoLayout 自动布局来适配多种机型。比如我需要创建一个联系人列表,每一个单元格由头像和名字组成。
-
把 ContactTableViewCell.xib 的类关联设置为 ContactTableViewCell,连接avatarImageView 和 nameLabel 到 ContactTableViewCell.swift 中,操作和 StoryBoard 一样,按住 control 键拖动。
-
为了在之后能连接并使用 UITableViewCell 的小布局,需要选中 Cell 为它添加 Identifier。这里把它设置为 "ContactTVC"。
新建一个 ViewController.swift 文件,继承 UIViewController、UITableViewDelegate、UITableViewDataSource,并在 Main.storyboard 中为它添加 TableView 控件。同样需要设置类的关联和控件的连接。这个是平常使用 TableViewCell 的常用套路,就不多嘴 BiBi 了。
接下来是注册 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 </Users/derrickJ/Library/Developer/CoreSimulator/Devices/……/data/Containers/Bundle/Application/……/Contact.app> (loaded)' with name 'IHaveAPen'
这个时候你可能一脸懵逼…
其实这个错误就是说 Xcode 找不到这个叫做 "IHaveAPen" 的鬼东西。要解决这个错误,只需要把名字改成和你新建的 Cell 文件名字相同就可以了。比如这里就用 "ContactTableViewCell"。
- 接下来的也是使用 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
}
-
到这里就完成了,把 Main.storyboard 中的 App 入口设置成后来新建的 ViewController,运行模拟器。