CODEWITHSUNDEEP
iosswift
Castro Zwelithini
Castro Zwelithini

Reputation: 183

Gradient view not working when added programmatically

So my Class looks like this :

import UIKit

class GradientBarView: UIView {

  override init(frame: CGRect) { // for using CustomView in code
      super.init(frame: frame)
      commonInit()

  }

  required init?(coder aDecoder: NSCoder) {
      super.init(coder: aDecoder)
      commonInit()
  }

  func commonInit() {

      let gradient = CAGradientLayer()
      gradient.frame = bounds
      gradient.startPoint = CGPoint(x: 0, y: 0.5)
      gradient.endPoint = CGPointMake(1, 0.5)
      gradient.colors = [AppColor.SecondaryGreen.CGColor, AppColor.HeritageGreen.CGColor, AppColor.HeritageGreen.CGColor]
      layer.insertSublayer(gradient, atIndex: 0)

      translatesAutoresizingMaskIntoConstraints = false

  }

}

and this is how I use it(in my viewDidLoad)

let gradientBar = GradientBarView(frame: CGRectZero)
self.view.addSubview(gradientBar)

Then add the necessary constraints(which is fine)...so the problem is that the view is just black but if i add it via the Storyboard it works just fine

please help,what am i missing?

Thanks

Upvotes: 2

Views: 888

Answers (2)

Oleh H
Oleh H

Reputation: 886

I had the same issue. If I added a view to viewController at interface builder then gradient was displayed. But if I did it programmatically in this case gradient was absent. This is the code that doesn't work properly.

import UIKit
class HeaderLandscape: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupFromNib()
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupFromNib()
        setupView()
    }

    private func setupView() {
        setGradientBackground()
    }


    private func setGradientBackground() {
        let gradient = CAGradientLayer()
        gradient.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: self.bounds.height)
        gradient.colors = [UIColor(red: 0, green: 0, blue: 0, alpha: 0.32).cgColor,
                       UIColor(red: 0, green: 0, blue: 0, alpha: 0).cgColor]
        gradient.startPoint = CGPoint(x: 0.5, y: 0)
        gradient.endPoint = CGPoint(x: 0.5, y: 1)
        self.layer.insertSublayer(gradient, at: 0)
    }
}

and moving setGradientBackground() function call from setupView() into hext method fixed the problem.

override func layoutSubviews() {
    super.layoutSubviews()
    setGradientBackground()
}

Upvotes: 0

Carien van Zyl
Carien van Zyl

Reputation: 2873

Your frame is CGRectZero by the time you call gradient.frame = bounds in commonInit. Thus your bounds will also be CGRectZero. Thus the frame you are inserting has no height or width.

You can add the gradient in the draw method of your custom view. override func draw(_ rect: CGRect) Just ensure that you do not add it more than once.

Alternatively add it to layoutSubviews, depending on your use. Something like:

class GradientBarView: UIView {

    var gradientLayer: CAGradientLayer?

    override init(frame: CGRect) { // for using CustomView in code
        super.init(frame: frame)
        commonInit()

    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() {
        translatesAutoresizingMaskIntoConstraints = false
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        gradientLayer?.removeFromSuperlayer()
        gradientLayer = self.addHorizontalGradient(color: UIColor.blue)
    }

}

extension UIView {

    func addHorizontalGradient(color: UIColor) -> CAGradientLayer {
        let gradient = CAGradientLayer()
        gradient.frame = self.bounds
        gradient.startPoint = CGPoint(x:0,y:0.5)
        gradient.endPoint = CGPoint(x:1,y:0.5)
        gradient.colors = [color.cgColor, UIColor.white.withAlphaComponent(0).cgColor]
        self.layer.insertSublayer(gradient, at: 0)
        return gradient
    }

}

Upvotes: 3

Related Questions