ios - 添加新单元格时 UITableViewCell 约束被破坏

Question

我有一个 UITableViewController，它是 3 种不同单元类型的组合。当将新单元格推送到 TableView 并调用重新加载数据时，我遇到了一个奇怪的错误。

这是我的表格 View ，在它损坏之前

此时，添加了 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 )>"
)

我以编程方式设置约束，此 View 中没有 Storyboard或 Nib 。

我非常感谢有关如何解决此问题的指导或指导。

   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 {

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

}

CTA消息单元格

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)>",

第二个约束和第三个约束将 View 的前缘固定到不同的位置。但从您发布的代码中尚不清楚为什么会出现这种情况。

我猜单元的可重用性已经让你陷入困境了。考虑上面的 ChatMessageCell。如果重复使用同一个单元格，并且 content?.origin == .system 第一次为 true，但第二次不是，那么您最终将受到来自两条路径的约束，这将导致约束问题 - 除非您删除或停用不需要的约束(例如在 prepareForReuse 中)。

另外:https://www.wtfautolayout.com/使 Apple 的约束日志可视化变得更加容易。