Create a shadow around the UIVisualEffectView without covering the entire view

Question

Is it possible to create a shadow around a UIVisualView using a UIBlurEffect, without allowing the UIVisualView to be colored by the shadow below it?

I just want the shadow around the view, but with this code, the shadow will cover the whole view, which darkens the whole view:

let borderPath = UIBezierPath(roundedRect: view.bounds, byRoundingCorners: [.topLeft, .topRight], cornerRadii: CGSize(width: 15, height: 15)).cgPath shadowView.frame = view.bounds shadowView.autoresizingMask = [.flexibleWidth, .flexibleHeight] shadowView.layer.shadowOpacity = 0.3 shadowView.layer.shadowRadius = 3.0 shadowView.backgroundColor = UIColor.clear shadowView.layer.shadowPath = borderPath shadowView.layer.shadowOffset = CGSize(width: 0, height: 0) self.view.insertSubview(shadowView, at: 0) let blurEffect = UIBlurEffect(style: .extraLight) let blurView = UIVisualEffectView(effect: blurEffect) blurView.frame = view.bounds blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight] blurView.clipsToBounds = true blurView.layer.cornerRadius = 15 view.insertSubview(blurView, aboveSubview: shadowView) 

EDIT.
I need to achieve the same as in the Apple Maps application. Where the dragged favorite view uses both the UIVisualEffectView and the shadow around its top, without interfering with the background of the UIVisualEffectView.

See screenshot examples:

Answer 1

So the problem is that my background in the base view was white. And with UIBlurEffect.extraLight used on a background that is lighter than BlurEffect, the shadow under the UIVisualView looks darker than with a brighter background.

Also described in this question:
Fix UIVisualEffectView so that the extra light spot is gray on a white background

UPDATE

I found a project explaining how to solve this on Github . The solution includes creating a 9-part UIImage to represent the shadow. The creator also explains the basic layers of iOS 10 maps.

Answer 2

So, I'm trying to recreate the look of iOS 10 cards. I decided to attach the maps application in the simulator to the debugger to find out what is happening ...

Apple really get around this by having UIImage on top of content with a border and shadow. Not the most elegant way to do this, but I'm going to find the exact look, so I'm going to take the exact approach.

I also grabbed the asset (using this ) from the Maps app to save my own. It's a shame that they only have a 2-fold piece of art: /

Answer 3

I found in iOS 12 that this is not a problem, the UIVisualEffectView ignores the shadow under the views, it just sees through the shadow, as if the shadow does not exist.

Answer 4

The trick is not to set the shadowPath layer. If it is installed, the shadow is painted over under the visual effect and, as a result, darkens the blurry view.

Documentation for shadowPath states:

If you specify a value for this property, the layer will create its shadow using the specified path instead of layers composed of an alpha channel.

The “instead of ...” part is what we really need: the shadow should be drawn after rendering the content, based on what the content leaves transparent. Now you can be prevented from not installing shadowPath because the documentation also says that "an explicit path usually improves rendering performance." However, I have not seen any problems in real life so far. I believe that compared to the cost of rendering a UIVisualEffectView drawing a shadow does not matter.

Also, don't forget to set the shadow on the UIVisualEffectView , and not on the sibling view.