How to add a Gradient Layer to a Collection View Cell - uicollectionviewcell

Question

I am attempting to add a gradient to a collection view cell as seen below:
So far the result I get does not cover the entire cell:
I have a
collection view cell:
class CollectionViewCell: UICollectionViewCell {
#IBOutlet weak var cellView: UIView!
let diagonalGradient = DiagonalGradient()
override func layoutSubviews() {
super.layoutSubviews()
diagonalGradient.frame = cellView.bounds
}
as well as a Custom Gradient Class:
class DiagonalGradient: UIView {
let gradient = CAGradientLayer()
override init(frame: CGRect) {
super.init(frame:frame)
setupGradient(color: UIColor.red))
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupGradient(color: UIColor.red))
}
func setupGradient(color: UIColor ) {
gradient.colors = [
UIColor.clear.cgColor,
color.cgColor
]
gradient.startPoint = CGPoint(x: 0, y: 1)
gradient.endPoint = CGPoint(x: 1, y: 0)
gradient.frame = bounds
layer.addSublayer(gradient)
}
}
Lastly, in the story board I assign the class of the cellView to my custom gradient class. How do I fix this?

Answer 1

You're setting the gradient layer frame at the wrong time.
Move it to layoutSubviews():
class DiagonalGradient: UIView {
let gradient = CAGradientLayer()
override init(frame: CGRect) {
super.init(frame:frame)
setupGradient(color: UIColor.red))
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupGradient(color: UIColor.red))
}
func setupGradient(color: UIColor ) {
gradient.colors = [
UIColor.clear.cgColor,
color.cgColor
]
gradient.startPoint = CGPoint(x: 0, y: 1)
gradient.endPoint = CGPoint(x: 1, y: 0)
// don't do this here
//gradient.frame = bounds
layer.addSublayer(gradient)
}
override func layoutSubviews() {
super.layoutSubviews()
// do this here
gradient.frame = bounds
}
}