1. ホーム
  2. ios

[解決済み] シャドーの広がりやぼかしをコントロールするには?

2022-06-18 03:55:13

質問

私は sketch で UI 要素をデザインし、それらのうちの 1 つは、blur 1 と spread 0 の影を持っています。 views レイヤープロパティのドキュメントを見ましたが、レイヤーは spread や blur など、同等の名前のものを持ちません(唯一のコントロールは単に shadowOpacity だけです)。どのようにして、ぼかしや広がりのようなものを制御することができますか?

以下は、Sketch での私の設定です。

そして、影はこんな感じにしたいです。

そして、現時点ではこんな感じです。

注意:実際に影を見るには、画像をクリックする必要があります。

私のコードは以下の通りです。

func setupLayer(){
    view.layer.cornerRadius = 2
    view.layer.shadowColor = Colors.Shadow.CGColor
    view.layer.shadowOffset = CGSize(width: 0, height: 1)
    view.layer.shadowOpacity = 0.9
    view.layer.shadowRadius = 5
}

どのように解決するのですか?

ここでは、UIView のレイヤーに Sketch の 6 つのシャドウ プロパティをすべて、ほぼ完璧な精度で適用する方法について説明します。

extension CALayer {
  func applySketchShadow(
    color: UIColor = .black,
    alpha: Float = 0.5,
    x: CGFloat = 0,
    y: CGFloat = 2,
    blur: CGFloat = 4,
    spread: CGFloat = 0)
  {
    masksToBounds = false
    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
    }
  }
}

次のように表現したいとします。

経由で簡単にできます。

myView.layer.applySketchShadow(
  color: .black, 
  alpha: 0.5, 
  x: 0, 
  y: 0, 
  blur: 4, 
  spread: 0)

とか、もっと簡潔に言うと

myView.layer.applySketchShadow(y: 0)

左:iPhone 8 UIView のスクリーンショット、右:iPhone 8 UIView のスクリーンショット。スケッチの矩形。

注意

  • ゼロでない spread を指定した場合、そのパスがハードコードされます。 bounds を元にパスをハードコードします。もしレイヤーの境界が変わることがあれば、その時は applySketchShadow() メソッドを再度呼び出したいでしょう。