Swift custom UICollectionViewCell subViews disappear when imageView image set at ViewController

Question

I faced weird issue while handling UICollectionView

I Created simple custom UICollectionViewCell, which has only one imageView and Label:

There's default placeholder image for Cell's imageView and updating imageView.image from collectionView(_:cellForItemAt:). But When image is set, all subview of cell disappears:

(Cells are not disappear at same time because downloading & setting image is async)

Note: Sample data I used is not wrong (Same data works for TableView in same app)

Why this happens and how can I fix it?

this is Sample data I used:

    let movies = [
        MovieFront(title: "Spider-Man: No Way Home", posterPath: "1g0dhYtq4irTY1GPXvft6k4YLjm.jpg", genre: "Genre", releaseDate: "2021-12-15", ratingScore: 8.4, ratingCount: 3955),
        MovieFront(title: "Spider-Man: No Way Home", posterPath: "1g0dhYtq4irTY1GPXvft6k4YLjm.jpg", genre: "Genre", releaseDate: "2021-12-15", ratingScore: 8.4, ratingCount: 3955),
        MovieFront(title: "Spider-Man: No Way Home", posterPath: "1g0dhYtq4irTY1GPXvft6k4YLjm.jpg", genre: "Genre", releaseDate: "2021-12-15", ratingScore: 8.4, ratingCount: 3955),
        MovieFront(title: "Spider-Man: No Way Home", posterPath: "1g0dhYtq4irTY1GPXvft6k4YLjm.jpg", genre: "Genre", releaseDate: "2021-12-15", ratingScore: 8.4, ratingCount: 3955)
    ]

this is my part of ViewController:

    lazy var collectionView = { () -> UICollectionView in
        
        // FlowLayout
        var flowLayout = UICollectionViewFlowLayout()
        flowLayout.headerReferenceSize = CGSize(width: self.preferredContentSize.width, height: 180)
        flowLayout.sectionInset = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
        flowLayout.minimumInteritemSpacing = 20
        flowLayout.minimumLineSpacing = 20

        // Collection View
        var collectionView =  UICollectionView(frame: self.view.frame, collectionViewLayout: flowLayout)
        collectionView.register(DiscoverCollectionViewCell.self, forCellWithReuseIdentifier: identifiers.discover_collection_cell)
        collectionView.register(DiscoverCollectionHeaderView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: identifiers.discover_collection_header)
        collectionView.backgroundColor = UIColor(named: Colors.background)
        
        return collectionView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.title = "Discover"
        
        collectionView.dataSource = self
        collectionView.delegate = self
        
        self.view.backgroundColor = UIColor(named: Colors.background)
    
        self.view.addSubview(collectionView)
        collectionView.snp.makeConstraints { $0.edges.equalTo(self.view.safeAreaLayoutGuide) }
        
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        // Sample Cell
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: identifiers.discover_collection_cell, for: indexPath) as? DiscoverCollectionViewCell else { return DiscoverCollectionViewCell() }
        
        let movie = movies[indexPath.row]

        cell.movieTitle.text = movie.title
    
        DispatchQueue.global().async {
            guard let imageURL = URL(string: "https://image.tmdb.org/t/p/original/\(movie.posterPath)") else { return }
            guard let imageData = try? Data(contentsOf: imageURL) else { return }
            
            DispatchQueue.main.sync {
                cell.posterImage.image = UIImage(data: imageData)
            }
        }
        return cell
    }

and this is my custom CollectionViewCell, I used Snapkit, Then library:

class DiscoverCollectionViewCell: UICollectionViewCell {
    
    //MARK: Create properties
    lazy var posterImage = UIImageView().then {
        $0.image = UIImage(named: "img_placeholder")
        $0.contentMode = .scaleAspectFit
    }
    
    lazy var movieTitle = UILabel().then {
        $0.font = UIFont.systemFont(ofSize: 15)
        $0.textColor = .white
        $0.numberOfLines = 2
        $0.minimumScaleFactor = 10
    }
        
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        // add to view
        self.addSubview(posterImage)
        self.addSubview(movieTitle)
        
        //MARK: Add Constraints
        posterImage.snp.makeConstraints { make in
            make.top.left.right.equalToSuperview()
        }
        
        movieTitle.snp.makeConstraints { make in
            make.top.equalTo(posterImage.snp.bottom).offset(5)
            make.bottom.greaterThanOrEqualToSuperview()
            make.leading.equalTo(posterImage.snp.leading)
            make.trailing.equalTo(posterImage.snp.trailing)
        }
        
        self.backgroundColor = .blue
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Answer 1

Two issues with your cell's layout...

    // add to view
    self.addSubview(posterImage)
    self.addSubview(movieTitle)
    
    //MARK: Add Constraints
    posterImage.snp.makeConstraints { make in
        make.top.left.right.equalToSuperview()
    }

1. You should always add UI elements to the cell's .contentView, not to the cell itself.

2. You did not constrain the bottom of the image view.

    // add to ContentView!
    self.contentView.addSubview(posterImage)
    self.contentView.addSubview(movieTitle)
   
    //MARK: Add Constraints
    posterImage.snp.makeConstraints { make in
        make.top.left.right.bottom.equalToSuperview()
    }
   

---

Edit

You were missing a couple things from your post (including how you're setting your cell / item size), so while the above changes do fix the image not showing at all, it's not quite what you're going for.

I'm assuming you're setting the flow layout .itemSize somewhere, so your original constraints - without adding .bottom. to the image view constraints - were close...

When you add an image to a UIImageView, the intrinsicContentSize becomes the size of the image. Your constraints are controlling the width, but...

This constraint on your label:

make.bottom.greaterThanOrEqualToSuperview()

means "put the Bottom of the label at the Bottom of its superview or farther down!"

When your image loads, it sets the image view Height to its own Height and pushes the label way down past the bottom of the cell.

That line needs to be:

make.bottom.equalToSuperview()

That will prevent the Bottom of the label from moving.

Next, you need to tell auto-layout "don't compress or stretch the label vertically":

// prevent label from stretching vertically
movieTitle.setContentHuggingPriority(.required, for: .vertical)
    
// prevent label from compressing vertically
movieTitle.setContentCompressionResistancePriority(.required, for: .vertical)
    

Without that, the label will be compressed down to Zero height.

I find it very helpful to add comments so I know what I'm expecting to happen:

override init(frame: CGRect) {
    super.init(frame: frame)
    
    // add to ContentView
    self.contentView.addSubview(posterImage)
    self.contentView.addSubview(movieTitle)
    
    //MARK: Add Constraints
    posterImage.snp.makeConstraints { make in
        // constrain image view to
        //  Top / Left / Right of contentView
        make.top.left.right.equalToSuperview()
    }
    
    // prevent label from stretching vertically
    movieTitle.setContentHuggingPriority(.required, for: .vertical)
    
    // prevent label from compressing vertically
    movieTitle.setContentCompressionResistancePriority(.required, for: .vertical)
    
    movieTitle.snp.makeConstraints { make in
        // constrain Top of label to Bottom of image view
        //  because we've set Hugging and Compression Resistance on the label,
        //  this will "pull down" the bottom of the image view
        make.top.equalTo(posterImage.snp.bottom).offset(5)

        // constrain Bottom of label to Bottom of contentView
        //  must be EQUAL TO
        //make.bottom.greaterThanOrEqualToSuperview()
        make.bottom.equalToSuperview()
        
        //  Leading / Trailing equal to image view
        make.leading.equalTo(posterImage.snp.leading)
        make.trailing.equalTo(posterImage.snp.trailing)
    }
    
    self.backgroundColor = .blue
}

Now we get this result:

and after the images download:

One final thing - although you may have already done something to address this...

As you see in those screenshots, setting .numberOfLines = 2 on a label does not force a 2-line height... it only limits it to 2 lines. If a Movie Title is short, the label height will be shorter as seen in the 2nd cell.

One way to fix that would be to constrain the label height to something like 2.5 lines by adding this to your init:

    if let font = movieTitle.font {
        movieTitle.snp.makeConstraints { make in
            make.height.equalTo(font.lineHeight * 2.5)
        }
    }

That will give this output:

Answer 2

Although I am not sure, Because collection view cells are being reused the init of cells only gets called at the first time, not the time when image data is getting loaded from the server.

Try moving your layout-related code(specifically adding subviews and constraining them) in a different method of the cell and call it every time image gets loaded.