在UIVisualEffectView周围创建阴影而不覆盖整个视图

Question

是否可以使用UIBlurEffect在UIVisualView周围创建阴影，而不让UIVisualView被下面的阴影着色？

我基本上只想要视图周围的阴影，但是使用此代码，阴影将覆盖整个视图，使整个视图变暗：

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)

编辑。
我需要实现与Apple的Maps应用程序相同的功能。 可拖动的收藏夹视图都使用UIVisualEffectView和顶部的阴影，而不会干扰UIVisualEffectView的背景。

查看示例屏幕截图：

Answer 1

好吧，问题是我在底层视图中的背景是白色的。 由于UIBlurEffect .extraLight在比BlurEffect更亮的背景上使用，UIVisualView下方的阴影看起来比背景更鲜艳。

在这个问题中也有描述：
修复UIVisualEffectView额外的光模糊在白色背景上是灰色的

UPDATE

我找到了一个解释如何在Github上解决这个问题的项目解决方案涉及创建一个9部分的UIImage来表示阴影。 创建者还解释了iOS 10 Maps的底层。

Answer 2

所以我试图重新创建iOS 10地图的外观。 我决定将模拟器中的地图应用程序附加到调试器，看看发生了什么......

Apple实际上通过在边框和阴影的内容顶部使用UIImage来解决这个问题。 这不是最优雅的方式，但我要准确的外观，所以我会采取确切的方法。

我还从地图应用程序中抓取了资产（使用此项 ）以保存自己的资产。 很遗憾，他们只有@ 2x艺术品：/

Answer 3

我发现在iOS 12中，这不是问题， UIVisualEffectView忽略了视图下方的阴影，它只是通过阴影看到，就像阴影不存在一样。

Answer 4

诀窍是不设置图层的shadowPath 。 如果已设置，阴影将绘制在视觉效果视图下方，从而使模糊视图变暗。

shadowPath的文档说明：

如果为此属性指定值，则图层将使用指定的路径而不是图层的合成Alpha通道创建其阴影。

“相反......”部分是我们实际需要的部分：阴影应该在渲染内容之后根据内容透明的内容进行组合。 现在您可能无法设置shadowPath因为文档还指出“显式路径通常可以提高渲染性能”。 但是，到目前为止我没有看到现实生活中的任何问题。 与UIVisualEffectView的渲染成本UIVisualEffectView ，绘制阴影并没有什么区别，我假设。

还要确保在UIVisualEffectView视图上设置阴影，而不是在兄弟视图上。

Answer 5

我通常使用视图组合来解决这种情况。 我没有在目标视图中设置阴影，而是创建了一个ShadowView，并将其放在目标视图后面，两个视图都使用相同的框架。

我在这个问题上发布了示例和代码。

这种方法的结果示例如下：