在 iOS 裏 100% 還原 Sketch 實現的陰影效果

還原不了設計師視覺稿的開發者不是一個合格的頁面仔。

Sketch 是 APP 設計的神器，大部分設計師都選擇它做爲 APP 界面的設計工具。

在 Sketch 裏設置一個陰影，效果圖和參數以下：

（Sketch 裏的效果）

（Sketch 裏的陰影參數）

開發實現

在 iOS 裏實現陰影的方式是使用 UIView 的 layer 屬性。

layer 裏與陰影有關的設置是如下幾個屬性：

• shadowPath
• shadowColor
• shadowOpacity
• shadowOffset
• shadowRadius

與 Sketch 裏陰影參數的對應關係是：

• shadowPath ~> 陰影的範圍
• shadowColor ~> 陰影的顏色
• shadowOpacity ~> 陰影的透明度
• shadowOffset ~> X 和 Y
• shadowRadius ~> 陰影的模糊

（layer 屬性和 Sketch 陰影的對應關係）

根據上圖的對應關係，在代碼裏實現就是（shadowView 的大小是 100x100）：

let layer = shadowView.layer
// spread 對應 Sketch 裏陰影的 「擴展」，值是 10
let spread: CGFloat = 10
var rect = CGRect(x: 0, y: 0, width: 100, height: 100);
rect = rect.insetBy(dx: -spread, dy: -spread)

layer.shadowPath = UIBezierPath(rect: rect).cgPath
// 顏色是黑色（ #000000 ）
layer.shadowColor = UIColor.black.cgColor
// alpha 50
layer.shadowOpacity = 0.5
// X: 0 Y: 10
layer.shadowOffset = CGSize(width: 0, height: 10)
// 對應 Sketch 裏陰影的 「模糊」 的設置，值是 20 / 2 = 10
layer.shadowRadius = 10
複製代碼

以上代碼運行的效果以下：

（實現效果）

100% 還原了 Sketch 的設計，完美了。

值得一提的是：layer 陰影和圓角是能夠共存的，並且陰影路徑也須要考慮圓角的值。

爲了使用方便，爲 CALayer 添加一個設置陰影的擴展：

extension CALayer {
    func skt_setShadow(color: UIColor? = .black, alpha: CGFloat = 0.5, x: CGFloat = 0, y: CGFloat = 2, blur: CGFloat = 4, spread: CGFloat = 0) {
        shadowOffset = CGSize(width: x, height: y)
        shadowRadius = blur * 0.5
        shadowColor = color?.cgColor
        shadowOpacity = Float(alpha)

        let rect = bounds.insetBy(dx: -spread, dy: -spread)
        let path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
        shadowPath = path.cgPath
    }
}
複製代碼

使用很簡單，傳入的值和 Sketch 裏的陰影參數同樣就行：

layer.skt_setShadow(color: .black, alpha: 0.5,
                    x: 0, y: 10, 
                    blur: 20, 
                    spread: 10)
複製代碼