Search code examples
swiftuicollectionviewsizeuicollectionviewcell

CollectionView Cell Changing Size when screen reloads


I am creating a screen where the user can search for films and the results load in a collection View, everything loads perfectly but in the simulator when I clicked "command, shift, A" to change to light mode to make sure the colours would adapt correctly the Cells randomly changed size to full screen instead of what I have set.

This also happens when I leave the application for the home page and then click back into the app. I am creating everything programmatically so would need answer this way please.

Below is the code from my custom cell:

import UIKit

class FavouritesCell: UICollectionViewCell {
    static let identifier = "FavouritesCell"

    let movieTitle: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.lineBreakMode = .byWordWrapping
        label.textColor = .secondaryLabel
        //label.text = "Title"
        label.adjustsFontSizeToFitWidth = true
        label.textAlignment = .center
        label.font = label.font.withSize(12)
        label.minimumScaleFactor = 0.75
        return label 
    }()

    let image : UIImageView = {
        let image = UIImageView()
        image.clipsToBounds = true
        image.translatesAutoresizingMaskIntoConstraints = false
        //image.backgroundColor = .yellow
        image.layer.cornerRadius = 10.0
        return image
    }()

    let cancelItem : UILabel = {
        let label = UILabel()
        label.layer.borderWidth = 2.0
        label.layer.borderColor = UIColor.systemGray.cgColor
        label.text = "X"
        label.textAlignment = .center
        label.layer.cornerRadius = 15
        //label.isHidden = true
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: .zero)
    
        contentView.addSubview(image)
        contentView.addSubview(movieTitle)
        contentView.addSubview(cancelItem)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        image.frame = CGRect(x: 0, y: 25, width: contentView.width, height: contentView.height - 30 )
        movieTitle.frame = CGRect(x: 0, y: 0, width: contentView.width, height: 25)
        cancelItem.frame = CGRect(x: image.right - 25, y: image.top , width: 25, height: 25)
    }
}

Here is the code from the view controller in relation to the collectionView:

private let collectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .vertical
    layout.minimumLineSpacing = 2
    layout.minimumInteritemSpacing = 2
    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
    collectionView.translatesAutoresizingMaskIntoConstraints = false
    collectionView.register(FavouritesCell.self, forCellWithReuseIdentifier: FavouritesCell.identifier)
    collectionView.clipsToBounds = true
    collectionView.backgroundColor = UIColor.systemBackground
    
    return collectionView
}()
    NSLayoutConstraint.activate([
        searchText.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        searchText.heightAnchor.constraint(equalToConstant: 50),
        searchText.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        searchText.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        
        collectionView.topAnchor.constraint(equalTo: searchText.bottomAnchor),
        collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
    ])
}


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: (view.width / 3) - 4, height: (view.width / 2) - 2 )
}

image of CollectionView working normally

After the screen has been reloaded


Solution

  • Try to give your imageView a fixed height and fixed width and try it again, It will work