[masksToBounds] view 위에 있는 레이블이 view의 너비에 맞게 잘리나요? 안잘리게 하고싶다면? - iOS

 

 

 

 

앞의 글의 샘플 프로젝트에 이어서 작성하였습니다.

참고해주세요!

(앞의 프로젝트와 마찬가지로, configure() 함수 내부 코드만 변경하였습니다.)

https://nareunhagae.tistory.com/39

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

 

 

위에서는 clipsToBounds 속성을 활용해서

view의 모서리를 다듬었을 때

view위의 imageView까지 같이 다듬어지도록 만들어 보았습니다.

 

 

---

 

 

 

clipsToBounds 속성을 놔둔 상태로

UI 에 Label을 하나 더 얹어주어보았습니다.

 

(하단에 생긴 explanation 레이블 입니다.)

 

 

 

 

지금부터 explanation 레이블에 주목해주세요!

 

 

---

 

 

 

지금은 레이블의 text길이가 짧기 때문에 문제가 없어보이죠?

여기에서 제가 레이블 안의 글자를 기이이일게 넣어보겠습니다.

  func configure() {
    exTitleLabel.text = "KEEN's Objects"
    exSubtitleLabel.text = "KEEN의 개인 소장품 전시회"
    explainationLabel.text = "이 전시회는 KEEN의 소장품들로 구성되어있습니다.\n즐거운 관람 되세요 :)"
    cardView.layer.cornerRadius = CGFloat(8)
    cardView.clipsToBounds = true
  }

 

그리고 실행하면~

 

레이블도 같이 잘렸습니다...

저는 레이블은 잘리지 않고 view를 벗어나더라도 글자를 모두 보여주고 싶은데 말이죠 ㅠ.ㅠ

 

 

 

 

---

 

이럴 때 쓰는 속성이 바로~~

masksToBounds

 

 

 

" masking "

시각적으로 엘리먼트(이미지 객체)의 일정/전체 부분을 숨기는 것을 말합니다.

(ex. 마스킹 테이프)

 

위의 정의에서 보면

masksToBounds는 Bool 타입으로

 

true값을 주면

sublayer들이 상위 layer의 bounds(경계)를따라 clipped(잘리게, 다듬어지게) 됩니다.

 

false값을 주면

다듬어 지지 않고 그대로 있게 됩니다!

 

 

 

 

 

 

masksToBounds 속성을 지정해주지 않으면 기본값으로

 

print masksToBounds Bool value

 

위의 그림과 같이 true 가 들어있는 것을 볼 수 있습니다.

 

 

 

 

 

 

< TIP >

-----------------------------------------------------------

clipsToBounds, masksToBounds 에서 

 

디자인을 해보신 분들이라면 알고 계시겠지만,

clip, mask가 무엇인지 잘 모르겠는 분들도 있을거에요!

그러신 분들은

CSS에 clipping과 masking의 차이와 특징에 대해서 알아보시면 

이해가 되실 겁니다👍

 

궁금하신 분은 링크를 참조해주세요! 

 

-----------------------------------------------------------

 

 

 

 

---

 

 

 

 

그럼 이제 실제로 프로젝트에 적용해서 어떤 모습으로 화면에 보이는지 보겠습니다.

우선 코드를 다음과 같이 작성하고 

 

  func configure() {
    exTitleLabel.text = "KEEN's Objects"
    exSubtitleLabel.text = "KEEN의 개인 소장품 전시회"
    explainationLabel.text = "이 전시회는 KEEN의 소장품들로 구성되어있습니다.\n즐거운 관람 되세요 :)"
    cardView.layer.cornerRadius = CGFloat(8)
    cardView.clipsToBounds = true
  }

 

실행하면 ~

 

 

masksToBounds = true

 

explanation Label이 잘려있습니다.

지정해주지 않았을 때 기본값이 true이기 때문에,

상위 레이어에 있는 cardView의 너비에 맞춰 "다듬어"진 겁니다.

 

 

 

 

 

 

이번엔 아래 코드와 같이

masksToBounds값을 false로 줘보겠습니다.

 

  func configure() {
    exTitleLabel.text = "KEEN's Objects"
    exSubtitleLabel.text = "KEEN의 개인 소장품 전시회"
    explainationLabel.text = "이 전시회는 KEEN의 소장품들로 구성되어있습니다.\n즐거운 관람 되세요 :)"
    cardView.layer.cornerRadius = CGFloat(8)
    cardView.clipsToBounds = true
    cardView.layer.masksToBounds = false // 추가!
  }

 

그리고 실행하면!

 

 

masksToBounds = false

 

타 - 라 -

 

제가 원했던 대로 

explanation Label이 잘리지 않고 모두 출력되었답니다~~

( 모두 박수! )

 

 

 

 

 

 

 

 

⚠️

여기서 추가로 하나 주의사항!

clipsToBounds와 masksToBounds의 이름에서도 알 수 있듯이 

 

이 두 속성은 모두 "Bounds" 를 기준으로 작동합니다!

 

 

bounds를 기준으로 작동한다는 말이 뭐지..? 그거 말도 또 뭐가 있나..?

(내가 또 뭘 공부해야 하는거지.. 봐야할게 늘기만하고 줄진 않네...)

싶으신 분들은

 

 

 

 

 

frame과 bounds의 차이에 대해 검색해보시거나

제가 작성한 이 글을 참고해주세요 🙏🏻🤸

(블로그 초창기에 작성해서 부끄럽지만..)

 

https://nareunhagae.tistory.com/3

Frame / Bounds 의 차이 - Swift

 

 

---

 

 

 

 

 

이거 작성해야지 하고 임시저장해놓고 

2일을 방치했네요..

 

나태했던 나 자신 반성해

 

 

 

 

 

 

 

 

+

혹시 base프로젝트가 필요하신 분들은

작성한 건 많지 않지만

가져다 쓰셔도됩니당!

(아웃렛 연결하고 제약조건 설정하기 귀찮잖아요?)

 

ForBlog.zip

8.22MB

 

 

 

 

그럼 오늘도 다 작성하였으니

호다닥 도망가겠습니다. 그럼 20000~

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

참고자료

https://shlee1353.github.io/2019/07/15/css-clip-mask/

CSS속성 Clipping과 Masking 차이점과 특징

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

Apple Developer Documentation