在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，並將其放在目標視圖后面，兩個視圖都使用相同的框架。

我在這個問題上發布了示例和代碼。

這種方法的結果示例如下：