開發實現

在 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 裡陰影的 “擴充套件”，值是 10let spread: CGFloat = 10var 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 50layer.shadowOpacity = 0.5// X: 0  Y: 10layer.shadowOffset = CGSize(width: 0, height: 10)// 對應 Sketch 裡陰影的 “模糊” 的設定，值是 20 / 2 = 10layer.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)

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

開發實現

推薦?：

相關文章