[clipsToBounds] view안에 있는 imageView를 둥글게 하고 싶을 때 둘다 radius값을 주어야할까?? (+일부 모서리만 둥글게 하기) - iOS

 

 

 

화면을 구성하다보면 view안에 컴포넌트들을 배치하는 경우가 있죠!

그럴 때 만약 아래 그림과 같이 배치했다고 했을 때 view와 imageView를 모두 다듬 고 싶을 때 어떻게 해야할까요??

 

storyboard

 

 

 

 

 

약간의 제약조건과 이미지를 asset에서 하나 가져와 설정해주고 실행해보면 

 

simulator iPhone11

이런 모습입니다.

 

 

 

 

 

 

 

여기서 제가 이미지의 모서리를 둥글게 하고싶다! 하면?

 

*참고*

cardView : 갈색 부분에 해당하는 뷰

posterImageVIew : 사진이 출력되고 있는 이미지뷰

configure() : ui관련 설정 코드들을 묶어 함수로 분리한 것

 

아래에 나오는 코드들은 모두 configure() 함수 내에 작성한 부분들입니다.

****

code capture - 1

위의 configure() 안의 코드 처럼

imageView의 cornerRadius 값을 지정해주면 됩니다.

 

 

 

 

 

 

 

지정해주고 나면

imageView cornerRadius

 

 위와 같이 imageView의 모서리가 다듬어지는데

잘 안보이실 것 같아서 확대해보면! 

여기 posterImageView가 다듬어저 둥글어졌고,

그 뒤의 갈색 cardView가 빼꼼 보이는 모습을 확인하실 수 있습니다!

 

 

 

 

 

 

 

하지만 저희의 목적은

"cardView도 둥글게 하는 것"

이었기 때문에

 

 

 

 

우선 

cardView에도 cornerRadius값을 줘봅시다!

 

그러면

  func configure() {
    posterImageView.layer.cornerRadius = CGFloat(8)
    cardView.layer.cornerRadius = CGFloat(8) // 추가!
  }

 

 

 

위와 같이 cardView의 cornerRadius값을 주는 코드를 추가해주고 실행해보면~

 

 

짠!

이미지와 배경 모두 둥글게 잘 깎인 모습을 볼 수 있죠?

 

 

 

 

 

 

 

 

 

[ Q ]

그런데 잠깐.

  func configure() {
    cardView.layer.cornerRadius = CGFloat(8)
  }

 

여기서 만약 posterImageView의 cornerRadius 값을 주는 코드를 주석 처리하고

cardView관련 코드만 남기고 실행한다면 어떻게 될까요??

 

 

 

 

 

 

 

정답은

아래 그림과 같이 됩니다.

 

 

보면 

cardView는 4개의 모서리 다 잘 깎였습니다.

하지만 그 위에 posterImageView가 얹어져있기 때문에

우리가 posterImageView의 radius 설정을 해주지 않아서

모서리가 그대로 남아있는 것을 볼 수 있습니다.

 

.

.

.

.

.

 

이럴때 우리가 사용해야하는 프라퍼티가 바로 !

" clipsToBounds "

입니다!

 

 

 

 

 

 

 

 

---

 

clipsToBounds

오늘도 어김없이 나오는 공식문서...

자 공식문서를 보면

 

apple documentation - clipsToBounds

 

 

Bool값인데, subView들이 view의 bounds(경계, 테두리)를 따를 것인지(viewd의 경계를 따라 다듬어줄 것인지) 정해주는 값입니다.

 

cardView에 clipsToBounds값을 true로 주면

  func configure() {
    cardView.layer.cornerRadius = CGFloat(8)
    cardView.clipsToBounds = true // 추가!
  }

 

 

 

 

 

 

아래와 같이

cardView의 곡률에 따라 posterImageView도 같이 다듬어지게 됩니다 ㅎㅎ

 

UIView clipsToBounds

 

 

 

 

 

 

[ Q ]

왜 굳이 각자 cornerRadius값을 설정하지 않고 clipsToBounds를 쓰죠?

그 이유는

만약 imageView와 view의 모서리를 다른 값을 주어 각자 다른 곡률을 주고 싶다면

처음에 작성했던대로

각각의 cornerRadius값을 주는 형태로 지정해주면 됩니다.

 

 

하지만 위와 같이 

view안에 imageView가 속해있고

두개를 같은 곡률로 다듬어주고 싶다!

그런데 두개를 각각 conerRadiusr값을 지정해줬다면

매번 두개의 값을 변경해주어야 할 것입니다.

(혹은 변수에 값을 지정해두고, 두 프라퍼티에 같은 값을 대입해줄 수도 있겠지만)

 

 

cardView.clipsToBounds를 true로 주고

cardView의 conerRadius 값만 조정해주면

cardView, posterImageView 둘이 같은 값으로 같이 조정 되겠죠??

 

 

---

clipsToBounds를 검색하시면 같이 보이는 개념이 

maskToBounds입니다.

(뭐하는 앤지 궁금하죠? ...궁금하시죠..? 궁금하다고 해주세요...)

 

 

 

 

 

간단하게 공식 문서 캡쳐본을 남기고 

다음 포스팅에서 

테스트 코드/화면과 함께 돌아오겠습니다 :)

 

 

+ maskToBounds

apple documentation - masksToBounds

 

 

 

 

 

 

 

 

 

 

 

 

 

틀린부분이 있거나, 더 좋은 방법이 있다면 댓글로 남겨주세요! 
🌈댓글은 언제나 환영입니다🙏🏻

 

 

 

 

참고자료

https://developer.apple.com/documentation/uikit/uiview/1622415-clipstobounds

Apple Developer Documentation

https://developer.apple.com/documentation/quartzcore/calayer/1410896-maskstobounds

Apple Developer Documentation