Creating a shadow for a UIImageView that has rounded corners?

Question

I am trying to create an ImageView that has rounded corners and a shadow to give it some depth. I was able to create a shadow for the UIImageView, but whenever I added the code to also make it have rounded corners, it only had rounded corners with no shadow. I have an IBOutlet named myImage, and it is inside of the viewDidLoad function. Does anybody have any ideas on how to make it work? What am I doing wrong?

override func viewDidLoad() {     super.ViewDidLoad()      myImage.layer.shadowColor = UIColor.black.cgColor     myImage.layer.shadowOpacity = 1      myImage.layer.shadowOffset = CGSize.zero     myImage.layer.shadowRadius = 10     myImage.layer.shadowPath = UIBezierPath(rect: myImage.bounds).cgPath     myImage.layer.shouldRasterize = false     myImage.layer.cornerRadius = 10     myImage.clipsToBounds = true } 

Answer 1

If you set clipsToBounds to true, this will round the corners but prevent the shadow from appearing. In order to resolve this, you can create two views. The container view should have the shadow, and its subview should have the rounded corners.

The container view has clipsToBounds set to false, and has the shadow properties applied. If you want the shadow to be rounded as well, use the UIBezierPath constructor that takes in a roundedRect and cornerRadius.

let outerView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100)) outerView.clipsToBounds = false outerView.layer.shadowColor = UIColor.black.cgColor outerView.layer.shadowOpacity = 1 outerView.layer.shadowOffset = CGSize.zero outerView.layer.shadowRadius = 10 outerView.layer.shadowPath = UIBezierPath(roundedRect: outerView.bounds, cornerRadius: 10).cgPath 

Next, set the image view (or any other type of UIView) to be the same size of the container view, set clipsToBounds to true, and give it a cornerRadius.

let myImage = UIImageView(frame: outerView.bounds) myImage.clipsToBounds = true myImage.layer.cornerRadius = 10 

Finally, remember to make the image view a subview of the container view.

outerView.addSubview(myImage) 

The result should look something like this:

Answer 2

Swift 5:

You can use the below extension:

extension UIImageView {     func applyshadowWithCorner(containerView : UIView, cornerRadious : CGFloat){         containerView.clipsToBounds = false         containerView.layer.shadowColor = UIColor.black.cgColor         containerView.layer.shadowOpacity = 1         containerView.layer.shadowOffset = CGSize.zero         containerView.layer.shadowRadius = 10         containerView.layer.cornerRadius = cornerRadious         containerView.layer.shadowPath = UIBezierPath(roundedRect: containerView.bounds, cornerRadius: cornerRadious).cgPath         self.clipsToBounds = true         self.layer.cornerRadius = cornerRadious     } } 

How to use:

1. Drag a UIView on the storyboard
2. Drag an ImageView inside that UIView

Storyboard should look like this:

3. Create IBOutlet for both Views, call extension on your ImageView, and pass above created UIView as an argument.

Here is the output :