你们可能已经发现，可扩展的 Table View Cell 在各种各样的 iOS app 里都很常见了。可能会有人认为它一定是 TableView 的原生实现 —— 哈哈并不是 :)
有很多种实现方式。AppCoda 已经介绍了非常有趣和通用的实现方式，但在一些情况下，特别是一个 view 里只有少数几个 cell 的时候，这简直是要人命。
还有一种方式，使用
insertRowsAtIndexPath()
但根据我的经验，这会在复用 cell 的时候造成严重的麻烦。换句话说，当我需要考虑到 TableView 被滑动、reload、吧啦吧啦吧啦等等所有情况的时候，我很头痛。
我特别喜欢通过修改高度 constraint 来实现。但是在你继续读下去之前，我需要让你知道这样做的优缺点。
优点
- 复用 cell 的时候没有麻烦
- 理解起来相对简单
- 快速实现
- 在大部分情况下够用了
缺点
- 只适合简单的 autolayout 设计
- 高度不是恒定不变的时候——哎呦，就不能用了 :(
好吧，以上就是介绍。如果你考虑了优缺点，然后仍然想学一下如何使用的话，那就上车吧！
我们将要构建什么
这会是一个简单的例子，有三个带有 label 和 image 的 Table View Cell。只要用户点击了 cell，它就会滑下来显示图片。小巧玲珑。
界面设置
我假设你知道如何建立 iOS app，所以我不会讲诸如如何创建项目等知识。
在你的 storyboard 里，制作下面的界面，由 ViewController、UITableView 和 带有 UILabel 以及 UIImage 的 UITableViewCell 组成。
看起来应该像这样：
设置 UILabel 的 constraint 如下：
以及 UIImage 的：
然后不要忘记把 Cell 的 identifier 设置为 “ExpandableCell”。好了，继续
自定义 UITableViewCell 类
创建一个叫做 ExpandableCell 的类，然后连接 image outlet。不要忘了也把 NSLayoutConstraint 也链接为 outlet。
你的类现在看起来应该像这样：
import UIKit
class ExpandableCell: UITableViewCell {
@IBOutlet weak var img: UIImageView!
@IBOutlet weak var imgHeightConstraint: NSLayoutConstraint!
}
下一步，我们会添加一个布尔型叫做 isExpanded 表示 cell 的当前状态，相应调整 *** imgHeightConstraint*** 常量。注意我们实现了 property observer DidSet 来管理布尔型的状态。
import UIKit
class ExpandableCell: UITableViewCell {
@IBOutlet weak var img: UIImageView!
@IBOutlet weak var imgHeightConstraint: NSLayoutConstraint!
var isExpanded:Bool = false
{
didSet
{
if !isExpanded {
self.imgHeightConstraint.constant = 0.0 }
else {
self.imgHeightConstraint.constant = 128.0 }
}
}
}
朋友们就是这样了，接下来是 ViewController！
ViewController 实现
连接 UITableView 到控制器很简单，设置 delegate 和 dateSource 为自己也一样简单，是吧？
要让 UITableViewCell 可扩展，要让它们的高度动态化
self.tableView.estimatedRowHeight = 2.0
self.tableView.rowHeight = UITableViewAutomaticDimension
此时此刻，我们的 ViewController 看起来应该像这样：
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
@IBOutlet weak var tableView: UITableView!
override func viewDidLoad() {
self.tableView.delegate = self
self.tableView.dataSource = self
self.tableView.estimatedRowHeight = 2.0
self.tableView.rowHeight = UITableViewAutomaticDimension
self.tableView.tableFooterView = UIView()
}
}
你可能会好奇 tableFooterView 是干嘛的——这是一个小技巧，从 UITableView 移除不想要的 cell（这篇教程我们只需要三个 cell）
来看看 dataSource 应该如何实现：
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 3
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell:ExpandableCell = tableView.dequeueReusableCell(withIdentifier: “ExpandableCell”) as! ExpandableCell
cell.img.image = UIImage(named: indexPath.row.description)
cell.isExpanded = false
return cell
}
因为我把图片命名为 “0”，“1”，“2”，我可以这么用
indexPath.row.description
来为每个 cell 获取图片名字。值得注意的是，我把 isExpanded 变量设置为 false，但也可以加载 cell 为扩展后状态，如果你喜欢的话，只是另一种选择罢了。
我想上面的代码都明了了，但是 delegate 方法还需要更多解释
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
guard let cell = tableView.cellForRow(at: indexPath) as? ExpandableCell else { return }
UIView.animate(withDuration: 0.3, animations: {
tableView.beginUpdates()
cell.isExpanded = !cell.isExpanded
tableView.scrollToRow(at: indexPath, at: UITableViewScrollPosition.top, animated: true)
tableView.endUpdates()
})
}
我来告诉你这里发生了什么。
每次一个 cell 被选中，会修改它的 isExpanded 变量值，并且伴随动画。注意 scrollToRow 方法被调用了，以确保 cell 被卷起后下面的 cell 会回到它原本的位置。
就是这样，我们做到了！
改进
我觉得还可以再增加一个功能。现在，要让 cell 合上，用户需要直接点击这个 cell。要让它对用户更友好，点击其它 cell 的任意位置来卷起当前打开的 cell，这是最好的。
和上面做的只要有一点不同就可以实现
func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
guard let cell = tableView.cellForRow(at: indexPath) as? ExpandableCell else { return }
UIView.animate(withDuration: 0.3, animations: {
tableView.beginUpdates()
cell.isExpanded = false
tableView.endUpdates()
})
}
这次只要 cell 被取消选中了，isExpanded 被设置为 false，而不是设置为它的相对值。这防止了一种情况，就是用户点击一个 cell 来收起它，然后选择了其它的 cell，会导致两个都被打开。
在你测试 app 的时候，你可能注意到控制台如下的警告了：
Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x17409b6c0 UIImageView:0x100b04010.height == 128 (active)>
Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
还好，这很容易修复。只要到你的 storyboard 里然后改变高度 constraint 的 priority。999 就行
yo！像奇迹一样！
感谢阅读！
我非常希望你能在下面的评论里分享见解。我很想听到你处理可扩展 cell 的方式！
喔差点忘了！[完整项目在这里]( GitHub - josephchang10/ExpandableCells )
网友评论