UIView with Gradient and shadow

Question

Trying to add a gradient, add round corner and add shadow on a UIView. I can get it to work, but the gradient was not properly located. (should replace all the red)

let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor(red: 0.333, green: 0.376, blue: 0.498, alpha: 1.00).cgColor, UIColor(red: 0.200, green: 0.247, blue: 0.369, alpha: 1.00).cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.75)
gradientLayer.frame = self.viewBg.bounds
//self.viewBg.layer.insertSublayer(gradientLayer, at: 0) 


self.viewBg.layer.cornerRadius = 10
self.viewBg.layer.shadowColor = UIColor.black.cgColor
self.viewBg.layer.shadowOffset = CGSize(width: 7, height: 7)
self.viewBg.layer.shadowRadius = 10
self.viewBg.layer.shadowOpacity = 1

let inset: CGFloat = bounds.width * 0.05
self.viewBg.layer.shadowPath = UIBezierPath(roundedRect: bounds.insetBy(dx: inset, dy: 0.0), cornerRadius: 10).cgPath

With line not in comment:

With line in comment:

Maybe this is because of incorrect `endPoint` setup. To make gradient horizontally you need to setup it his way: gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0) gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0) — SIlvester, Feb 06 '19 at 04:01
If your gradient doesn’t appear where you expect it to, it’s likely because `viewBg.bounds` isn’t what you expect it to be. E.g. one common source of problems is that you generally want to reset the layer’s `frame` at the view is resized in `viewDidLayoutSubviews` (if this in in `UIViewController` subclass) or `layoutSubviews` (if this is in `UIView` subclass). Or `viewBg` might not refer to what you think it does. Impossible to tell on the basis of the information provided. — Rob, Feb 06 '19 at 06:30

score 1 · Answer 1 · answered Oct 24 '19 at 09:29

Try this may be it helps you

extension UIView {

func setGradientBackground() {
    let colorTop =  UIColor(red:0.87, green:0.25, blue:0.30, alpha:1.0)
    let colorBottom = UIColor(red:0.95, green:0.37, blue:0.34, alpha:0.6)

    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [colorTop.cgColor, colorBottom.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
    gradientLayer.frame = self.bounds
    gradientLayer.cornerRadius = 20
    self.layer.shadowOffset = CGSize(width: 0, height: 2)
    self.layer.shadowOpacity = 0.3
    self.layer.shadowRadius = 3.0
    self.layer.shadowColor = UIColor.black.cgColor
    self.layer.masksToBounds = false

    self.layer.insertSublayer(gradientLayer, at: 0)

    }
}

Use

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    DispatchQueue.main.async {
        self.btnLogin.setGradientBackground()
    }
}

Two very important points. 1/ You have to do this in `UIView.layoutSubviews`. The controller's `viewDidLayoutSubviews` is called only when `controller.view` layouts. Not when button layouts. 2/ You need to check that the bounds have actually changed. Otherwise this will have great performance impact. By the way, that `DispatchQueue.main.async` is unnecessary. — Sulthan, Oct 24 '19 at 09:41

UIView with Gradient and shadow

1 Answers1