Subviews are not displaying for CAGradientLayer ad

Question

This question already has an answer here:

• How to Apply Gradient to background view of iOS Swift App 25 answers

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
    }

}