Subviews are not displaying for CAGradientLayer added view

Question

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

views are basically layer, when you add a sublayer over any view, hierarchy changed. before adding any new view or layer mind that. — Blind Ninja, Sep 26 '18 at 04:47
so subviews inside gradient layer is not possible? or i need to add gradient layer for superate view? — Midhun Narayan, Sep 26 '18 at 04:49
yeah adding an empty view with gradient on your main view then adding new view on main view is fine approach. — Blind Ninja, Sep 26 '18 at 04:52
i have not tried another layer or view on gradient, but when ever i needed a gradient, i always added it lastly, no matter what is hierarchy. — Blind Ninja, Sep 26 '18 at 04:54
one more thing if you are adding this gradient on reusable cell (collection or table), try to remove old gradient before adding new or just add once, will help in app performance. — Blind Ninja, Sep 26 '18 at 05:00
instead adding gradient layer, create subclass of uiview and override layer property with gradientLayer — SPatel, Sep 26 '18 at 05:02
@SPatel can i get some piece of code, if i extend UIView how can i override layer property? — Midhun Narayan, Sep 26 '18 at 05:06

SPatel · Accepted Answer · 2018-09-26T05:19:41.993

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)

score 0 · Answer 2 · answered Sep 26 '18 at 05:15

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
    }

}

Subviews are not displaying for CAGradientLayer added view

2 Answers2

Linked

Related