Skip to content

Instantly share code, notes, and snippets.

@hcn1519
Last active June 7, 2023 09:33
Show Gist options
  • Save hcn1519/5de2a631649b769398c5bfbc29e30ca9 to your computer and use it in GitHub Desktop.
Save hcn1519/5de2a631649b769398c5bfbc29e30ca9 to your computer and use it in GitHub Desktop.
UITableViewCell with GradientLayer in swift

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
    }
}
@MohsenKhosravinia
Copy link

Perfect. Thanks

@dotkebi
Copy link

dotkebi commented Aug 26, 2020

thank you!

@vipulRajput
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment