UITableViewCell with GradientLayer in swift

GradientLayer.md

Create GradientLayer on your tableViewCell(collectionViewCell)

1. Create CAGradientLayer Instance on your tableViewCell

class MyCell: UITableViewCell {
    let gradientLayer = CAGradientLayer()
}

2. Set the layer frame to view's bounds from layoutSublayers(of:)

If you set your layer's frame some other place, frame becomes weird.

class MyCell: UITableViewCell {
    let gradientLayer = CAGradientLayer()
    
    // Setting it from layoutSubViews also fine.
    override func layoutSublayers(of layer: CALayer) {
        super.layoutSublayers(of: self.layer)
        gradientLayer.frame = yourView.bounds
    }
}

3. Add GradientLayer on the View.

Here is my UIView extension for adding gradient layer.

extension UIView {
    func addGradient(with layer: CAGradientLayer, gradientFrame: CGRect? = nil, colorSet: [UIColor],
                     locations: [Double], startEndPoints: (CGPoint, CGPoint)? = nil) {
        layer.frame = gradientFrame ?? self.bounds
        layer.frame.origin = .zero

        let layerColorSet = colorSet.map { $0.cgColor }
        let layerLocations = locations.map { $0 as NSNumber }

        layer.colors = layerColorSet
        layer.locations = layerLocations

        if let startEndPoints = startEndPoints {
            layer.startPoint = startEndPoints.0
            layer.endPoint = startEndPoints.1
        }

        self.layer.insertSublayer(layer, above: self.layer)
    }
}

* Option 1 - Add it from layoutSublayers(of:)

class MyCell: UITableViewCell {
    let gradientLayer = CAGradientLayer()
    
    override func layoutSublayers(of layer: CALayer) {
        super.layoutSublayers(of: self.layer)
        gradientLayer.frame = yourView.bounds
        
        let colorSet = [UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 1.0),
                        UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 1.0)]
        let location = [0.2, 1.0]
        
        yourView.addGradient(with: gradientLayer, colorSet: colorSet, locations: location)
    }
}

* Option 2 - Add it from cellForRowAt

For example, if we have cellForRowAt and like this,

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(withIdentifier: "yourCellId", for: indexPath) as? MyCell {
      cell.configureCell(content: someItems[indexPath.row])
  }
  return UITableViewCell()
}

Now, we can handle gradientLayer from configureCell(content:).

class MyCell: UITableViewCell {
    let gradientLayer = CAGradientLayer()
    
    func configureCell(content: YourType) {
        let colorSet = [UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 1.0),
                        UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 1.0)]
        let location = [0.2, 1.0]
        yourView.addGradient(with: gradientLayer, colorSet: colorSet, locations: location)
    }
    
    override func layoutSublayers(of layer: CALayer) {
        super.layoutSublayers(of: self.layer)
        gradientLayer.frame = yourView.bounds
    }
}

Perfect. Thanks

thank you!

working in both collection view as well as table view... thanks man :)