ios - 我们如何在自定义表格单元格中实现具有动态内容的动态项目？

Question

如果内容在自定义表格 View 单元格中超过 super View ，如何在下一行中实现具有动态内容大小的动态项目数？

请参阅图片以澄清问题。

Answer 1

您发布的问题有点长，实际上要求多项内容，因为您没有发布您尝试过的内容以及遇到问题的部分。有很多方法可以做到这一点，所以让我们从普通标签开始:

UILabel 可以在 attributedText 下包含属性字符串，可用于实现您在图像中显示的视觉设计。为了水平放置它们，我们可以使用 sizeToFit 来获取它们的宽度。假设如下:

func layoutLabels(_ labels: [UILabel], inView view: UIView, horizontalSeparator: CGFloat = 4.0) {
    var x: CGFloat = 0.0
    labels.forEach { label in
        label.sizeToFit() // Will make it's size just right
        label.frame = CGRect(x: x, y: 0.0, width: label.frame.width, height: label.frame.height)
        x = label.frame.maxX + horizontalSeparator
        view.addSubview(label)
    }
}

现在要添加垂直部分，我们只需添加最大宽度并添加 y 组件:

func layoutLabels(_ labels: [UILabel], inView view: UIView, maximumWidth: CGFloat, lineHeight: CGFloat, horizontalSeparator: CGFloat = 4.0, verticalSeparator: CGFloat = 2.0) {
    var x: CGFloat = 0.0
    var y: CGFloat = 0.0
    labels.forEach { label in
        label.sizeToFit() // Will make it's size just right
        var newX = x + label.frame.width

        if newX > maximumWidth {
            if x == 0.0 {
                // We are at the beginning of the line and a single label is simply too large. We will need to reduce it's width
                label.frame = CGRect(x: x, y: y, width: maximumWidth, height: label.frame.height)
            } else {
                // We should go into new line
                x = 0.0
                y += lineHeight
                label.frame = CGRect(x: x, y: y, width: min(label.frame.width, maximumWidth), height: label.frame.height)
                newX = x + label.frame.width
            }
        } else {
            label.frame = CGRect(x: x, y: y, width: min(label.frame.width, maximumWidth), height: label.frame.height)
        }

        x = newX + horizontalSeparator
        view.addSubview(label)
    }
}

现在您应该可以按照图像上的方式填充标签。我们还会检查是否有不适合 View 整体宽度的换行符和标签。所以现在我们需要定义 View 的实际大小。 y 应该返回该值，但我们需要能够在 TableView 单元格中使用它。所以我们可以简单地返回它:

func layoutLabels(_ labels: [UILabel], inView view: UIView, maximumWidth: CGFloat, lineHeight: CGFloat, horizontalSeparator: CGFloat = 4.0, verticalSeparator: CGFloat = 2.0) -> CGFloat {
    ...
    return labels.count > 0 ? y + lineHeight : 0.0
}

现在，在 TableView 单元格中，最好使用一些约束导出:

protocol Tag {
    func createLabel() -> UILabel
}

class Cell: UITableViewCell {

    @IBOutlet private var tagsPanel: UIView!
    @IBOutlet private var tagsPanelHeightConstraint: NSLayoutConstraint?

    var tags: [Tag]!

    func refresh() {
        tagsPanel.subviews.forEach { $0.removeFromSuperview() } // Ugly, needs improvement
        let height = layoutLabels(tags.map { $0.createLabel() }, inView: tagsPanel, maximumWidth: tagsPanel.frame.width, lineHeight: 40.0)
        tagsPanelHeightConstraint?.constant = height
    }

}

现在的问题是您的 TableView 需要刷新，因为您的 TableView 单元格可能已调整大小。您将需要对 TableView 的引用以及对其进行简单的调用开始/结束更新。

var tags: [Tag]!

weak var tableView: UITableView? // Assigned in cellForRowAtIndexPath

func refresh() {
    tagsPanel.subviews.forEach { $0.removeFromSuperview() } // Ugly, needs improvement
    let height = layoutLabels(tags.map { $0.createLabel() }, inView: tagsPanel, maximumWidth: tagsPanel.frame.width, lineHeight: 40.0)
    if let tagsPanelHeightConstraint = tagsPanelHeightConstraint, tagsPanelHeightConstraint.constant != height {
        tagsPanelHeightConstraint.constant = height
        tableView?.beginUpdates()
        tableView?.endUpdates()
    }

}

祝你好运。