Subviews are not displaying for CAGradientLayer added view [duplicate] - ios

Question

This question already has answers here:
How to Apply Gradient to background view of iOS Swift App
(30 answers)
Closed 4 years ago.
used below code for adding gradient layer for a view. After adding gradient layer to a view if i tried to add new subviews inside my gradient view the new view are not getting displayed
func setGradientBackground(_ view: UIView ,colorStart:CGColor ,colorEnd:CGColor,cornerRadius:CGFloat) {
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [colorStart, colorEnd]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5);
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5);
gradientLayer.frame = view.bounds
gradientLayer.cornerRadius = cornerRadius
view.layer.addSublayer(gradientLayer)
}
if i extend a class with UIView how can i set gradient color directly from storyboard attributes inspector. I have seen this in some libraries (cosmos) where we can directly set rating color

Answer 1

Instead of adding gradient layer, create subclass of uiview and override layer property with gradientLayer
Gradient View:
#IBDesignable class VerticalGradientView: UIView {
#IBInspectable var topColor: UIColor = UIColor.red {
didSet {
setGradient()
}
}
#IBInspectable var bottomColor: UIColor = UIColor.blue {
didSet {
setGradient()
}
}
override class var layerClass: AnyClass {
return CAGradientLayer.self
}
override func layoutSubviews() {
super.layoutSubviews()
setGradient()
}
private func setGradient() {
(layer as! CAGradientLayer).colors = [topColor.cgColor, bottomColor.cgColor]
(layer as! CAGradientLayer).startPoint = CGPoint(x: 0.5, y: 0)
(layer as! CAGradientLayer).endPoint = CGPoint(x: 0.5, y: 1)
}
}
Use:
let gradientView = VerticalGradientView()
gradientView.frame = CGRect(0,0,100,100)
gradientView.topColor = .black
let label = UILabel()
gradientView.addSubview(label)

Answer 2

It looks like you are using the layer directly and adding it to the view's backing layer. I recommend a simple UIView subclass that encapsulates the gradient behavior. The implementation is quite simple and the the largest benefit is the control you get over where it is rendered in the z dimension. Then you can just use the gradient view as a parent view for your content or if that isn't reasonable in your specific scenario, you could just insert the gradient view as a subview at index 0 using the UIView.insert(_:,at:) method of UIView instances. This would make your gradient view appear below the other views you add later.
I recently began using gradients in one of my apps. Here is the code I used to define my custom gradient type.
import UIKit
public class AxialGradientView: UIView {
public var colors: [UIColor] = [] {
didSet {
gradientLayer.colors = colors.map { $0.cgColor }
}
}
/// Expressed in a unit coordinate system.
public var startPoint: CGPoint = CGPoint(x: 0.5, y: 0) {
didSet {
gradientLayer.startPoint = startPoint
}
}
/// Expressed in a unit coordinate system.
public var endPoint: CGPoint = CGPoint(x: 0.5, y: 1) {
didSet {
gradientLayer.endPoint = endPoint
}
}
override public class var layerClass: Swift.AnyClass {
get {
return CAGradientLayer.self
}
}
private var gradientLayer: CAGradientLayer {
return layer as! CAGradientLayer
}
}