添加新单元格时 UITableViewCell 约束中断

Question

我有一个UITableViewController，它是 3 种不同细胞类型的组合。我在将新单元格推送到表格视图并调用重新加载数据时出现了一个奇怪的错误。

这是我的表格视图，在它中断之前

此时，添加了 2 个新单元格并调用了 reloadData。

正如您所见，突出显示的单元格现在有非常不正确的约束，实际上在模拟器中上下滚动会导致其他单元格损坏。好像问题随机地从一个单元跳到另一个单元。

控制台确实输出了一个调试错误，但是我不确定如何做出正面或反面

    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x60000201ccd0 UIImageView:0x7ffb7bd4d740.trailing == UILayoutGuide:0x600003a79ea0'UIViewLayoutMarginsGuide'.trailing   (active)>",
    "<NSLayoutConstraint:0x60000201c3c0 UIView:0x7ffb7bd4d970.leading == UILayoutGuide:0x600003a79ea0'UIViewLayoutMarginsGuide'.leading + 15   (active)>",
    "<NSLayoutConstraint:0x6000020194a0 H:[UIImageView:0x7ffb7bd4d740]-(15)-[UIView:0x7ffb7bd4d970]   (active)>",
    "<NSLayoutConstraint:0x600002012d50 'UIView-Encapsulated-Layout-Width' UITableViewCellContentView:0x7ffb7bd53580.width == 375   (active)>",
    "<NSLayoutConstraint:0x60000201d7c0 'UIView-leftMargin-guide-constraint' H:|-(16)-[UILayoutGuide:0x600003a79ea0'UIViewLayoutMarginsGuide'](LTR)   (active, names: '|':UITableViewCellContentView:0x7ffb7bd53580 )>",
    "<NSLayoutConstraint:0x60000201c690 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x600003a79ea0'UIViewLayoutMarginsGuide']-(16)-|(LTR)   (active, names: '|':UITableViewCellContentView:0x7ffb7bd53580 )>"
)

我以编程方式设置约束，此视图中没有情节提要或笔尖。

对于如何解决此问题，我非常感谢一些指导或指导。

   private let chatCellId = "chatCellId"
    private let mediaCellId = "mediaCellId"
    private let ctaCellId = "ctaCellId"

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.register(ChatMessageCell.self, forCellReuseIdentifier: chatCellId)
        tableView.register(MediaMessageCell.self, forCellReuseIdentifier: mediaCellId)
        tableView.register(CTAMessageCell.self, forCellReuseIdentifier: ctaCellId)

        tableView.tableFooterView = UIView()
        tableView.separatorStyle = .none
        tableView.backgroundColor = UIColor.clear

        tableView.rowHeight = UITableViewAutomaticDimension
        tableView.estimatedRowHeight = 300

        viewModel.reloadData = { [unowned self] in
            DispatchQueue.main.async {
                self.reloadTableView()
            }
        }

        viewModel.fetchBotResponse(byKey: "welcome")
        vc.delegate = self

    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cellType = viewModel.messages[indexPath.row].type

        if cellType == .media {
            let cell = tableView.dequeueReusableCell(withIdentifier: mediaCellId, for: indexPath) as! MediaMessageCell
            cell.content = viewModel.messages[indexPath.row]
            return cell
        } else if cellType == .callToAction {
            let cell = tableView.dequeueReusableCell(withIdentifier: ctaCellId, for: indexPath) as! CTAMessageCell
            cell.content = viewModel.messages[indexPath.row]
            return cell
        } else {
            let cell = tableView.dequeueReusableCell(withIdentifier: chatCellId, for: indexPath) as! ChatMessageCell
            cell.content = viewModel.messages[indexPath.row]
            return cell
        }
    }

ChatMessageCell

扩展 ChatMessageCell {

fileprivate func anchorViews() -> Void {
    let marginGuide = contentView.layoutMarginsGuide

    [avatar, messageBackground].forEach { addSubview($0) }
    messageBackground.insertSubview(messageText, at: 0)

    if content?.origin == .system {
        let avatarInsets = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
        let avatarSize = CGSize(width: 35, height: 35)
        avatar.image = #imageLiteral(resourceName: "large_bot_head")
        avatar.anchor(top: topAnchor, leading: leadingAnchor, bottom: nil, trailing: nil, padding: avatarInsets, size: avatarSize)

        let messageBackgroundInsets = UIEdgeInsets(top: 10, left: 15, bottom: 0, right: 0)
        messageBackground.anchor(top: topAnchor, leading: avatar.trailingAnchor, bottom: bottomAnchor, trailing: trailingAnchor, padding: messageBackgroundInsets)

        let messageTextInsets = UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
        messageText.anchor(top: messageBackground.topAnchor, leading: messageBackground.leadingAnchor, bottom: messageBackground.bottomAnchor, trailing: messageBackground.trailingAnchor, padding: messageTextInsets)
    } else {            
        avatar.image = UIImage.from(color: UIColor.hexStringToUIColor(hex: "00f5ff"))
        messageBackground.backgroundColor = UIColor.hexStringToUIColor(hex: "00f5ff")
        messageBackground.layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMinXMinYCorner]

        let avatarInsets = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
        let avatarSize = CGSize(width: 35, height: 35)
        avatar.image = #imageLiteral(resourceName: "large_bot_head")
        avatar.anchor(top: marginGuide.topAnchor, leading: nil, bottom: nil, trailing: marginGuide.trailingAnchor, padding: avatarInsets, size: avatarSize)

        let messageBackgroundInsets = UIEdgeInsets(top: 15, left: 15, bottom: 0, right: 15)
        messageBackground.anchor(top: topAnchor, leading: leadingAnchor, bottom: bottomAnchor, trailing: avatar.leadingAnchor, padding: messageBackgroundInsets)

        let messageTextInsets = UIEdgeInsets(top: 15, left: 15, bottom: 15, right: 15)
        messageText.anchor(top: messageBackground.topAnchor, leading: messageBackground.leadingAnchor, bottom: messageBackground.bottomAnchor, trailing: messageBackground.trailingAnchor, padding: messageTextInsets)
    }
}

}

CTAMessageCell

extension CTAMessageCell {
    fileprivate func anchorViews() -> Void {
        let marginGuide = contentView.layoutMarginsGuide

        [avatar, messageBackground].forEach { contentView.addSubview($0) }
        messageBackground.insertSubview(messageText, at: 0)
        messageBackground.insertSubview(buttonStackView, at: 0)

        let avatarInsets = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
        let avatarSize = CGSize(width: 35, height: 35)
        avatar.image = #imageLiteral(resourceName: "large_bot_head")
        avatar.anchor(top: marginGuide.topAnchor, leading: marginGuide.leadingAnchor, bottom: nil, trailing: nil, padding: avatarInsets, size: avatarSize)

        let messageBackgroundInsets = UIEdgeInsets(top: 10, left: 15, bottom: 0, right: 0)
        messageBackground.anchor(top: marginGuide.topAnchor, leading: avatar.trailingAnchor, bottom: marginGuide.bottomAnchor, trailing: marginGuide.trailingAnchor, padding: messageBackgroundInsets)

        let messageTextInsets = UIEdgeInsets(top: 15, left: 15, bottom: 0, right: 15)
        messageText.anchor(top: messageBackground.topAnchor, leading: messageBackground.leadingAnchor, bottom: nil, trailing: messageBackground.trailingAnchor, padding: messageTextInsets)

        let buttonStackViewInsets = UIEdgeInsets(top: 10, left: 15, bottom: 10, right: 15)
        buttonStackView.anchor(top: messageText.bottomAnchor, leading: messageBackground.leadingAnchor, bottom: messageBackground.bottomAnchor, trailing: messageBackground.trailingAnchor, padding: buttonStackViewInsets)

    }
}

我使用以下扩展名锚定

 func anchor(top: NSLayoutYAxisAnchor?, leading: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, trailing: NSLayoutXAxisAnchor?, padding: UIEdgeInsets = .zero, size: CGSize = .zero) -> AnchoredConstraints {

        translatesAutoresizingMaskIntoConstraints = false
        var anchoredConstraints = AnchoredConstraints()

        if let top = top {
            anchoredConstraints.top = topAnchor.constraint(equalTo: top, constant: padding.top)
        }

        if let leading = leading {
            anchoredConstraints.leading = leadingAnchor.constraint(equalTo: leading, constant: padding.left)
        }

        if let bottom = bottom {
            anchoredConstraints.bottom = bottomAnchor.constraint(equalTo: bottom, constant: -padding.bottom)
        }

        if let trailing = trailing {
            anchoredConstraints.trailing = trailingAnchor.constraint(equalTo: trailing, constant: -padding.right)
        }

        if size.width != 0 {
            anchoredConstraints.width = widthAnchor.constraint(equalToConstant: size.width)
        }

        if size.height != 0 {
            anchoredConstraints.height = heightAnchor.constraint(equalToConstant: size.height)
        }

        [anchoredConstraints.top, anchoredConstraints.leading, anchoredConstraints.bottom, anchoredConstraints.trailing, anchoredConstraints.width, anchoredConstraints.height].forEach{ $0?.isActive = true }

        return anchoredConstraints
    }

Answer 1

这三个约束是冲突的：

"<NSLayoutConstraint:0x60000201ccd0 UIImageView:0x7ffb7bd4d740.trailing == 
UILayoutGuide:0x600003a79ea0'UIViewLayoutMarginsGuide'.trailing   (active)>",
"<NSLayoutConstraint:0x60000201c3c0 UIView:0x7ffb7bd4d970.leading == 
UILayoutGuide:0x600003a79ea0'UIViewLayoutMarginsGuide'.leading + 15   (active)>",
"<NSLayoutConstraint:0x6000020194a0 H:[UIImageView:0x7ffb7bd4d740]-(15)- 
[UIView:0x7ffb7bd4d970]   (active)>",

第二个约束和第三个约束将视图的前沿固定到不同的位置。但是从您发布的代码中不清楚为什么会这样。

我猜想单元格的可重用性已经让你失望了。考虑上面的 ChatMessageCell。如果同一个单元格已被重用，并且content?.origin == .system 第一次为真，但第二次不是，则您最终会受到两条路径的约束，这将导致约束问题 - 除非您删除或停用不需要的约束（在以prepareForReuse 为例）。

另外：https://www.wtfautolayout.com/ 可以更轻松地可视化 Apple 的约束日志。