CODEWITHSUNDEEP
swift
average_student
average_student

Reputation: 15

UIView shadow not visible

I have a UIView called containerView.

Upon creating the UIView & Adding it to the main view, I'm trying to add a little shadow. My code: 

    let containerView = UIView()

    let bg_clear = UIColor(hexString: "#34495E")
    containerView.backgroundColor = bg_clear


    containerView.layer.cornerRadius =  15
    containerView.clipsToBounds = false

    containerView.dropShadow() // Generate Shadow

    view.addSubview(containerView)

    containerView.translatesAutoresizingMaskIntoConstraints = false
    containerView.heightAnchor.constraint(equalToConstant: 50).isActive = true
    containerView.widthAnchor.constraint(equalToConstant: 300).isActive = true
    containerView.centerXAnchor.constraint(equalTo: tabBar.centerXAnchor).isActive = true

Code to generate the Shadow: 

extension UIView {

    func dropShadow(scale: Bool = true) {
        layer.masksToBounds = false
        layer.shadowColor = UIColor(hexString: "#000000").cgColor
        layer.shadowOpacity = 0.5
        layer.shadowOffset = CGSize(width: -1, height: 1)
        layer.shadowRadius = 1

        layer.shadowPath = UIBezierPath(rect: bounds).cgPath
        layer.shouldRasterize = true
        layer.rasterizationScale = scale ? UIScreen.main.scale : 1
   }
}

Upvotes: 1

Views: 2102

Answers (2)

Sweeper
Sweeper

Reputation: 271420

A few points to note:

  • Make sure your container view is not too near the left or the bottom of the screen, because the shadow is going show up to the left and below the container view.

  • Make sure you use a rounded rect for the shadow path, because your container view has a non-zero corner radius.

  • If you still can't see the shadow, try increasing the shadow offset.

You can copy and paste this code into a playground and open the live view:

extension UIView {

    func dropShadow(scale: Bool = true) {
        layer.masksToBounds = false
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.5
        layer.shadowOffset = CGSize(width: -5, height: 5) // I made this larger
        layer.shadowRadius = 1

        // I used a rounded rect here
        layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius).cgPath
        layer.shouldRasterize = true
        layer.rasterizationScale = scale ? UIScreen.main.scale : 1
    }
}

let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
view.backgroundColor = .white
let containerView = UIView(frame: CGRect(x: 10, y: 10, width: 100, height: 100))

let bg_clear = UIColor.green
containerView.backgroundColor = bg_clear


containerView.layer.cornerRadius =  15
containerView.clipsToBounds = false

containerView.dropShadow() // Generate Shadow

view.addSubview(containerView)

PlaygroundPage.current.liveView = view

You should see:

enter image description here

Upvotes: 1

iMahdi
iMahdi

Reputation: 338

This should help : 

extension UIView {

    func addShadow(withOpacity opacity:Float, radius:CGFloat, andColor color:UIColor) {
         self.layer.shadowColor         = color.cgColor
         self.layer.shadowOffset        = CGSize(width:-1.0, height:1.0)
         self.layer.shadowOpacity       = opacity
         self.layer.shadowRadius        = radius
    }
}

Example : 

containerView.addShadow(withOpacity: 0.4, radius: 0.4, andColor: .black)

Upvotes: 1

Related Questions