Dynamic Height Table Cell with Autolayout and UITableAutomaticDimension (Dynamic UILabel + several UIImageViews)

Question

I looked through the articles related with dynamic table cell and auto layout for 3 days and not working so far.

Below is the table cell what I wanted. Here the main issue is UILabel for post text and UIImages.

Here is the hierarchy of the UI elements.

- Content View
    + ...
    + UILabel for text - dynamic height
    + UIView - image view container
        * UIImageView
        * UIImageView
        * ....

Label has line break mode wrap text and lines set to 0. Label and the container view has constraints for top, bottom, leading and trailing. ImageViews are added at runtime and has constraint for top, leading, trailing, bottom and height constraints. First image view has top constraint to container view and last image view has bottom constraint to container view and others has top constraint to upper image view.

When the table is first loaded (cells has different image counts), it looks fine, but when I scroll up and down, constraints are breaking in some cells and images are overlapping inside cells.

Here is the error output:

Unable to simultaneously satisfy constraints.   Probably at least one of the constraints in the following list is one you don't want.      
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:0x17428aaf0 V:|-(0)-[UIImageView:0x14be77ed0]   (active, names: '|':UIView:0x14be75b20 )>",
"<NSLayoutConstraint:0x17428a6e0 UIImageView:0x14be77ed0.height == 160   (active)>",
"<NSLayoutConstraint:0x17428acd0 UIImageView:0x14be77ed0.bottom == UIView:0x14be75b20.bottom   (active)>",
"<NSLayoutConstraint:0x174289650 V:|-(0)-[UIImageView:0x14be43ce0]   (active, names: '|':UIView:0x14be75b20 )>",
"<NSLayoutConstraint:0x17428bb80 UIImageView:0x14be43ce0.height == 160   (active)>",
"<NSLayoutConstraint:0x17428be50 V:[UIImageView:0x14be43ce0]-(10)-[UIImageView:0x14be74b10]   (active)>",

"<NSLayoutConstraint:0x17428bfe0 UIImageView:0x14be74b10.height == 160   (active)>",
"<NSLayoutConstraint:0x17428c080 UIImageView:0x14be74b10.bottom == UIView:0x14be75b20.bottom   (active)>"

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x17428be50 V:[UIImageView:0x14be43ce0]-(10)-[UIImageView:0x14be74b10]   (active)>

Please help me with this issue. Thank you.

Answer 1

To make sure the stack view does not contain old images when the cell is dequeued, you need to clean it in prepareForReuse():

override func prepareForReuse() {
    super.prepareForReuse()

    stack.arrangedSubviews.forEach {
        stack.removeArrangedSubview($0)
        $0.removeFromSuperview()
    }
}

Answer 2

I would suggest not to give your images height, instead add a vertical stackview into your container view and add all your images in there. make sure they have content mode set to aspect fit and the stackview should take care of the rest. don't forget to constrain the stackview to the bottom of the label and the bottom of the cell, so it knows how much space it has. it will take care of your images by itself

Answer 3

ImageViews are added at runtime and has constraint for top, leading, trailing, bottom and height constraints.

This is your error message. Remove either height or one of the constraint that you choose either bottom or top contraint. You can not have all 4 sides constrained and add a height constrant to that.

Sidenote:

That goes same for width, if you set a width constraint, you can not have both sides leading/trailing constrained at the same time.

EDIT:

Also, easier off with using a UIStackView as suggested in the comments sections.