UITableView与UITableViewCells + AutoLayout - 不像它那样平滑*应该*

Question

我最近发布了一个关于UITableView的问题，其中自定义UITableCells在使用AutoLayout定位单元格的子视图时不流畅。我得到了一些评论，表明缺乏平滑性是由于细胞的复杂布局。虽然我同意单元格布局越复杂，但tableView必须做的计算越多，以获得单元格的高度，我不认为10-12 UIView和UILabel子视图应该导致滞后量I当我在iPad上滚动时看到了。

为了进一步证明我的观点，我创建了一个单独的UIViewController项目，其中包含一个UITableView子视图和自定义UITableViewCells，其子类中只有2个标签。滚动仍然不是很完美。从我的角度来看，这是你可以得到的最基本的 - 所以如果UITableView仍然没有这个设计的表现，我一定会遗漏一些东西。

下面使用的estimatedRowHeight 110是对实际行高平均值的非常接近的估计。当我使用＆＃39;用户界面检查器＆＃39;并且逐个查看每个细胞的高度，它们的范围从103到124.

请注意，当我将下面的代码切换为而不是时，请使用estimatedRowHeight和UITableViewAutomaticDimension而不是实现func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {，使用帧值计算高度，UITableView像黄油一样滚动。

应用程序的屏幕截图（供参考）

应用的源代码（滚动不完全顺畅）

// The custom `Quote` object that holds the
// properties for our data mdoel
class Quote {
    var text: String!
    var author: String!

    init(text: String, author: String) {
        self.text = text
        self.author = author
    }
}


// Custom UITableView Cell, using AutoLayout to
// position both a "labelText" (the quote itself)
// and "labelAuthor" (the author's name) label
class CellQuote: UITableViewCell {
    private var containerView: UIView!
    private var labelText: UILabel!
    private var labelAuthor: UILabel!


    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        contentView.backgroundColor = UIColor.whiteColor()

        containerView = UIView()
        containerView.backgroundColor = UIColor(
            red: 237/255,
            green: 237/255,
            blue: 237/255,
            alpha: 1.0
        )
        contentView.addSubview(containerView)
        containerView.translatesAutoresizingMaskIntoConstraints = false
        containerView.leadingAnchor.constraintEqualToAnchor(contentView.leadingAnchor, constant: 0).active = true
        containerView.trailingAnchor.constraintEqualToAnchor(contentView.trailingAnchor, constant: 0).active = true
        containerView.topAnchor.constraintEqualToAnchor(contentView.topAnchor, constant: 4).active = true
        containerView.bottomAnchor.constraintEqualToAnchor(contentView.bottomAnchor, constant: 0).active = true

        labelText = UILabel()
        labelText.numberOfLines = 0
        labelText.font = UIFont.systemFontOfSize(18)
        labelText.textColor = UIColor.darkGrayColor()

        containerView.addSubview(labelText)
        labelText.translatesAutoresizingMaskIntoConstraints = false
        labelText.leadingAnchor.constraintEqualToAnchor(containerView.leadingAnchor, constant: 20).active = true
        labelText.topAnchor.constraintEqualToAnchor(containerView.topAnchor, constant: 20).active = true
        labelText.trailingAnchor.constraintEqualToAnchor(containerView.trailingAnchor, constant: -20).active = true

        labelAuthor = UILabel()
        labelAuthor.numberOfLines = 0
        labelAuthor.font = UIFont.boldSystemFontOfSize(18)
        labelAuthor.textColor = UIColor.blackColor()

        containerView.addSubview(labelAuthor)
        labelAuthor.translatesAutoresizingMaskIntoConstraints = false
        labelAuthor.topAnchor.constraintEqualToAnchor(labelText.bottomAnchor, constant: 20).active = true
        labelAuthor.leadingAnchor.constraintEqualToAnchor(containerView.leadingAnchor, constant: 20).active = true
        labelAuthor.trailingAnchor.constraintEqualToAnchor(containerView.trailingAnchor, constant: -20).active = true
        labelAuthor.bottomAnchor.constraintEqualToAnchor(containerView.bottomAnchor, constant: -20).active = true

        self.selectionStyle = UITableViewCellSelectionStyle.None
    }

    func configureWithData(quote: Quote) {
        labelText.text = quote.text
        labelAuthor.text = quote.author
    }

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

}

// The UIViewController that is a 
class ViewController: UIViewController, UITableViewDataSource {

    var tableView: UITableView!
    var dataItems: [Quote]!

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView = UITableView()
        tableView.dataSource = self

        tableView.registerClass(CellQuote.self, forCellReuseIdentifier: "cellQuoteId")

        tableView.backgroundColor = UIColor.whiteColor()
        tableView.separatorStyle = UITableViewCellSeparatorStyle.None
        tableView.estimatedRowHeight = 110
        tableView.rowHeight = UITableViewAutomaticDimension

        view.addSubview(tableView)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true
        tableView.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 20).active = true
        tableView.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true
        tableView.bottomAnchor.constraintEqualToAnchor(view.bottomAnchor).active = true

        dataItems = [
            Quote(text: "One kernel is felt in a hogshead; one drop of water helps to swell the ocean; a spark of fire helps to give light to the world. None are too small, too feeble, too poor to be of service. Think of this and act.", author: "Michael.Frederick"),
            Quote(text: "A timid person is frightened before a danger, a coward during the time, and a courageous person afterward.", author: "Lorem.Approbantibus."),
            Quote(text: "There is only one way to defeat the enemy, and that is to write as well as one can. The best argument is an undeniably good book.", author: "Lorem.Fruitur."),
            // ... many more quotes ...
        ]

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    // MARK: - UITableViewDataSource

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataItems.count
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cellQuoteId") as! CellQuote
        cell.configureWithData(dataItems[indexPath.row])
        return cell
    }
}

我喜欢下面的亚特的建议，但我仍在努力调整它以适合我：

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    var cellHeights: [CGFloat] = [CGFloat]()

    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        if cellHeights.count == 0 {
            var cellHeights = [CGFloat]()
            let numQuotes: Int = dataItems.count

            for index in 0...numQuotes - 1 {
                let cell = CellQuote()
                let quote = dataItems[index]

                cell.configureWithData(quote)
                let size = cell.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize)
                cellHeights.append(size.height)
            }

            self.cellHeights = cellHeights
        }

        return self.cellHeights[indexPath.row]

    }
}

Answer 1

两个文本标签的清晰背景导致性能问题。添加这些行，您应该看到性能提升：

labelText.backgroundColor = containerView.backgroundColor
labelAuthor.backgroundColor = containerView.backgroundColor

检查任何其他潜在问题的好方法是在iOS模拟器的“调试”菜单选项中启用“颜色混合图层”

<强>更新

通常我为动态细胞高度做的是创建一个原型细胞并用它来进行尺寸调整。以下是您在案件中所做的事情：

class CellQuote: UITableViewCell {
    private static let prototype: CellQuote = {
        let cell = CellQuote(style: .Default, reuseIdentifier: nil)
        cell.contentView.translatesAutoresizingMaskIntoConstraints = false
        return cell
    }()

    static func heightForQuote(quote: Quote, tableView:UITableView) -> CGFloat {
        prototype.configureWithData(quote)
        prototype.labelText.preferredMaxLayoutWidth = CGRectGetWidth(tableView.frame)-40
        prototype.labelAuthor.preferredMaxLayoutWidth = CGRectGetWidth(tableView.frame)-40

        prototype.layoutIfNeeded();
        return CGRectGetHeight(prototype.contentView.frame)
    }

    // existing code here
}

在viewDidLoad中删除rowHeight和estimatedRowHeight行并替换为成为委托

class ViewController {
    override func viewDidLoad() {
        // existing code

        self.tableView.delegate = self

        // existing code
    }

    // get prototype cell height
    func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        let quote = dataItems[indexPath.row]
        return CellQuote.heightForQuote(quote, tableView: tableView)
    }

Answer 2

我从未发现自动行高机制与我们在自动布局出现之前使用的旧计算布局技术一样流畅。正如您可以通过使用Instruments看到的那样，瓶颈是运行时必须在每个新单元格上滚动到视图时调用systemLayoutSizeFittingSize:。

在我的书中，我展示了我的首选技术，即在表格视图首次出现时计算所有单元格一次的高度。这意味着从那时起我可以立即提供heightForRowAtIndexPath的答案，从而获得最佳的用户体验。此外，如果您使用更好，更现代的dequeueReusableCellWithIdentifier替换您对dequeueReusableCellWithIdentifier:forIndexPath的号召，那么您的优势就是该单元格以正确的大小来找你而不是在那之后需要进一步布局。