綜述

講到 UITableView,大家一定都不陌生。有一個相對夸張的說法，叫做學好 UITableView，你就是一名合格的iOS 工程師

閑話少說，最近在寫 Swift 的過程中碰到了以下幾個問題，特別在此記錄。

遇到的問題

• cellForRowAtIndexPath 代理中，對 cell(尤其是自定義cell) 的初始化異同
  • 和OC的區別 —— 不能使用OC的那種判空方式來初始化
  • 初始化不能使用自定義的方法 —— 通過dequeue方法得到的cell 永遠都是非空的，換言之，即便你自定義了一個初始化方法，它也不會被執行到。
  • 通過渲染方式（render）來繪制圖像，賦值
  • 理解cell的復用機制
• 刷新的問題
  • 使用 reloadData時候，在iOS 11 上會產生抖動
  • insertRow 和 deleteRow 和 reloadRows 一樣都屬于局部刷新的范疇，局部刷新時，系統會創建一個新的cell來，并和舊的cell在刷新時來回切換。

先明確幾個概念

• 代碼中的 setup 表示只會執行一次，而且在 cell 的初始化中表示他的繪圖（不帶數據）也只會執行一次
• 代碼中的render 表示渲染，實際上是意味著setup已經完成了繪圖，我要在每次重用時把數據傳進去渲染

重申 Cell 的復用機制和使用

簡單的來說，tableview 的復用機制是我們在 cellForRowAtIndexPath 的一系列操作。

• Cell 的 UI 一旦被創建，系統就會存放在復用池中等待復用。
• Cell 的可變內容（通常是label的text，image的內容，選中的背景色等），是不會記錄的。
• 刪除某個 Cell 后再創建一個新的 Cell, 實際上你會發現新的 Cell 中有部分 UI 時舊 Cell中的
• reloadRows 局部刷新時會創建新的 Cell，再刷新時會和舊的Cell來回切換

很簡單的情況是，如果我們不每次滾動的時候去dataSource數組中把對應index的數值取出來，只管的感受就是UI雖然固定，但是數據和圖片一直在亂跑

鑒于Swift 無法自定義cell的初始化，那么上下滾動時，怎么重新賦值而不重復繪制就顯得格外重要。

關于 cellForRowAtIndexPath 的初始化問題其實在這篇文章中已經討論過，這里不作贅述
Swift 踩坑筆記（二）—— 初始化Tableview 及自定義 TableviewCell

我們要討論的是在Cell復用過程中的賦值和 UI 重疊的問題。

典型案例 —— Cell 的 UI 內容根據數據而定

描述

根據上面所說的，Cell的UI 在被創建后，就會被放進復用池中，等待被重用。但是如果像下面這種情況：

一個TableView 中每個Cell 的內容是根據數據中數組的個數來渲染的，就會出問題：

image.png

除了頂部的 Header區域是固定知道的高度外，下面的 區域 InfoA, InfoB, InfoC ...等等，都是根據具體的信息去繪制的。
換言之，我不知道每個 Cell 具體要畫幾個 InfoX

這樣會造成一個很大的問題：

• 因為根據復用機制，數據是每次都有可能不同的，而根據數據創建的 UI 一旦被創建，就會一直存在于復用池中。
• 如果 Cell 發生了刪除，再添加，就有可能將那些不用的Cell UI 復用進來。
• 局部刷新時會創建新的 Cell，這時候疊加在舊的UI上切換時，就會造成視圖的重疊

來看下錯誤的現象圖

局部刷新的效果

局部刷新的效果.gif

使用 reveal 查看，發現多了一個層級UI，蓋在應該有的位置（）

image.png

正確的代碼

為了避免混淆，我這里就不貼原來錯誤的代碼了。

來看下面正確的代碼

// tableview 代理
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: someCellID, for: indexPath) as! MyCell
    cell.renderCell(info: dataSource[indexPath.row])
    return cell
}

思路：

• 上面的圖中，Header的部分是固定的，也就是不是動態變化的 UI，因此每次render的時候只要重新賦值即可
• 而下面的infoA, infoB, infoC...是根據數值來變化的。我們現在能做的就是對于動態的 Cell UI，先把這幾個 subView都removeFromSuperView 避免干擾，然后setUp重繪一次，再render進賦值。

再來看下面的這段 自定義 Cell 的代碼

  // 略去類的初始化，這里為了  render ,去持有靜態的 UI
    private var headerBaseInfoView: BaseInfoView = BaseInfoView()

    public func renderCell(info: accountModel) {
    // 除了靜態的 UI,剩下的都remove 掉，避免重用時的干擾
        for view in contentView.subviews {
            guard view != headerBaseInfoView else {
                continue
            }
            view.removeFromSuperview()
        }
        
        headerBaseInfoView.render(renderInfo: info.baseInfo!)
        setupAndRenderInfoViews(bindInfos)
    }
    
    private func setupAndRenderInfoViews(_ bindInfos: [infoModel]) {
        var infoViews: [infoView] = []
        for (index, bindInfo) in bindInfos.enumerated() {
            // 創建后渲染數據
            let bindInfoView = InfoView()
            bindInfoView.render(bindInfo: bindInfo)
            
            // 布局 （也可以先布局再渲染數據，這無所謂）
            contentView.addSubview(bindInfoView)
            bindInfoView.snp.makeConstraints { (make) in
                //這里略去約束的部分
            }
            infoViews.append(bindInfoView)
        }
    }

下面是講解：

• 類中要去持有靜態的視圖，作為屬性內容。
• headerBaseInfoView 是固定的內容，所以實際上我們在重寫他的初始化方法的時候，直接就把 setupUI()(只會執行一次)這個繪圖的工作做掉了
• infoViews 屬于我一開始沒辦法知道你有幾個，所以我無法初始化。只在每次渲染數據的時候：
  • 先將所有動態視圖remove掉
  • 根據數據內容重新渲染視圖并賦值（也可以先賦值再渲染數據，不影響）

刷新的問題

先來說說 reloadData的缺點

• 性能問題
  我們都知道，UITableview中 reloadData 是需要慎用的。因為他會將整個tableview 都刷新一遍。這意味著也許我只需要刷新2個cell，你卻讓所有的cell都重渲染了一遍。從性能而言這顯然是不可取的。
  所以我們才會想到去用局部刷新。

• reloadData 無法像系統提供的其他刷新方法一樣，帶有animate參數，這讓刷新時，整個頁面看起來非常突兀。如果你不自己加動畫，那么體驗真的不太好

• 在 iOS 11 上會有一個問題，就是重載之后頁面會亂跑：
  

  頁面亂跑.gif

  • 解決辦法： google后，得到的內容是說
    Self-Sizing在iOS11下是默認開啟的，Headers, footers, and cells都默認開啟Self-Sizing，所有estimated 高度默認值從iOS11之前的 0 改變為UITableViewAutomaticDimension

    if #available(iOS 11.0, *) {
      taleview.estimatedRowHeight = 0
      taleview.estimatedSectionHeaderHeight = 0
      taleview.estimatedSectionFooterHeight = 0
    }
    

局部刷新的問題

鑒于上面講的reloadData，我們很自然的就會想到使用局部刷新來做。

tableview.beginUpdates()
tableview.reloadRows(at: tableview.indexPathsForVisibleRows!, with: .none)
tableview.endUpdates()

實際上和 reload 沒有太多的差異，只是注意局部刷新，會創建新的Cell。

下面兩篇文章也提到了類似的問題。
參考文章一
慎用局部刷新

因為之前對重用機制的理解存在誤區，所以文章內容更新了。