Swift 3: 可扩展的 Table View Cell

2017-01-09 本文已影响649人张嘉夫

你们可能已经发现，可扩展的 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 )

Swift 3: 可扩展的 Table View Cell

优点

缺点

我们将要构建什么

界面设置

自定义 UITableViewCell 类

ViewController 实现

改进

猜你喜欢

热点阅读