🥚

Recent Notes

See 20 more →

Shadow

3 min read

업무 하면서 Shadow에 대해 알게된 내용을 정리한다.

코드

extension CALayer {
    func shadow(color: UIColor, alpha: CGFloat, x: CGFloat, y: CGFloat, blur: CGFloat, spread: CGFloat) {
        shadowColor = color.cgColor
        shadowOpacity = alpha
        shadowOffset = CGSize(width: x, height: y)
        shadowRadius = blur
        masksToBounds = false
        if properties.spread == 0 {
            shadowPath = nil
        } else {
            let dx = -spread
            let rect = bounds.insetBy(dx: dx, dy: dx)
            shadowPath = UIBezierPath(rect: rect).cgPath
        }
    }
}
 
self.view.layer.shadow(color: .black, alpha: 0.5, x: 0, y: 0, blur: 4, spread: 0)

Subview의 순서를 잘 넣자.

  • Shadow 적용은 addSubview 순서에 따라 가려짐이 결정된다.
  • 가장 나중에 넣은 것이 가장 위에 있다고 판단되어 그림자가 생긴다.
  • 순서 잘못 넣으면 그림자가 가려져서 안보이게 된다.
  • 즉, 그림자에 대해서는 교환법칙이 성립하지 않는다.

배경색을 넣자.

  • 또한 특정 View Component의 background가 정해지지 않았다면, 빛은 투과한다.
  • 그래서 특정 View안에 다른 View를 넣었는데, 바깥 View의 색은 지정하지 않은 상태, 내부 View의 색은 지정한 상태로 그림자를 드리우면
  • 내부 View만 그림자가 생기고 바깥뷰는 생기지 않는다.

Blur

  • 그림자 테두리의 흐릿한 정도를 말한다.
  • blur를 적용하기 위해서는 다음의 방법으로 적용해야 한다고 알려주더라.
  • blur / UIScreen.main.scale
  • 그런데 shadowRadius를 보면, 해당 값은 이미 pt라고 명시되어 있다.
  • 따라서 굳이 변환과정을 거치지 않고, 일반적인 디자인에서 pt를 기준으로 처리하기 때문에
  • 그 값을 그대로 사용해도 문제가 없을 것으로 생각된다.
  • spread도 마찬가지다.

Spread

Reference

Graph