ios - 带有 UITableViewCells + AutoLayout 的 UITableView - 不像*应该*那样平滑

Question

我最近发布了一个关于带有自定义 UITableCells 的 UITableView 的问题，当使用 AutoLayout 定位单元格的 subview 时，该问题并不流畅。我收到一些评论，表明缺乏平滑度是由于单元格的复杂布局造成的。虽然我同意单元格布局越复杂，tableView 必须进行更多计算才能获得单元格的高度，但我认为 10-12 UIView 和 UILabel subview 不会导致我在滚动时看到的延迟量一台 iPad。

因此，为了进一步证明我的观点，我创建了一个 UIViewController 项目，其中包含一个 UITableView subview 和自定义 UITableViewCells，其子类中只有 2 个标签。而且滚动仍然不是很流畅。从我的角度来看，这是您可以获得的最基本的 - 因此，如果 UITableView 仍然无法满足此设计的要求，那么我一定是遗漏了一些东西。

下面使用的 110 的 estimatedRowHeight 是对实际行高平均值的非常接近的估计。当我使用“用户界面检查器”并逐个查看每个单元格的高度时，它们的范围是 103 - 124。

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

App截图(供引用)

应用源代码(滚动不是很流畅)

// 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
    }
}

我喜欢下面 matt 的建议，但我仍在尝试调整它以使其适合我:

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

我从未发现自动行高机制与我们在自动布局出现之前使用的旧计算布局技术一样流畅。使用 Instruments 很容易看出瓶颈，即运行时必须在每个新单元格滚动到 View 中时调用 systemLayoutSizeFittingSize:。

在我的书中，我演示了我的首选技术，即在表格 View 首次出现时计算所有单元格的高度一次。这意味着我可以从那时起立即为 heightForRowAtIndexPath 提供答案，从而获得最佳的用户体验。此外，如果您随后将对 dequeueReusableCellWithIdentifier 的调用替换为更好、更现代的 dequeueReusableCellWithIdentifier:forIndexPath，那么您的优势在于，单元格 正确的大小，并且在那之后不需要进一步的布局。