[iOS] clipsToBounds / masksToBounds

2022년 9월 8일에 작성됨

 

이번에는 전에 다뤘던 [iOS] ScaleToFill / AspectFit / AspectFill 부분의 연장이라고 봐도 됩니다. 바로 masksToBounds / clipsToBounds 이 친구들인데 뷰를 그리는 데 있어서 중요한 부분을 담당합니다.

두 친구가 하는 일은 거의 똑같습니다. 둘 다 자신의 영역 이외의 영역을 그릴지 말지를 정해주는 역할을 하거든요. 그럼 뭐가 다르냐?

 

사진을 보시면 알겠지만 clipsToBounds는 UIView의 프로퍼티고 masksToBounds는 CALayer의 프로퍼티입니다. 그리고 둘 다 default 값이 false입니다.

 

clipsToBounds : View 영역을 넘어갔을 때 그 부분을 보이게 할 거냐 안 보이게 할거냐
masksToBounds : layer 영역을 넘어갔을 때 그 부분을 보이게 할거냐 안 보이게 할거냐

이라고 생각하면 편할 거 같습니다. 더 자세한 내용을 알고 싶으시면 clipsToBounds 문서, masksToBounds 문서 애플 문서를 확인해 주세요!

 

예시를 통해 자세히 알아보도록 합시다.

 

현재 초록색 뷰가 superView이고 회색 바탕 뷰가 subView입니다. clipsToBounds와 masksToBounds는 default로 false가 세팅이 되어 있기 때문에 영역을 넘어간 부분이 보이는 모습을 볼 수 있습니다.

여기서 만약 superView의 clipsToBounds를 true로 준다면 결과가 어떻게 나올까요?

view.clipsToBounds = true

 

이렇게 영역을 벗어난 부분이 보이지 않게 됩니다. masksToBounds의 결과도 똑같을까요?

view.layer.masksToBounds = true

 

네 똑같은 결과가 나온다는 것을 확인할 수 있습니다. 여기서 중요한 점은 subView는 보이지만 않을 뿐 실제 크기는 유지하고 있다는 점입니다.

 

자 이제 제 프로젝트의 예시를 잠깐 보여드리고 정리하도록 하겠습니다.

var imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.contentMode = .scaleAspectFill
    return imageView
}()

 

제 프로젝트의 일부분입니다. 이미지를 띄워줘야 하는데 scaleAspectFill는 어떤 역할을 하죠? 네 ~ 바로 원본 이미지의 비율을 맞추면서 이미지를 꽉 채우는 옵션입니다.

 

딱 보시면 이미지가 영역을 벗어나 보이죠? 이때 clipsToBounds / masksToBounds 값을 true로 준다면?

 

이렇게 이미지가 영역을 벗어나지 않게 됩니다.

그리고 뷰의 모서리를 둥글게 하고 싶을 때 view.layer.cornerRadius에 값을 주면 되는데 이 경우에도 clipsToBounds / masksToBounds 값에 true로 세팅을 해야 모서리가 둥글게 잘립니다.

var imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.contentMode = .scaleAspectFill
    imageView.layer.cornerRadius = 10
    imageView.clipsToBounds = true
    return imageView
}()

 

이 정도면 어느 정도 감을 잡을 수 있을 거라 생각합니다.

간단히 clipsToBounds / masksToBounds에 대해 정리해 보면

 

ClipsToBounds

true : 내 영역(SuperView) 이외 영역의 SubView는 Draw 하지 않는다
false : 내 영역(SuperView) 이외 영역의 SubView도 Draw 한다

 

MasksToBounds

true : 내 영역(Layer) 이외 영역의 SubLayer는 Draw 하지 않는다
false : 내 영역(Layer) 이외 영역의 SubLayer도 Draw 한다