[iOS/Swift] search bar 에 테두리와 그림자 동시 적용하기 - clipsToBounds

 

search bar의 cornerRadius를 적용하고, 그림자도 적용하려 하였다.

cornerRadius는 clipsToBounds를 사용하여 layer 바깥을 잘라내어 적용이 되는데, 그림자는 layer 바깥에 적용하는 것이라 clipsToBounds값을 설정하는 데에 문제가 생긴다.

 

clipsToBounds를 true로 설정하여 테두리 조건만 적용이 된 모습이다.

 

그림자를 적용하였지만 반영이 되지 않는다.

두가지 조건을 모두 적용하려면 어떻게 해야할까?

 

💡 그림자를 적용할 UIView를 만들자

파란색 uiview를 만들어 바깥에 배치할 uiview는 그림자를 적용하고, 내부에 들어갈 뷰는 corner radius를 적용시키면 된다.

 

 

 

UIView의 위에 searchBar를 올린 후 각각 디자인을 적용하였더니 아주 깔끔하게 그림자와 테두리가 적용되었다!