업무 하면서 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
Goal, Plan, Execute.