Gradient BG in UICollectionViewCell - ios

Question

I created a UICollectionView with cell like a credit cards and want to add gradient layer as a background of this cards. First I added background view for shadow(shadowView) and then add second view for gradient layer(bgView) and add CAGradientLayer as subLayer of bgView. But I didn't get any gradient view. This is my code:
class CardCell: BaseCell {
private var shadowView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.backgroundColor = UIColor.white
view.layer.shadowColor = UIColor.shadowColor.cgColor
view.layer.shadowOffset = CGSize(width: 0, height: 1.0)
view.layer.shadowOpacity = 0.1
view.layer.shadowRadius = 15.0
return view
}()
private var bgView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
view.layer.cornerRadius = 5
view.layer.masksToBounds = true
view.backgroundColor = .clear
view.layer.addSublayer(createGradientLayer(for: view))
return view
}()
override func setup() {
super.setup()
addSubview(shadowView)
addSubview(bgView)
// setup constraints
shadowView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.9).isActive = true
shadowView.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 1).isActive = true
shadowView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
shadowView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
bgView.topAnchor.constraint(equalTo: shadowView.topAnchor).isActive = true
bgView.bottomAnchor.constraint(equalTo: shadowView.bottomAnchor).isActive = true
bgView.leadingAnchor.constraint(equalTo: shadowView.leadingAnchor).isActive = true
bgView.trailingAnchor.constraint(equalTo: shadowView.trailingAnchor).isActive = true
}
private static func createGradientLayer(for view: UIView) -> CAGradientLayer {
let color = UIColor(red:0.95, green:0.42, blue:0.64, alpha:1.0)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
gradientLayer.colors = [color.cgColor, color.withAlphaComponent(0.7).cgColor]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.1, y: 1.1)
return gradientLayer
}
}
But If I change this code and remove gradient setting from bgView init and write it after constraints, everything is OK, BUT the shadow view go away:
. . .
bgView.leadingAnchor.constraint(equalTo: shadowView.leadingAnchor).isActive = true
bgView.trailingAnchor.constraint(equalTo: shadowView.trailingAnchor).isActive = true
bgView.layoutIfNeeded()
bgView.layer.addSublayer(CardCell.createGradientLayer(for: bgView))

Answer 1

extension UIView {
func addGradientToViewWithCornerRadiusAndShadow(radius:CGFloat,firstColor:UIColor,secondColor:UIColor,locations:[CGFloat]){
for layer in (self.layer.sublayers ?? []){
if let layer1 = layer as? CAGradientLayer{
layer1.removeFromSuperlayer()
}
}
let gradient = CAGradientLayer()
var rect = self.bounds
rect.size.width = ScreenWidth
gradient.frame = rect
gradient.colors = [firstColor.cgColor, secondColor.cgColor]
gradient.locations = locations as [NSNumber]
gradient.startPoint = CGPoint.init(x: 0, y: 0)
gradient.endPoint = CGPoint.init(x: 0, y: 1)
gradient.cornerRadius = radius
gradient.shadowRadius = 2
gradient.shadowColor = UIColor.lightGray.cgColor
gradient.shadowOffset = CGSize.init(width: 0.5, height: 0.5)
gradient.shadowOpacity = 0.5
self.layer.insertSublayer(gradient, at: 0)
}
}
try using this UIView's extension.Let me know if this helps.

Answer 2

I think your gradient layer add on your shadow view show your shadow view disappear..You should always add gradient layer at 0 index of layers.
bgView.layer.insertSublayer(CardCell.createGradientLayer(for: bgView), at: 0)
and Your layer creation method you need to use frame instead bounds.
private static func createGradientLayer(for view: UIView) -> CAGradientLayer {
let color = UIColor(red:0.95, green:0.42, blue:0.64, alpha:1.0)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.frame
gradientLayer.colors = [color.cgColor, color.withAlphaComponent(0.7).cgColor]
gradientLayer.locations = nil
return gradientLayer
}

Answer 3

The problem is When you add the gradient view the bgView is not layout completely. So the bound will be zero.
Solution:
private var gradient: CAGradientLayer?
override func awakeFromNib() {
super.awakeFromNib()
self.setup()
}
override func layoutSubviews() {
super.layoutSubviews()
shadowView.layer.shadowPath = UIBezierPath(rect: shadowView.bounds).cgPath
if let gradient = gradient {
gradient.frame = bgView.bounds
} else {
gradient = TestCell.createGradientLayer(for: bgView)
bgView.layer.addSublayer(gradient!)
}
}
OUTPUT: