Old_SWIFT(221012)/기본이야기

[AutoLayout]UILabel, Hugging Priority, Compression Resistance Priority, Intrinsic Content Size

KataRN 2022. 2. 23. 14:20
반응형

안녕하세요. KataRN입니다.

오늘은 Hugging priority, Compression Resistance priority에 대해서 알아보겠습니다.

 

스토리보드에서 가끔 제 생각에는 문제가 없는데 빨간줄이 생기면서 문제가 있다고 뜨는겁니다.

뭐 다양한 이유가 있겠지만 그중 Hugging priority, Compression Resistance priority에 의해서 해결되는 경우를 다뤄볼까 합니다.

이걸로 해결되는 분들도 많으실거에요. 그렇지만 이번 글의 목적은 공유보다는 제가 헷갈려서 글로 작성해봅니다.ㅎㅎ

 

예제는 단순합니다.

스토리보드를 열고 ViewController에 UILabel을 두개 평행하게 위치시킵니다. UILabel 각각 위 왼쪽 오른쪽 아래 20의 거리를 줍니다.

 

 

저렇게 빨갛게 됩니다.

저는 처음에 이걸 봤을때 이런생각을 했었습니다.

 

더보기

왜지?

둘다 위 아래 왼쪽 오른쪽 거리를 다줬는데 뭐가 문제야?

... 화난다 ...

이유에 대해 설명드리겠습니다.

UIView와 다르게 UILabel은 Intrinsic Content Size(콘텐츠의 본질적인 크기)라는것을 갖고있습니다.

  Intrinsic Contet Size Width Intrinsic Contet Size Height
UIView X X
UISlider O X
UILabel, UIButton, UISwitch,
UITextField
O O
TextView, ImageView Content에 따라 변화함

UIView에선 Width Constraints를 지정하지 않으면

Intrinsic Content Size Width를 가지지 않아서 레이아웃단 에러가 나지만,

UILabel에선 Width Constraints를 지정하지 않아도,

Intrinsic Content Size Width 즉, 본질적인 Width를 가지기 때문에 레이아웃단 에러가 나지 않는다고합니다.

- 출처 : https://babbab2.tistory.com/135

 

위의 퍼온 내용을 참고해서 설명드리자면

UILabel은 본질적인 크기를 갖고있어야하는데 서로 20의 거리를 유지!라는 설정을 했을때 20거리를 유지하기위해서는 UILabel이 커지거나 작아져야합니다. 이때 누가 커질거냐 누가 작아질거냐를 정해줘야합니다.

그런데 이 우선순위가 처음에는 둘이 같으니 정해달라는겁니다.

이것이 Hugging priority, Compression Resistance Priority 입니다.

 

UILabel을 클릭하면 오른쪽 하단에 이런게 있습니다.

1. Hugging priority 

우선순위 값이 높으면 포옹함 = UILabel이 글자를 포옹함 = UILabel, 글자 너비가 같음 = UILabel이 안커짐 = UILabel 크기 유지

 

2. Compression Resistance priority 

우선순위 값이 높으면 압축에 저항함 = UILabel이 압축이 안됨 = UILabel, 글자 너비가 같음 = UILabel이 안작아짐 = UILabel 크기 유지

https://ahyeonlog.tistory.com/37

 

UILabel에 모두 '안녕하세요'를 적었습니다. Intrinsic Content Size가 '안녕하세요'만큼 생긴겁니다.

우선 Content Hugging Priority를 변경해보겠습니다.

기본값은 251입니다. 이걸 250으로 우선순위값을 줄여보겠습니다.

두 UILabel의 Hugging Priority : 250(왼쪽) < 251(오른쪽)

오른쪽 UILabel은 Intrinsic Content Size Width를 유지하게됩니다.

 

그러면 Compression Resistance는 무었일까요?

이번엔 위 상태에서 안녕하세요 글자를 5번씩 늘려보겠습니다.

그러면 다시 빨간색 선이 생깁니다.

왜 생겼을까요?

글씨가 늘어나서 Intrinsic Content Size Width가 길어졌는데 공간이 부족합니다.

누군가는 압축되어서 줄어들어야하는데 우선순위가 같아서 생긴겁니다.

 

이번에는 왼쪽 UILabel의 Content Compression Resistance Priority를 낮춰보겠습니다.

기본값은 751입니다. 750으로 낮추겠습니다.

압축 저항력이 낮아졌습니다.

Content Compression Resistance Priority : 750(왼) < 751(오)

 

왼쪽은 저항력이 낮아서 압축되었습니다. 이때 오른쪽 UILabel의 Intrinsic Content Size Width가 화면의 길이보다 크기때문에 여분이 없어서 왼쪽의 너비는 0이 되었습니다.

 

Hugging를 이해하기 쉽게 표현하기위해 노력많이했습니다.

도움이 되셨길 바랍니다.

 

오늘도 긴글 읽어주셔서 감사합니다.

반응형