SketchのShadowsの意味とiOS・Xcodeでのシャドー適用方法

SketchのShadowsプロパティの意味

iOS開発者が、上の画像のようなSketchのShadowsを実装する際、それぞれが何を意味するか疑問に思う。
それぞれ実際に値を変えて何を意味するか調べる。

まずBLurはボカシを意味し値が０の場合、ボカシのない黒塗りとなる。
この時、X = 5なのでX軸方向へ５つ黒塗りとなっている。


Blurを３にした時も５にした時もY軸方向の値（＝５）から２つほど伸びている。５にした時の方が全体的に薄くなる。

Y軸方向は、同様にプロパティYで調整する。

iOSでSketchのShadowsを実装してみる

shadowButton.layer.shadowColor = UIColor.black.cgColor
shadowButton.layer.shadowOpacity = 0.9
shadowButton.layer.shadowOffset = CGSize(width: 5.0, height: 0.0)
shadowButton.layer.shadowRadius = 2.0

だいたいshadowOffsetのwidthがSketchのxに、heightがyに相当します。
注意するのがshadowRadiusをSketchのBlurの２分の１にすることです。

Sketchのシャドーを適用するCALayer+Extension

CALayer+Extension.swift

extension CALayer {
  func applySketchShadow(
    color: UIColor = .black,
    alpha: Float = 0.5,
    x: CGFloat = 0,
    y: CGFloat = 2,
    blur: CGFloat = 4,
    spread: CGFloat = 0)
  {
    shadowColor = color.cgColor
    shadowOpacity = alpha
    shadowOffset = CGSize(width: x, height: y)
    shadowRadius = blur / 2.0
    if spread == 0 {
      shadowPath = nil
    } else {
      let dx = -spread
      let rect = bounds.insetBy(dx: dx, dy: dx)
      shadowPath = UIBezierPath(rect: rect).cgPath
    }
  }
}

間違ってたらごめんなさいね