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

insertRowsAtIndexPath()

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

優(yōu)點

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

缺點

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

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

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

界面設(shè)置

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

自定義 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 的當(dāng)前狀態(tài)乱顾，相應(yīng)調(diào)整 *** 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 到控制器很簡單，設(shè)置 delegate 和 dateSource 為自己也一樣簡單伏伯，是吧橘洞？
要讓 UITableViewCell 可擴展，要讓它們的高度動態(tài)化

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

此時此刻舵鳞，我們的 ViewController 看起來應(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()
  }
}

你可能會好奇 tableFooterView 是干嘛的——這是一個小技巧震檩，從 UITableView 移除不想要的 cell（這篇教程我們只需要三個 cell）
來看看 dataSource 應(yīng)該如何實現(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 變量設(shè)置為 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 方法被調(diào)用了搂誉，以確保 cell 被卷起后下面的 cell 會回到它原本的位置。
就是這樣静檬，我們做到了炭懊！

改進(jìn)

我覺得還可以再增加一個功能。現(xiàn)在拂檩，要讓 cell 合上侮腹，用戶需要直接點擊這個 cell。要讓它對用戶更友好稻励，點擊其它 cell 的任意位置來卷起當(dāng)前打開的 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 被設(shè)置為 false至非，而不是設(shè)置為它的相對值。這防止了一種情況糠聪，就是用戶點擊一個 cell 來收起它荒椭，然后選擇了其它的 cell，會導(dǎo)致兩個都被打開舰蟆。
在你測試 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.

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