UITableView cell constraints problem - Swift - ios

Question

I started to get this constraints error:
"<NSLayoutConstraint:0x6000014419a0 V:|-(20)-[UIImageView:0x7f809779fae0] (active, names: '|':mChat.ChatCell:0x7f8097534600'ChatCell' )>",
"<NSLayoutConstraint:0x600001441b30 UIImageView:0x7f809779fae0.bottom == mChat.ChatCell:0x7f8097534600'ChatCell'.bottom - 20 (active)>",
"<NSLayoutConstraint:0x600001440eb0 UIImageView:0x7f809779fae0.height == 150 (active)>",
"<NSLayoutConstraint:0x600001440550 'UIView-Encapsulated-Layout-Height' mChat.ChatCell:0x7f8097534600'ChatCell'.height == 60.5 (active)>"
The problem appears when the UITableView has at least two images in it, then I get these constraints errors. Or when I add another image to the UITableView.
Here are my constraints:
func setupMediaMessage(){
mediaMessage.translatesAutoresizingMaskIntoConstraints = false
mediaMessage.contentMode = .scaleAspectFill
mediaMessage.backgroundColor = .lightGray
mediaMessage.layer.cornerRadius = 16
mediaMessage.layer.masksToBounds = true
let constraints = [
mediaMessage.topAnchor.constraint(equalTo: topAnchor, constant: 20),
mediaMessage.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20),
mediaMessage.widthAnchor.constraint(equalToConstant: 150),
mediaMessage.heightAnchor.constraint(equalToConstant: 150)
]
outcomingConstraint = mediaMessage.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 24)
incomingConstraint = mediaMessage.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -24)
NSLayoutConstraint.activate(constraints)
}
Don't worry about the trailing and leading constraints, I'm just checking if those images are incoming or outcoming.
My Github repo: https://github.com/realpaliy/mChat/blob/master/mChat/Controllers/Chats/ChatCell.swift. So, the UITableView looks good, but why do I get those errors?

Answer 1

If the layout looks correct, the conflicts are likely due to the internal auto-layout engine, and the order in which the constraints are evaluated.
Try this -- it should get rid of the warnings, without changing the end result:
let bAnchor = mediaMessage.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20)
bAnchor.priority = UILayoutPriority(rawValue: 999)
let constraints = [
mediaMessage.topAnchor.constraint(equalTo: topAnchor, constant: 20),
//mediaMessage.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20),
bAnchor,
mediaMessage.widthAnchor.constraint(equalToConstant: 150),
mediaMessage.heightAnchor.constraint(equalToConstant: 150)
]
EDIT
Note: I do not work for Apple - these are simply my observations:
When a cell is instantiated and / or dequeued, auto-layout uses the current row height to lay out the cell contents. It then uses the constraints on the cell contents to determine the actual row height. This can cause conflict warnings if the row is not tall enough for the generated height. By changing the Priority on the bottom-most constraint - or, I believe, on explicit element height constraints - to 999, that allows auto-layout to first break the constraint and then re-enforce it... without generating debug warnings.
You should (may?) also be able to eliminate the warnings by setting a big enough value for tableView.estimatedRowHeight.