Creating a shadow for a UIImageView that has rounded corners?
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 = falseouterView.layer.shadowColor = UIColor.black.cgColorouterView.layer.shadowOpacity = 1outerView.layer.shadowOffset = CGSize.zeroouterView.layer.shadowRadius = 10outerView.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 = truemyImage.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:
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:
- Drag a UIView on the storyboard
- Drag an ImageView inside that UIView
Storyboard should look like this:
- Create IBOutlet for both Views, call extension on your ImageView, and pass above created UIView as an argument.
Here is the output :
Here is a another solution (tested code) in swift 2.0
If you set clipsToBounds to true, this will round the corners but prevent the shadow from appearing. So, you can add same size UIView in storyboard behind imageview and we can give shadow to that view
SWIFT 2.0
outerView.layer.cornerRadius = 20.0outerView.layer.shadowColor = UIColor.blackColor().CGColorouterView.layer.shadowOffset = CGSizeMake(0, 2)outerView.layer.shadowOpacity = 1outerView.backgroundColor = UIColor.whiteColor()