如何提高其中具有多個stackviews的表的滾動速度？

Question

我有一個UITableView ，其中有多個UIStackView作為項目。 在那些UIStackView我添加彩色正方形作為子視圖。 問題是，它嚴重減慢了垂直滾動。

如何改善滾動性能？

這是滾動的外觀： https : //gfycat.com/DentalContentIndigowingedparrot

這是源代碼： https : //github.com/Cook10/StackTableProblem

Answer 1

您錯過了重用單元格的意義。 您的代碼：

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! MyTableViewCell

    addStacksToTableCell(cell.stack1)
    addStacksToTableCell(cell.stack2)
    addStacksToTableCell(cell.stack3)
    addStacksToTableCell(cell.stack4)

    return cell
}

每次向下滾動並顯示一個新的單元格時，都將刪除其中的所有視圖（400個視圖），並創建新視圖（400個視圖），從而觸發昂貴的布局和重新渲染機制。

每次滾動時都會發生這種情況。

這完全破壞了重用細胞的目的。 就像每次創建一個新單元格一樣。

相反，僅創建一次視圖，並且在重新使用單元格時，僅更新內部視圖的顏色。 不要僅僅為了改變顏色而重新創建視圖。

使用一些非常幼稚的更改：

添加到您的單元格：

var createdViews: Bool = false
var views1: [UIView] = []
var views2: [UIView] = []
var views3: [UIView] = []
var views4: [UIView] = []

然后將您的控制器方法替換為：

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! MyTableViewCell

    if !cell.createdViews {
        cell.views1 = addStacksToTableCell(cell.stack1)
        cell.views2 = addStacksToTableCell(cell.stack2)
        cell.views3 = addStacksToTableCell(cell.stack3)
        cell.views4 = addStacksToTableCell(cell.stack4)

        cell.createdViews = true
    } else {
        // only update the views
        cell.views1.forEach { $0.backgroundColor = UIColor.random() }
        cell.views2.forEach { $0.backgroundColor = UIColor.random() }
        cell.views3.forEach { $0.backgroundColor = UIColor.random() }
        cell.views4.forEach { $0.backgroundColor = UIColor.random() }
    }

    return cell
}

func addStacksToTableCell(_ stack: UIStackView) -> [UIView] {

    stack.removeAllArrangedSubviews()

    var views: [UIView] = []

    for i in 0..<ITEMS{
        let image = UIImageView()
        image.backgroundColor = UIColor.random()
        stack.addArrangedSubview(image)

        let width = NSLayoutConstraint(item: image, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 50)
        let height = NSLayoutConstraint(item: image, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 50)

        image.addConstraints([width,height])

        views.append(image)
    }

    return views
}

Answer 2

它不是100％與此特定情況相關，但是另一種改善單元格滾動的方法是：

在iOS中，您可以使用“自動布局”來定義表格視圖單元格的高度； 但是，默認情況下未啟用該功能。

通常，單元格的高度由表視圖委托的tableView：heightForRowAtIndexPath：方法確定。 要啟用自動調整大小的表格視圖單元格，必須將表格視圖的rowHeight屬性設置為UITableViewAutomaticDimension 。 您還必須將一個值分配給estimatedRowHeight屬性。 一旦設置了這兩個屬性，系統就會使用“自動布局”來計算行的實際高度。

tableView.estimatedRowHeight = 85.0
tableView.rowHeight = UITableViewAutomaticDimension

接下來，在單元格的內容視圖中布置表格視圖單元格的內容。 要定義單元格的高度，您需要不間斷的約束和視圖鏈（具有定義的高度）來填充內容視圖的頂部邊緣與其底部邊緣之間的區域。 如果您的視圖具有固有的內容高度，則系統將使用這些值。 如果不是，則必須將適當的高度限制添加到視圖或內容視圖本身。

此外，嘗試使估計的行高盡可能准確。 系統根據這些估計來計算諸如滾動條高度之類的項目。 估算越准確，用戶體驗就越無縫。

祝你一切順利。