Search code examples
iosswiftuicollectionviewcell

Change background and label colour of UICollectionView cell when it is selected

I have been trying to change the background colour and label colour of a custom UICollectionView cell when selecting it, but can't really seem to figure this one out. The current problem is that when the cell is selected, it changes the background colour, but label completely disappears (it creates like new cell with the selected background colour and puts it over the old one). I have a custom UICollectionViewCell class where I am setting the initial background colour and label:

class UnitCollectionViewCell: UICollectionViewCell {
    
    let cornerRadius: CGFloat = 27
    var bigLabel =  UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
        
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override var isSelected: Bool {
        didSet {
            self.contentView.layer.cornerRadius = cornerRadius
            self.contentView.backgroundColor = isSelected ? UIColor(named: "warmRed") : .none
            
        }
    }
    
    func setupView() {
        backgroundColor = UIColor(named: "warmRed")?.withAlphaComponent(0.4)
        layer.cornerRadius = cornerRadius
        
        configureUnitViewLabels()
    }
    
    func configureUnitViewLabels() {
        bigLabel.font = .boldSystemFont(ofSize: 30)
        bigLabel.textColor = UIColor(named: "darkWhite")
        bigLabel.textAlignment = .left
        bigLabel.translatesAutoresizingMaskIntoConstraints = false
        addSubview(bigLabel)

        setBigLabelConstraints()
    }

    func setBigLabelConstraints() {
        bigLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
        bigLabel.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 15).isActive = true
        bigLabel.rightAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.rightAnchor, constant: 5).isActive = true
        bigLabel.heightAnchor.constraint(equalToConstant: 30).isActive = true
    }
    
    
}

In my ViewController class I am currently declaring custom cell this inside of a cellForItemAt method:

let unitCell = collectionView.dequeueReusableCell(withReuseIdentifier: "unitCell", for: indexPath) as! UnitCollectionViewCell

Current outcome:

enter image description here

Desired outcome:

enter image description here

What have I tried so far:

  1. I have tried using isSelected method in my custom cell's class (see the code from my custom cell class above), but as mentioned before it creates like new cell and puts it over the old one.

  2. I have tried using both didSelectItemAt and didDeselectItemAt methods with both dequeueReusableCell(withReuseIdentifier:,for: IndexPath) and cellForItem(at: IndexPath), but they basically work the same as previously mentioned isSelected method.

  3. I also tried to create new UILabel in isSelected method, but then the label doesn't set to text it is supposed to set in cellForItemAt method.

Please let me know if any additional code is needed. Thank you!

Solution

  • Just change in your cell

    override var isSelected: Bool{
    willSet{
        super.isSelected = newValue
        self.layer.borderColor = newValue ?  UIColor.black.cgColor : #colorLiteral(red: 0.6862131953, green: 0.686313808, blue: 0.6861912012, alpha: 1)
        self.lblSubItem.textColor = newValue ? UIColor.black : #colorLiteral(red: 0.6862131953, green: 0.686313808, blue: 0.6861912012, alpha: 1)
    }
}