Search code examples
iosswiftswift3uiview

How to add shadow to UIView?


Result which i getFor UIView I'm giving corner radius for two sides and adding drop shadow. Now, I'm getting corner radius for two sides but not shadow.

Here is the code which I have used:

@IBOutlet var myView: UIView!

override func viewDidLoad() {
    super.viewDidLoad()
   let shadowpath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 
   myView.frame.height, height: myView.frame.height), byRoundingCorners: 
   [.topRight, .bottomRight], cornerRadii: CGSize(width: 58.0, height: 0.0))

    myView.layer.shadowColor = UIColor.black.cgColor
    myView.layer.shadowOffset = CGSize(width: 0.5, height: 0.4)  //Here you 
    control x and y
    myView.layer.shadowOpacity = 0.5
    myView.layer.shadowRadius = 5.0 //Here your control your blur
    myView.layer.masksToBounds =  false
    myView.layer.shadowPath = shadowpath.cgPath

Screenshot: enter image description here


Solution

  • The key is to use a "container" view... you add a "shadow layer" as a Sublayer of the container view, and add the masked view as a Subview of the container.

    Here is an example you can run in a Playground, that will give you just about what you've shown as your goal (you'll probably want to tweak the color values and shadow radius and offset):

    import UIKit
    import PlaygroundSupport
    
    class TestViewController : UIViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            view.backgroundColor = UIColor.init(white: 0.8, alpha: 1.0)
    
            let myView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
            myView.backgroundColor = .white
    
            let mask = CAShapeLayer()
    
            let shadowpath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width:
                myView.frame.height, height: myView.frame.height), byRoundingCorners:
                [.topRight, .bottomRight], cornerRadii: CGSize(width: 58.0, height: 0.0))
    
            mask.path = shadowpath.cgPath
            myView.layer.mask = mask
    
            let shadowLayer = CAShapeLayer()
            shadowLayer.frame = myView.bounds
            shadowLayer.path = shadowpath.cgPath
            shadowLayer.shadowOpacity = 0.5
            shadowLayer.shadowRadius = 5
            shadowLayer.shadowColor = UIColor(red: 0.2, green: 0.5, blue: 1.0, alpha: 1.0).cgColor
            shadowLayer.masksToBounds = false
            shadowLayer.shadowOffset = CGSize(width: 5.0, height: 1.0)
    
            let container = UIView(frame: CGRect(x: 40, y: 100, width: myView.bounds.width, height: myView.bounds.height))
            container.backgroundColor = .clear
            container.layer.addSublayer(shadowLayer)
            container.addSubview(myView)
    
            view.addSubview(container)
    
        }
    
    }
    
    let vc = TestViewController()
    PlaygroundPage.current.liveView = vc
    

    Result:

    enter image description here