Problem with gradient on the background of a table swift

Question

I have a tableview with the cells and I want apply a custom gradient. I've searched here but nothing works with my code.

My part of the code where I try to add the gradient

  override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "Menú Principal"
        tableView.backgroundView?.aplicarDegradadoDeportes() 
        self.navigationItem.setHidesBackButton(true, animated: true)      
    }

This is my function for the gradient

 func aplicarDegradadoDeportes() {
        let colorInicio =  UIColor(red: 255/255, green: 59/255, blue: 0/255, alpha: 1.0).cgColor
        let colorFin = UIColor(red: 255/255, green: 255/255, blue: 0/255, alpha: 1.0).cgColor
     let gradientLayer = CAGradientLayer()
        gradientLayer.colors = [colorInicio, colorFin]
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
    
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
        gradientLayer.frame = self.bounds
        
        self.layer.insertSublayer(gradientLayer, at:0)
    }

Please help

Answer 1

You could create a custom UITableViewCell subclass and override the layoutSubviews() function.

For example like this:

class GradientTableViewCell: UITableViewCell {
    // Property to store the gradient layer
    private var gradientLayer: CAGradientLayer?
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // Check if gradient layer already exists
        if gradientLayer == nil {
            // Set the colors for the gradient
            let colorInicio =  UIColor(red: 255/255, green: 59/255, blue: 0/255, alpha: 1.0).cgColor
            let colorFin = UIColor(red: 255/255, green: 255/255, blue: 0/255, alpha: 1.0).cgColor
            
            // Create the gradient layer and set its properties
            gradientLayer = CAGradientLayer()
            gradientLayer?.colors = [colorInicio, colorFin]
            gradientLayer?.startPoint = CGPoint(x: 0.0, y: 0.5)
            gradientLayer?.endPoint = CGPoint(x: 1.0, y: 0.5)
            gradientLayer?.frame = self.bounds
            
            // Add the gradient layer as a sublayer to the cell's content view
            self.contentView.layer.insertSublayer(gradientLayer!, at:0)
        }
    }
}

In your controller you need the set the cell class to GradientTableViewCell:

override func viewDidLoad() {
  super.viewDidLoad()
  self.title = "Menú Principal"
  self.navigationItem.setHidesBackButton(true, animated: true)

  // Set the cell class for the table view to be GradientTableViewCell
  self.tableView.register(GradientTableViewCell.self, forCellReuseIdentifier: "Cell")
}

In the cellForRowAt function of your table data dequeue a GradientTableViewCell instead of UITableViewCell

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  // Dequeue a GradientTableViewCell instead of a UITableViewCell
  let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! GradientTableViewCell

  // Configure the cell as needed

  return cell
}

Now you should be able to set the gradient to the background of the cells