iOS) View rounded + shadow 구현하기

모서리를 둥글게 하는 corner rounded와 그림자 효과를 같이 사용해야 할 경우가 많이 있습니다.

각각은 쉽게 구현할 수 있지만 이 둘을 함께 사용하면 문제가 발생합니다.

---

오늘은 round 와 shadow, 

1. 각각은 어떻게 구현하는지
2. 합치면 무슨 문제가 있는지
3. 그래서 어떻게 하는지?

알아보도록 하겠습니다.

---

1. Each Implement

 

Set corner rounded

let cornerView = UIView() 

... 

cornerView.layer.cornerRadius = 15 
cornerView.layer.maskToBounds = true 

// or 
cornerView.layer.cornerRadius = 15 
cornerView.clipsToBounds = true

원리는 간단합니다. View의 layer에 cornerRadius를 주고

maskToBounds 혹은 clipsToBounds를 통해 레이어 바깥 부분을 잘라냅니다.

maskToBounds와 clipsToBounds은 같은 일을 합니다.

 

Set shaodw

let shadowView = UIView() 

... 

shadowView.layer.shadowColor = UIColor.black.cgColor 
shadowView.layer.shadowOffset = .zero 
shadowView.layer.shadowRadius = 10 
shadowView.layer.shadowOpacity = 0.9

마찬가지로 간단합니다. layer에 shaodw 효과들을 잘 주면 됩니다.

 

2. Problem

쉽네, 그대로 합치면 되잖아?

라고 생각하실 수 있지만 잘 생각해보면 문제가 있습니다.

rounded를 설정할 때 clipsToBounds를 합니다. 레이어 바깥 부분을 잘라내는거죠.

하지만 shadow는 layer 바깥 부분에 그려집니다.

따라서 이 둘은 양립할 수 없고 둘 중 하나를 택일해야 하는 상황이 발생하는거죠

 

3. Solution

그렇다면 어떻게 해결할 수 있을까요?

가장 간단한 방법은 2개의 View를 사용하는 겁니다.

InnerView(실제 컨텐츠가 들어갈 View) 와

바깥에 InnerView와 똑같이 둥글고 shadow가 들어간 ContainerView를 만들어 합쳐주는 겁니다.

이렇게 하면 안의 뷰의 레이어를 깍아내도 바깥의 뷰는 깍지 않기 때문에 containerView의 layer 바깥에 그려진 shadow는 그대로 남아있게 됩니다.

let containerView = UIView() // layer (shadow) 
let innerView = UIView() // clipsToBounds (rounded) 

containerView.addSubView(innerView) 

...

containerView.layer.shadowColor = UIColor.black.cgColor 
containerView.layer.shadowOffset = .zero 
containerView.layer.shadowRadius = 10 
containerView.layer.shadowOpacity = 0.9 

innerView.layer.cornerRadius = 15 
innerView.clipsToBounds = true // 내부 뷰만 layer를 깍아냅니다.

 

읽어주셔서 감사합니다 :D