你們可能已經(jīng)發(fā)現(xiàn)，可擴展的 Table View Cell 在各種各樣的 iOS app 里都很常見了。可能會有人認為它一定是 TableView 的原生實現(xiàn) —— 哈哈并不是 :)
有很多種實現(xiàn)方式。AppCoda 已經(jīng)介紹了非常有趣和通用的實現(xiàn)方式，但在一些情況下，特別是一個 view 里只有少數(shù)幾個 cell 的時候，這簡直是要人命。
還有一種方式，使用

insertRowsAtIndexPath()

但根據(jù)我的經(jīng)驗，這會在復用 cell 的時候造成嚴重的麻煩。換句話說，當我需要考慮到 TableView 被滑動、reload、吧啦吧啦吧啦等等所有情況的時候，我很頭痛。
我特別喜歡通過修改高度 constraint 來實現(xiàn)。但是在你繼續(xù)讀下去之前，我需要讓你知道這樣做的優(yōu)缺點。

優(yōu)點

• 復用 cell 的時候沒有麻煩
• 理解起來相對簡單
• 快速實現(xiàn)
• 在大部分情況下夠用了

缺點

• 只適合簡單的 autolayout 設計
• 高度不是恒定不變的時候——哎呦，就不能用了 :(
  好吧，以上就是介紹。如果你考慮了優(yōu)缺點，然后仍然想學一下如何使用的話，那就上車吧！

我們將要構建什么

這會是一個簡單的例子，有三個帶有 label 和 image 的 Table View Cell。只要用戶點擊了 cell，它就會滑下來顯示圖片。小巧玲瓏。

界面設置

我假設你知道如何建立 iOS app，所以我不會講諸如如何創(chuàng)建項目等知識。
在你的 storyboard 里，制作下面的界面，由 ViewController、UITableView 和 帶有 UILabel 以及 UIImage 的 UITableViewCell 組成。
看起來應該像這樣：

自定義 UITableViewCell 類

創(chuàng)建一個叫做 ExpandableCell 的類，然后連接 image outlet。不要忘了也把 NSLayoutConstraint 也鏈接為 outlet。

import UIKit 
class ExpandableCell: UITableViewCell { 
@IBOutlet weak var img: UIImageView! 
@IBOutlet weak var imgHeightConstraint: NSLayoutConstraint! 
}

下一步，我們會添加一個布爾型叫做 isExpanded 表示 cell 的當前狀態(tài)，相應調整 *** imgHeightConstraint*** 常量。注意我們實現(xiàn)了 property observer DidSet 來管理布爾型的狀態(tài)。

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 實現(xiàn)

連接 UITableView 到控制器很簡單，設置 delegate 和 dateSource 為自己也一樣簡單，是吧？
要讓 UITableViewCell 可擴展，要讓它們的高度動態(tài)化

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 應該如何實現(xiàn)：

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 為擴展后狀態(tài)，如果你喜歡的話，只是另一種選擇罷了。
我想上面的代碼都明了了，但是 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() 
  }) 
}

我來告訴你這里發(fā)生了什么。
每次一個 cell 被選中，會修改它的 isExpanded 變量值，并且伴隨動畫。注意 scrollToRow 方法被調用了，以確保 cell 被卷起后下面的 cell 會回到它原本的位置。
就是這樣，我們做到了！

改進

我覺得還可以再增加一個功能。現(xiàn)在，要讓 cell 合上，用戶需要直接點擊這個 cell。要讓它對用戶更友好，點擊其它 cell 的任意位置來卷起當前打開的 cell，這是最好的。
和上面做的只要有一點不同就可以實現(xiàn)

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 就行