ios - 带有自定义单元格的 UITableView 在滚动时滞后

Question

我的问题是 UITableView 在滚动时滞后很多。

This is what I am trying to achieve

从顶部开始，我有一个简单的节标题，其中只有一个复选框和一个 UILabel。在此标题下，您可以看到一个自定义单元格，其中只有一个 UILabel 与中心对齐。此自定义单元格的工作方式类似于下面显示的数据的另一个标题(基本上是 3D 数组)。在这些“标题”下方是包含一个多行 UILabel 的自定义单元格，在此标签下方是一个容器，用于包含一个复选框和一个 UILabel 的可变行数。单元格右侧还有一个按钮(蓝色/白色箭头)。

所以这意味着内容显示如下:

• 部分标题(包含日期和日期)
• Custom UITableViewCell = header(包含一些header信息)
• 自定义 UITableViewCell(包含要显示的数据)

这是我的代码:

cellForRowAt:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let (isHeader, headerNumber, semiResult) = checkIfIsHeader(section: indexPath.section, row: indexPath.row)

        let row = indexPath.row

        if isHeader {
            let chod = objednavkaDny[indexPath.section].chody[headerNumber+1]
            let cell = tableView.dequeueReusableCell(withIdentifier: cellHeaderReuseIdentifier, for: indexPath) as! ObjednavkyHeaderTableViewCell
            cell.titleLabel.text = chod.popisPoradiJidla
            cell.selectionStyle = .none
            return cell
        }else{
            let chod = objednavkaDny[indexPath.section].chody[headerNumber]

            let cell = tableView.dequeueReusableCell(withIdentifier: reuseIdentifier, for: indexPath) as! ObjednavkyTableViewCell
            cell.updateData(objednavka: chod.objednavky[row-semiResult], canSetAmount: self.typDialogu == 3)
            return cell
        }
    }

checkIfIsHeader:

func checkIfIsHeader(section: Int, row: Int) -> (Bool, Int, Int){
        if let cachedResult = checkIfHeaderCache[section]?[row] {
            return (cachedResult[0] == 1, cachedResult[1], cachedResult[2])
        }

        var isHeader = false

        var semiResult = 0
        var headerNumber = -1

        for (index, chod) in objednavkaDny[section].chody.enumerated() {
            let sum = chod.objednavky.count
            if row == semiResult {
                isHeader = true
                break
            }else if row < semiResult {
                semiResult -= objednavkaDny[section].chody[index-1].objednavky.count
                break
            }else {
                headerNumber += 1
                semiResult += 1
                if index != objednavkaDny[section].chody.count - 1 {
                    semiResult += sum
                }
            }
        }
        checkIfHeaderCache[section] = [Int:[Int]]()
        checkIfHeaderCache[section]![row] = [isHeader ? 1 : 0, headerNumber, semiResult]
        return (isHeader, headerNumber, semiResult)
    }

以及显示数据的主单元格:

class ObjednavkyTableViewCell: UITableViewCell {

    lazy var numberTextField: ObjednavkyTextField = {
        let textField = ObjednavkyTextField()
        textField.translatesAutoresizingMaskIntoConstraints = false
        return textField
    }()

    let mealLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.textColor = .black
        label.textAlignment = .left
        label.font = UIFont(name: ".SFUIText", size: 15)
        label.numberOfLines = 0
        label.backgroundColor = .white
        label.isOpaque = true
        return label
    }()


    lazy var detailsButton: UIButton = {
        let button = UIButton(type: .custom)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setImage(UIImage(named: "arrow-right")?.withRenderingMode(.alwaysTemplate), for: .normal)
        button.imageView?.tintColor = UIColor.custom.blue.classicBlue
        button.imageView?.contentMode = .scaleAspectFit
        button.contentHorizontalAlignment = .right
        button.imageEdgeInsets = UIEdgeInsetsMake(10, 0, 10, 0)
        button.addTarget(self, action: #selector(detailsButtonPressed), for: .touchUpInside)
        button.backgroundColor = .white
        button.isOpaque = true
        return button
    }()

    let pricesContainerView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .white
        view.isOpaque = true
        return view
    }()


    var canSetAmount = false {
        didSet {
            canSetAmount ? showNumberTextField() : hideNumberTextField()
        }
    }


    var shouldShowPrices = false {
        didSet {
            shouldShowPrices ? showPricesContainerView() : hidePricesContainerView()
        }
    }

    var pricesContainerHeight: CGFloat = 0

    private let priceViewHeight: CGFloat = 30

    var mealLabelLeadingConstraint: NSLayoutConstraint?
    var mealLabelBottomConstraint: NSLayoutConstraint?
    var pricesContainerViewHeightConstraint: NSLayoutConstraint?
    var pricesContainerViewBottomConstraint: NSLayoutConstraint?

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.selectionStyle = .none
        setupView()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }


    @objc func detailsButtonPressed() {

    }


    func updateData(objednavka: Objednavka, canSetAmount: Bool) {
        self.canSetAmount = canSetAmount
        if let popisJidla = objednavka.popisJidla, popisJidla != "", popisJidla != " " {
            self.mealLabel.text = popisJidla
        }else{
            self.mealLabel.text = objednavka.nazevJidelnicku
        }


        if objednavka.objects.count > 1 {
            shouldShowPrices = true
            setPricesStackView(with: objednavka.objects)
            checkIfSelected(objects: objednavka.objects)
        }else{
            shouldShowPrices = false
            self.numberTextField.text = String(objednavka.objects[0].pocet)
            //setSelected(objednavka.objects[0].pocet > 0, animated: false)
            objednavka.objects[0].pocet > 0 ? setSelectedStyle() : setDeselectedStyle()
        }
    }

    //---------------

    func checkIfSelected(objects: [ObjednavkaObject]) {
        var didChangeSelection = false
        for object in objects {          // Checks wether cell should be selected or not
            if object.pocet > 0 {
                setSelected(true, animated: false)
                setSelectedStyle()
                didChangeSelection = true
                break
            }
        }
        if !didChangeSelection {
            setSelected(false, animated: false)
            setDeselectedStyle()
        }
    }


    //--------------

    func showNumberTextField() {
        numberTextField.isHidden = false

        mealLabelLeadingConstraint?.isActive = false
        mealLabelLeadingConstraint = mealLabel.leadingAnchor.constraint(equalTo: numberTextField.trailingAnchor, constant: 10)
        mealLabelLeadingConstraint?.isActive = true
    }

    func hideNumberTextField() {
        numberTextField.isHidden = true

        mealLabelLeadingConstraint?.isActive = false
        mealLabelLeadingConstraint = mealLabel.leadingAnchor.constraint(equalTo: readableContentGuide.leadingAnchor, constant: 0)
        mealLabelLeadingConstraint?.isActive = true
    }

    func showPricesContainerView() {
        hideNumberTextField()

        pricesContainerView.isHidden = false

        mealLabelBottomConstraint?.isActive = false
        pricesContainerViewBottomConstraint?.isActive = true
    }

    func hidePricesContainerView() {
        pricesContainerView.isHidden = true

        pricesContainerViewBottomConstraint?.isActive = false
        mealLabelBottomConstraint?.isActive = true
    }

    //--------------

    func setSelectedStyle() {
        self.backgroundColor = UIColor.custom.blue.classicBlue
        mealLabel.textColor = .white
        mealLabel.backgroundColor = UIColor.custom.blue.classicBlue

        for subview in pricesContainerView.subviews where subview is ObjednavkyPriceView {
            let priceView = (subview as! ObjednavkyPriceView)
            priceView.titleLabel.textColor = .white
            priceView.checkBox.backgroundColor = UIColor.custom.blue.classicBlue
            priceView.titleLabel.backgroundColor = UIColor.custom.blue.classicBlue
            priceView.backgroundColor = UIColor.custom.blue.classicBlue
        }

        pricesContainerView.backgroundColor = UIColor.custom.blue.classicBlue

        detailsButton.imageView?.tintColor = .white
        detailsButton.backgroundColor = UIColor.custom.blue.classicBlue

    }

    func setDeselectedStyle() {
        self.backgroundColor = .white
        mealLabel.textColor = .black
        mealLabel.backgroundColor = .white

        for subview in pricesContainerView.subviews where subview is ObjednavkyPriceView {
            let priceView = (subview as! ObjednavkyPriceView)
            priceView.titleLabel.textColor = .black
            priceView.checkBox.backgroundColor = .white
            priceView.titleLabel.backgroundColor = .white
            priceView.backgroundColor = .white
        }

        pricesContainerView.backgroundColor = .white

        detailsButton.imageView?.tintColor = UIColor.custom.blue.classicBlue
        detailsButton.backgroundColor = .white
    }

    //-----------------

    func setPricesStackView(with objects: [ObjednavkaObject]) {
        let subviews = pricesContainerView.subviews
        var subviewsToDelete = subviews.count

        for (index, object) in objects.enumerated() {
            subviewsToDelete -= 1
            if subviews.count - 1 >= index {
                let priceView = subviews[index] as! ObjednavkyPriceView
                priceView.titleLabel.text = object.popisProduktu  // + " " + NSNumber(value: object.cena).getFormattedString(currencySymbol: "Kč") // TODO: currencySymbol
                priceView.canSetAmount = canSetAmount
                priceView.count = object.pocet
                priceView.canOrder = (object.nelzeObj == nil || object.nelzeObj == "")
            }else {
                let priceView = ObjednavkyPriceView(frame: CGRect(x: 0, y: CGFloat(index) * priceViewHeight + CGFloat(index * 5), width: pricesContainerView.frame.width, height: priceViewHeight))
                pricesContainerView.addSubview(priceView)
                priceView.titleLabel.text = object.popisProduktu  // + " " + NSNumber(value: object.cena).getFormattedString(currencySymbol: "Kč") // TODO: currencySymbol
                priceView.numberTextField.delegate = self
                priceView.canSetAmount = canSetAmount
                priceView.canOrder = (object.nelzeObj == nil || object.nelzeObj == "")
                priceView.count = object.pocet
                pricesContainerHeight += ((index == 0) ? 30 : 35)
            }
        }

        if subviewsToDelete > 0 {  // Deletes unwanted subviews
            for _ in 0..<subviewsToDelete {
                pricesContainerView.subviews.last?.removeFromSuperview()
                pricesContainerHeight -= pricesContainerHeight + 5
            }
        }

        if pricesContainerHeight < 0 {
            pricesContainerHeight = 0
        }

        pricesContainerViewHeightConstraint?.constant = pricesContainerHeight
    }

    func setupView() {
        self.layer.shouldRasterize = true
        self.layer.rasterizationScale = UIScreen.main.scale

        self.backgroundColor = .white

        contentView.addSubview(numberTextField)
        contentView.addSubview(mealLabel)
        contentView.addSubview(detailsButton)
        contentView.addSubview(pricesContainerView)

        setupConstraints()
    }

    func setupConstraints() {
        numberTextField.anchor(leading: readableContentGuide.leadingAnchor, size: CGSize(width: 30, height: 30))
        numberTextField.centerYAnchor.constraint(equalTo: mealLabel.centerYAnchor).isActive = true

        detailsButton.anchor(trailing: readableContentGuide.trailingAnchor, size: CGSize(width: 30, height: 30))
        detailsButton.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true

        mealLabel.anchor(top: contentView.topAnchor, trailing: detailsButton.leadingAnchor, padding: .init(top: 10, left: 0, bottom: 0, right: -10))
        mealLabelBottomConstraint = mealLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10)
        mealLabelBottomConstraint?.priority = UILayoutPriority(rawValue: 999)

        pricesContainerView.anchor(top: mealLabel.bottomAnchor, leading: readableContentGuide.leadingAnchor, trailing: detailsButton.leadingAnchor, padding: .init(top: 10, left: 0, bottom: 0, right: -10))
        pricesContainerViewBottomConstraint = pricesContainerView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10)
        pricesContainerViewBottomConstraint?.priority = UILayoutPriority(rawValue: 999)

        pricesContainerViewHeightConstraint = pricesContainerView.heightAnchor.constraint(equalToConstant: 0)
        pricesContainerViewHeightConstraint?.priority = UILayoutPriority(rawValue: 999)
        pricesContainerViewHeightConstraint?.isActive = true
    }
}

总结一下它是如何完成的:

• tableView.rowHeight 设置为 UITableViewAutomaticDymension
• 在 cellForRowAt 中，我从数组中获取数据并将其提供给细胞
• 所有单元格都使用约束在代码中设置
• 所有 View 都设置了isOpaque = true
• 缓存单元格的高度
• 单元格设置为栅格化

我还注意到它在某些滚动级别滞后，有时它工作得很好，有时它滞后很多。

尽管我进行了所有优化，但 tableView 在滚动时仍然滞后。

Here is a screenshot from Instruments

非常感谢任何有关如何提高滚动性能的提示!

(我可能忘记包含一些代码/信息，所以请随时在评论中问我。)

Answer 1

我无法告诉您延迟发生的确切位置，但当我们谈论滚动期间的延迟时，它与您的 cellForRowAt 委托(delegate)方法有关。发生的事情是在这个方法中发生了太多事情，并且它被调用用于显示和将要显示的每个单元格。我看到您正在尝试通过 checkIfHeaderCache 缓存结果，但仍然在最开始有一个 for 循环来确定标题单元格。

建议:我不知道你从哪里得到数据 (objednavkaDny) 但在你得到数据之后，做一个完整的循环并一个一个地确定单元格类型，并将结果保存在你的基础上设计。在此加载期间，您可以在屏幕上显示一些加载消息。然后，在 cellForRow 方法中，您应该只是简单地使用诸如

if (isHeader) {
  render header cell
} else {
  render other cell
}

底线:cellForRow 方法不是为处理繁重的计算而设计的，如果这样做会减慢滚动速度。此方法仅用于将值分配给缓存的 TableView 单元格，这是它唯一擅长的事情。