ClipsToBounds vs MasksToBounds

UI 요소를 둥글게 만들고 싶을 때, 다음과 같은 코드를 작성해서 곡률 값을 설정합니다.

myView.layer.cornerRadius = 10

위의 코드에서는 View에 대한 곡률 값을 설정했는데, UIComponent라면 모든 경우에 대해서 위와 같이 곡률 값을 설정할 수 있습니다. 예를 들어서 UIButton, UITextView, UITextField 등..

 

그리고 만약, 구글링을 해서 둥글게 만들고자 했다면, 위의 코드와 같이 나오는 코드가 있을 것입니다.

myView.clipsToBounds = true

이런 코드, 또는

myView.layer.masksToBounds = false

이와 같은 코드를 cornerRadius 값과 함께 작성하는 것을 볼 수 있습니다.

 

당장 위의 코드들을 작성하지 않아도, 문제없이 둥글게 나오는 것을 확인할 수 있습니다. 그렇다면, 어떤 경우에 저런 코드를 써야 하는 것일까요? 그리고 두 코드는 같은 역할을 하는 것일까요?

 

먼저, 후자의 질문에 답을 하자면, 네! 맞습니다! 

clipsToBounds와 maksToBounds는 같은 역할/기능을 하는 코드입니다.

두 가지 모두 Bool 형으로 값을 설정 하는 프로퍼티입니다.

var clipsToBounds: Bool { get set }

var masksToBounds: Bool { get set }

 

그렇다면, 차이는 무엇일까요? 두 프로퍼티가 어디 소속(?)인지가 다릅니다.

먼저 clipsToBounds 부터 살펴보겠습니다. (이 프로퍼티의 경우, 스토리보드에서도 설정할 수 있습니다.)

 

clipsToBounds

clipsToBounds는 UIView의 프로퍼티로 기본값은 false입니다.

애플 공식문서를 통해 이 프로퍼티의 역할을 알아보면, SubView가 그 View가 포함되어 있는 View를 넘어선 경우, 그 뷰 밖으로 그릴 것인지/말 것인지를 설정하는 것입니다.

 

즉, 기본값인 false 값으로 설정을 한다면, SuperView의 밖으로 SubView가 그 바깥 영역에서 그려져도 상관없다는 것을 의미합니다. 이 경우에 만약 true로 설정한다면, SuperView 이외의 영역, 그 밖의 영역은 그리지 않습니다. 

📌 이때 주의할 점은 >> 그렇다면, SubView가 잘린 상태로 그 크기로 존재하는가?라는 질문에 대해서는 그리지 않을 뿐 SubView는 선언한 크기로 존재하고 있다는 점입니다. 

 

정리를 하자면,

clipsToBounds 프로퍼티에 대해서

✔️ true : SuperView 이외 영역의 SubView에 대해서는 그리지 않는다.

✔️ false : SuperView 이외 영역의 SubView도 그린다.

 

그리고 한 가지 더 알고 넘어갈 것은, 프로퍼티 이름에서 알 수 있는 것처럼 frame이 아니고 bounds에 기준한다는 것입니다. 그렇기 때문에 잘리는 영역이 SuperView 영역의 밖에서 넘어간 부분에 한해, bounds의 경계에서 잘리는 것입니다.

 

maksToBounds

앞서 말한 것과 같이, 두 가지 프로퍼티의 기능은 같습니다. 둘 다 자신의 영역 이외의 (SuperView의 영역 밖의) 영역을 그릴지, 말지를 설정하는 것은 같습니다.

 

다른 점은 maksToBounds는 CALayer의 프로퍼티입니다.

>> 따라서 호출을 할 때 layer을 통해서 호출을 해야 합니다. (그래서 같은 기능에 대해서 layer를 제어하는 것이므로. layer 호출이 추가적으로 필요한 작업입니다.) 

 

기본값 역시 false로 동일합니다. 애플 공식 문서를 통해 살펴보자면 SubLayer가 그 Layer를 포함하고 있는 레이어를 넘어선 경우, 해당 레이어 밖으로 그릴 것인지, 말 것인지를 한계를 설정하는 프로퍼티입니다. 즉, 다 똑같고 SubView가 아닌 SubLayer라는 것에 있어서 차이점이 있는 것입니다. 

 

정리를 해보면,

✔️ true : SuperLayer 이외 영역의 SubLayer는 그리지 않는다.

✔️ false : SuperLayer 이외 영역의 SubLayer도 그린다. 

 

그리고 이 프로퍼티 역시 clipsToBounds와 마찬가지로 bounds에 기준합니다.