UITableViewCell约束在添加新单元格时打破

时间：2018-12-10 19:28:55

标签： ios swift uitableview autolayout

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

这是我的表格视图，在它断开之前 enter image description here

这时，将添加2个新单元格，并调用reloadData。 enter image description here

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

控制台确实会输出调试错误，但是我不确定如何制作此标题

    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
    }

1 个答案:

答案 0 :(得分：0)

这三个约束冲突：

"<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的约束日志变得更加容易。

相关问题
最新问题