tableview cell has wrong background layer after reuse - ios

Question

I have a UIView extension which makes a gradient background from two colours. I use this so I add a nice background to my custom tableView cells. But after the reuse, the colour is always wrong (unlike the data inside which is correct). It's not like a plain background colour, and all colors depend on the value from the fetched data. After reuse, the background is always random from the previously generated cells (and their backgrounds).
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "tableViewCell", for: indexPath) as! TableViewCell
var imgTitle = ""
var color = UIColor()
let title = fetchedUV[indexPath.row].value
if title > 11 {
imgTitle = "flame"
color = UIColor.purple
cell.setGradientBackground(colorOne: .white, colorTwo: color)
} else if title >= 8 {
imgTitle = "sun-protection"
color = UIColor.red
cell.setGradientBackground(colorOne: .white, colorTwo: color)
} else if title >= 6 {
imgTitle = "sunbed"
color = UIColor.orange
cell.setGradientBackground(colorOne: .white, colorTwo: color)
} else if title >= 3 {
imgTitle = "sunglasses"
color = UIColor.yellow
cell.setGradientBackground(colorOne: .white, colorTwo: color)
} else {
imgTitle = "ok"
color = UIColor.green
cell.setGradientBackground(colorOne: .white, colorTwo: color)
}
colors.append(color)
let UVValue = String(describing: title)
cell.backgroundColor = UIColor.orange
cell.commonInit(imgTitle, title: UVValue, time: fetchedUV[indexPath.row].dateIso)
cell.logoImage.layer.cornerRadius = (cell.frame.height) / 2
cell.layer.cornerRadius = cell.frame.height/2
cell.layer.masksToBounds = true
//cell.setGradientBackground(colorOne: .white, colorTwo: color)
return cell
}
extension UIView {
func setGradientBackground(colorOne: UIColor, colorTwo: UIColor) {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
layer.insertSublayer(gradientLayer, at: 0)
}
}

Answer 1

Just for an Example try looking at this
extension UIView
{
//This func will add gradient backgroung
//Just sample one
func setGradientBackground()
{
//Colors
let colorTop = UIColor(red: 255.0/255.0, green: 149.0/255.0, blue: 0.0/255.0, alpha: 1.0).cgColor
let colorBottom = UIColor(red: 255.0/255.0, green: 94.0/255.0, blue: 58.0/255.0, alpha: 1.0).cgColor
//Set Gradient layer
let gradientLayer = CAGradientLayer()
//Colors
gradientLayer.colors = [ colorTop, colorBottom]
//Locations
gradientLayer.locations = [ 0.0, 1.0]
//Here is the main Play
//Set Layer name so can be identified while Dequeuing cell
gradientLayer.name = "layerName"
//Set bounds
gradientLayer.frame = self.layer.bounds
//Insert Layer
self.layer.addSublayer(gradientLayer)
}
}
Now in CellForRowAt of TableView
//Setting cell
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
//Get all the sublayers of cell
for sublayer in cell.layer.sublayers!
{
//Check that sublayer is Already Added or not
if sublayer.name == "layerName"
{
//Sublayer already added
//Print already Added
print("Cell Deque again")
}
else
{
//Sublayer is not added yet
//Time to add Gradient Background
cell.setGradientBackground()
print("Layer Added")
}
}
//setting title
cell.textLabel?.text = items[indexPath.section][indexPath.row]
return cell
}
Hope it Helps , You can Name a layer that is being added as SubLayer and when Adding it to Cell as it gets Deque again and again so you must see that layer is not override on previous added layer

Answer 2

I had find and remove the previously added layer (the CAGradientLayer because it can remove any other layer as well). Do the checks and add another layer if its needed. I also changed the function so the layer now has a name. (thanks to iOS Geek for the suggestion)
for sublayer in cell.layer.sublayers! {
if let _ = sublayer as? CAGradientLayer {
if sublayer.name == name {
print("Cell deque again")
} else {
sublayer.removeFromSuperlayer()
cell.setGradientBackground0(colorOne: .white, colorTwo: color, name: name)
}
} else {
cell.setGradientBackground0(colorOne: .white, colorTwo: color, name: name)
}
}
extension UIView {
func setGradientBackground0(colorOne: UIColor, colorTwo: UIColor, name: String) {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = [colorOne.cgColor, colorTwo.cgColor]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
gradientLayer.name = name
layer.insertSublayer(gradientLayer, at: 0)
}
}
I'll leave this just in case.