ios - 如何为具有灵活高度和固定宽度的 View 覆盖 intrinsictContentSize？

Question

我正在尝试在 tableView 中显示自定义 View 并让 iOS 使用 UITableViewAutomaticDimension 计算每一行的高度.不幸的是，我的牢房尺寸不合适(高度不好)。

我的自定义 View 定义如下(出于多种原因，我没有为此部分使用 AutoLayout，并且我不想使用它):

class MyView : UIView {
    var label: UILabel!

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }

    func setupView() {
        label = UILabel()
        label.numberOfLines = 0
        addSubview(label)
    }

    func setText(text: String) {
        label.text = text
        setNeedsLayout()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        label.frame = bounds
        invalidateIntrinsicContentSize()
    }

    override var intrinsicContentSize: CGSize {
        guard let text = label.text else { return .zero }
        let width = bounds.width
        let height = text.heightWithConstrainedWidth(width: width, font: label.font)
        return CGSize(width: width, height: height)
    }
}

现在，我将这个自定义 View 包装在 UITableViewCell 中。在 UITableView 中使用它.这里我使用自动布局:

class MyCell : UITableViewCell {
    var myView: MyView!

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

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupCell()
    }

    func setupCell() {
        myView = MyView()
        contentView.addSubview(myView)
        myView.snp.makeConstraints { make in
            make.edges.equalTo(contentView)
        }
    }
}

现在，使用下面的 viewController，我显示一个带有大文本的单元格，以查看它的高度是否被自动计算:

class ViewController: UIViewController {
    var tableView: UITableView!

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        tableView = UITableView()
        view.addSubview(tableView)
        tableView.snp.makeConstraints { make in
            make.edges.equalTo(view)
        }
        tableView.register(MyCell.self, forCellReuseIdentifier: "MyCell")
        tableView.rowHeight = UITableViewAutomaticDimension
        tableView.estimatedRowHeight = 30
        tableView.dataSource = self
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell") as! MyCell
        cell.myView.setText(text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur")
        return cell
    }
}

不幸的是，单元格的高度等于 21。即使最后 intrinsicContentSize 返回的高度也是如此。调用 MyView是 143。这是结果的屏幕截图:


如果单元格被回收，则单元格的大小正确(我将单元格滚动到屏幕外):


我知道 intrinsictContentSize的 MyView使用它的框架，它不应该，但我不知道如何设计一个 UIView 子类，它在给定宽度的情况下具有灵活的高度。考虑到我调用 invalidateIntrinsicContentSize()，我认为它会起作用。在 MyView 的 layoutSubviews() .

如何更改此代码以从一开始就具有良好的单元格高度？

Answer 1

文档建议覆盖 intrinsicContentSize可能不是实现您想要实现的目标的最佳方式。正如您所观察到的，从 UIView类引用:

Setting this property allows a custom view to communicate to the layout system what size it would like to be based on its content. This intrinsic size must be independent of the content frame, because there’s no way to dynamically communicate a changed width to the layout system based on a changed height, for example.

MyView的 bounds直到其 intrinsicContentSize 之后才设置已被请求，并且在自动布局上下文中不保证在 layoutSubviews() 之前的任何时间都已设置叫做。有一种方法可以解决这个问题，并将宽度传递给您的自定义 View 以在 intrinsicContentSize 中使用。 ，但是，我已将其作为此答案中的第二个选项。

选项 1:通过覆盖 sizeThatFits(_:) 手动布局

首先，在没有自动布局的情况下，配置 MyView 及其标签 subview 以适本地调整自己的大小和大小:

//  MyView.swift

func setupView() {
    label = UILabel()
    label.numberOfLines = 0
    label.autoresizingMask = [.flexibleWidth] // New
    addSubview(label)
}

override func layoutSubviews() {
    super.layoutSubviews()
    label.sizeToFit() // New
}

override func sizeThatFits(_ size: CGSize) -> CGSize {
    return label.sizeThatFits(size) // New
}

MyView 现在将根据其标签 subview 的大小调整自己的大小，并且标签将根据其父 View 的宽度(因为它的 .flexibleWidth 自动调整大小掩码)和它的文本内容(因为 numberOfLines 设置为 0 )。如果 MyView 有其他 subview ，则需要计算并返回 sizeThatFits(_:) 中的总大小。 .

其次，我们希望 UITableView 能够根据上面的手动布局计算其单元格和自定义 subview 的高度。调整单元格大小时，UITableView 调用 systemLayoutSizeFitting(_:withHorizontalFittingPriority:verticalFittingPriority) 在每个单元格上，依次调用 sizeThatFits(_:) 在细胞上。 (见 WWDC 2014 Session 226。)

传递给这些方法的目标大小或拟合大小是高度为零的表格 View 的宽度。水平拟合优先级为 UILayoutPriorityRequired .您可以通过覆盖自定义单元子类中的其中一种方法(前者用于自动布局，后者用于手动布局)并使用传入的大小的宽度来计算并返回细胞。

在这种情况下，单元格的大小是 myView 的大小。 :

//  MyCell.swift

override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {
    return myView.sizeThatFits(targetSize)
}

你完成了。

选项 2:通过覆盖 intrinsicContentSize 自动布局

由于 MyView 的大小取决于其标签的大小，因此第一步是确保标签的位置和大小正确。你已经这样做了:

//  MyView.swift

override func layoutSubviews() {
    super.layoutSubviews()
    label.frame = bounds
}

第二步是定义 MyView 的内在内容大小。在这种情况下，没有固有宽度(因为该尺寸将完全由单元格或其他超 View 确定)，并且固有高度是标签的固有高度:

//  MyView.swift

override var intrinsicContentSize: CGSize {
    return CGSize(width: UIViewNoIntrinsicMetric, height: label.intrinsicContentSize.height)
}

因为您的标签是多行标签，所以在没有最大宽度的情况下无法确定其固有高度。默认情况下，在没有最大宽度的情况下，UILabel 将返回适合单行标签的固有内容大小，这不是我们想要的。

为计算其内在内容大小而为多行标签提供最大宽度的唯一记录方法是 preferredMaxLayoutWidth 属性(property)。 UILabel 的头文件为该属性提供了以下注释:

// If nonzero, this is used when determining -intrinsicContentSize for multiline labels

所以第三步是保证 preferredMaxLayoutWidth设置为适当的宽度。作为 intrinsicContentSize属性构成自动布局过程的一部分并且仅与自动布局过程相关，并且您的自定义单元子类是执行自动布局的代码的唯一部分，设置布局首选项的适当位置在该类中:

//  MyCell.swift

override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {
    myView.label.preferredMaxLayoutWidth = targetSize.width
    myView.invalidateIntrinsicContentSize()

    return super.systemLayoutSizeFitting(targetSize, withHorizontalFittingPriority: horizontalFittingPriority, verticalFittingPriority: verticalFittingPriority)
}

如果 MyView 有多个多行标签，或者如果您希望将 MyView 的 subview 层次结构隐藏在其父 View 之外，您同样可以创建自己的 preferredMaxLayoutWidth MyView 上的属性并执行。

上述代码将确保 MyView 计算并返回适当的 intrinsicContentSize基于其多行标签的内容，并且大小在旋转时无效。