添加新单元格时 UITableViewCell 约束中断
Posted
技术标签:
【中文标题】添加新单元格时 UITableViewCell 约束中断【英文标题】：UITableViewCell constraints breaking when adding a new cell 【发布时间】：2018-12-10 19:28:54 【问题描述】：我有一个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
【问题讨论】：
“将一个新单元格推送到表格视图”这甚至意味着什么？显示您的代码！ 你能添加一些源代码吗？至少 cellForRowAtIndexPath 会很有用。另外，请记住 UITableView 在您滚动时会重用表格单元格，请确保您没有添加重复的视图并设置正确的重用标签以确保系统不会重用错误类型的单元格 我现在只是添加代码，抱歉。 我添加了更多代码 相关代码仍然不够。cell.content = viewModel.messages[indexPath.row] 是做什么的？如果你省略它，问题会消失吗？
【参考方案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 的约束日志。
【讨论】：
以上是关于添加新单元格时 UITableViewCell 约束中断的主要内容，如果未能解决你的问题，请参考以下文章
从另一个视图控制器添加单元格时 UITableViewCell 的内容不可见
重新排序单元格时如何在 UITableViewcell 内容视图中添加图像？