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

insertRowsAtIndexPath()

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

優(yōu)點(diǎn)

• 復(fù)用 cell 的時(shí)候沒(méi)有麻煩
• 理解起來(lái)相對(duì)簡(jiǎn)單
• 快速實(shí)現(xiàn)
• 在大部分情況下夠用了

缺點(diǎn)

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

我們將要構(gòu)建什么

這會(huì)是一個(gè)簡(jiǎn)單的例子，有三個(gè)帶有 label 和 image 的 Table View Cell。只要用戶(hù)點(diǎn)擊了 cell，它就會(huì)滑下來(lái)顯示圖片。小巧玲瓏。

界面設(shè)置

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

自定義 UITableViewCell 類(lèi)

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

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

下一步，我們會(huì)添加一個(gè)布爾型叫做 isExpanded 表示 cell 的當(dāng)前狀態(tài)，相應(yīng)調(diào)整 *** imgHeightConstraint*** 常量。注意我們實(shí)現(xiàn)了 property observer DidSet 來(lái)管理布爾型的狀態(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 } 
      } 
    } 
  }

朋友們就是這樣了，接下來(lái)是 ViewController！

ViewController 實(shí)現(xiàn)

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

self.tableView.estimatedRowHeight = 2.0 
self.tableView.rowHeight = UITableViewAutomaticDimension

此時(shí)此刻，我們的 ViewController 看起來(lái)應(yīng)該像這樣：

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()
  }
}

你可能會(huì)好奇 tableFooterView 是干嘛的——這是一個(gè)小技巧，從 UITableView 移除不想要的 cell（這篇教程我們只需要三個(gè) cell）
來(lái)看看 dataSource 應(yīng)該如何實(shí)現(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
}

因?yàn)槲野褕D片命名為 “0”，“1”，“2”，我可以這么用

indexPath.row.description

來(lái)為每個(gè) cell 獲取圖片名字。值得注意的是，我把 isExpanded 變量設(shè)置為 false，但也可以加載 cell 為擴(kuò)展后狀態(tài)，如果你喜歡的話(huà)，只是另一種選擇罷了。
我想上面的代碼都明了了，但是 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() 
  }) 
}

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

改進(jìn)

我覺(jué)得還可以再增加一個(gè)功能?，F(xiàn)在，要讓 cell 合上，用戶(hù)需要直接點(diǎn)擊這個(gè) cell。要讓它對(duì)用戶(hù)更友好，點(diǎn)擊其它 cell 的任意位置來(lái)卷起當(dāng)前打開(kāi)的 cell，這是最好的。
和上面做的只要有一點(diǎn)不同就可以實(shí)現(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 被設(shè)置為 false，而不是設(shè)置為它的相對(duì)值。這防止了一種情況，就是用戶(hù)點(diǎn)擊一個(gè) cell 來(lái)收起它，然后選擇了其它的 cell，會(huì)導(dǎo)致兩個(gè)都被打開(kāi)。
在你測(cè)試 app 的時(shí)候，你可能注意到控制臺(tái)如下的警告了：

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.

還好，這很容易修復(fù)。只要到你的 storyboard 里然后改變高度 constraint 的 priority。999 就行