[iOS] clipsToBounds 란 무엇인가? (feat. 모서리를 둥글게 둥글게)

막연하게 cornerRadius를 주기 위해 필요한 것. 정도로 알고 있던 clipsToBounds.

그런데 이 설정을 주더라도 모서리 둥글게가 먹히지 않을 때가 있어서 이건 정확히 뭘까 궁금했는데,

주말을 맞은 김에(?) clipsToBounds란 정확히 무엇인가 알아보려고 한다.

 

개념 정리

먼저 애플 공식 문서의 요약은 아래와 같다.

 

" subview들이 view의 bounds에 가둬질 수 있는 지를 판단하는 Boolean 값 "

A Boolean value that determines whether subviews are confined to the bounds of the view

 

var clipsToBounds: Bool { get set }

 

" 이 값을 true로 설정하면 subview들이 receiver의 bounds에 clip될 수 있다. false로 설정한다면, receiver의 bounds 바깥까지 확장된 frame을 가진 subview들은 clip되지 않는다. 기본 값은 false다 "

Setting this value to true causes subviews to be clipped to the bounds of the receiver. If set to false, subviews whose frames extend beyond the visible bounds of the receiver are not clipped. The default value is false.

 

여기서 receiver는 subview를 포함하는 view,

clip된다는 건 잘릴 수 있다는 의미이다.

 

즉, true로 설정하면 subview가 view의 경계를 넘어갈 시 잘리며

false로 설정하면 경계를 넘어가도 잘리지 않게 되는 것!

 

그러니 모서리를 둥글게 설정하려고 할 때,

view의 cornerRadius를 설정해준 뒤 clipsToBounds를 true로 설정하면

subview에 무언가 채워질 때 view의 둥글게 된 틀에 따라 덩달아 잘리게 되는 것이다.

 

뭔가 설명이 복잡한데, 쿠키 틀을 설정해준다고 생각하면 쉽다.

clipsToBounds를 true로 설정하면 view의 외곽선이 쿠키 틀처럼 작용하여, 안에 내용물이 들어갈 때 틀 바깥의 것들은 잘라내버리는 것!

간단한 예제

clipsToBounds와 cornerRadius 설정을 간단하게 연습해보았다.

먼저 스토리보드 구성은 아래와 같다.

 

 

• UpperView / LowerView : clipsToBounds - false
  • UpperImageView / LowerImageView: clipsToBounds - false, contentMode - Aspect Fill

 

두 개의 View 안에 그보다 좀 작은 크기의 ImageView가 있고, Image가 설정되어 있는 구조이다.

clipsToBounds는 모두 설정하지 않았으며 Image는 비율에 맞게 꽉 차도록 설정해주었다.

 

그리고 viewDidLoad에 아래와 같은 코드를 작성했다.

 

upperImageView.layer.cornerRadius = 25
upperImageView.clipsToBounds = true

lowerView.layer.cornerRadius = 25
lowerView.clipsToBounds = true

 

위의 이미지는 ImageView에 clipsToBounds를,

아래의 이미지는 바깥 View에 clipsToBounds를 적용해주었다.

 

실행해보면 결과는...!

 

 

윗쪽 이미지는 ImageView의 bound에 따라서,

아랫쪽 이미지는 View의 bound에 따라서 잘려 나간 것을 확인할 수 있다!

 

---

 

그간 모서리 설정이 제대로 안 된건 subview가 잘려 나간다는 개념을 제대로 이해하지 못해서였다.

subview에 아무리 clipsToBounds를 줘봐야 상위 view에서 설정된 게 아니라면 무용지물이었던 것🥲

이젠 헷갈리지 말자!