UICollectionView Issue - ios

Question

Xcode 10 beta 5, iOS 12.0 16A5339e
I use the UICollectionView inside my app with the following code:
extension MainWindowViewController: UICollectionViewDataSource, UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return itemMenuArray.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if let itemCell = collectionView.dequeueReusableCell(withReuseIdentifier: "main_menu_cell", for: indexPath) as? MainWindowCollectionViewCell {
let item = itemMenuArray[indexPath.row]
itemCell.refresh(item)
return itemCell
}
return UICollectionViewCell()
}
And the problem is that method .refresh executes for separate cells when I scroll my CollectionView. So the cell that is out of the screen updates every time I scroll into its direction and causes wrong cell colors sometimes. Are there any ideas how to fix that?
.refresh code (I use that in my custom cell class):
public func refresh(_ menu: Menu) {
Title.text = menu.name
if let image = menu.img {
Image.image = UIImage(named: image)
}
print(SubscriptionTitle.text!)
self.setupCellAppearance(firstColor: UIColor(hexString: (menu.firstColor)!), secondColor: UIColor(hexString: (menu.secondColor)!))
}
setupCellAppearance code:
func setupCellAppearance(firstColor: UIColor, secondColor: UIColor) {
// Setting up the gradient for each cell
clipsToBounds = true
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
gradientLayer.frame = self.bounds
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0)
gradientLayer.cornerRadius = 10.0
self.layer.insertSublayer(gradientLayer, at: 0)
// Setting up the corner radius and shadows for each cell
self.layer.shadowColor = firstColor.cgColor
self.layer.shadowOffset = CGSize(width: 0.0, height: 5.0)
self.layer.shadowRadius = 10
self.layer.shadowOpacity = 0.5
self.layer.masksToBounds = false;
self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius).cgPath
}

Answer 1

What happening is cellForItemAt reuse the cell so every time cell is reuse which might already having gradient layer with it and you are trying add a new gradient so that creating a different color. So you need to remove the layer if its already there, to remove layer set name property of CAGradientLayer with some unique name and then before inserting in layer check layer with that name already exist, if it exist remove it.
func setupCellAppearance(firstColor: UIColor, secondColor: UIColor) {
//Check gradient is already exist
for layer in self.layer.sublayers ?? [] {
if layer.name == "BGGradient" {
layer.removeFromSuperlayer()
break
}
}
// Setting up the gradient for each cell
clipsToBounds = true
let gradientLayer = CAGradientLayer()
//set name property of gradient layer
gradientLayer.name = "BGGradient"
gradientLayer.colors = [firstColor.cgColor, secondColor.cgColor]
gradientLayer.frame = self.bounds
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0)
gradientLayer.cornerRadius = 10.0
self.layer.insertSublayer(gradientLayer, at: 0)
// Setting up the corner radius and shadows for each cell
self.layer.shadowColor = firstColor.cgColor
self.layer.shadowOffset = CGSize(width: 0.0, height: 5.0)
self.layer.shadowRadius = 10
self.layer.shadowOpacity = 0.5
self.layer.masksToBounds = false;
self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius).cgPath
}