Hugging & Compression Resistance

안녕하세요.

 

오늘은 AutoLayout 관련 프로퍼티인

Content Hugging Priority와 Content Compression Resistance Priority에 대해서 알아보도록 하겠습니다.

 

스토리보드에 View를 추가한 다음에 오토레이아웃을 설정하면 

이런 프로퍼티들이 나타나는 것을 확인할 수 있습니다. 

 

그 동안은 각각이 무엇을 의미하는지 정확히 알지 못해서 제약의 우선순위를 바꾸는 방법으로 문제를 해결하고는 했는데요.

 

오늘은 이 속성들이 무엇을 의미하는지 그 개념을 자세히 알아보도록 하겠습니다.

---

intrinsicContentSize

 

Hugging Priorty와 Compression Resistance Priority를 이해하기 위해서는

우선 intrinsicContentSize를 알아야 합니다.

 

https://developer.apple.com/documentation/uikit/uiview/1622600-intrinsiccontentsize

Apple Developer Documentation

 

뷰의 속성만 고려한 자연스러운 크기라고 하네요.

 

예를 들어서 UIButton의 intrinsicContentSize는 titled의 크기에 여백을 더한 크기입니다.

 

위의 사진처럼 버튼을 추가하기만 하고 제목만 변경해줘도 버튼의 크기가 변하는 것을 확인할 수 있습니다.

 

이건 UIButton이 intrinsicContentSize를 가지고 있기 때문입니다.

 

하지만 모든 View가 intrinsicContentSize를 가지고 있는 건 아닙니다.

 

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW21

Auto Layout Guide: Anatomy of a Constraint

 

View들의 instrinsic content size

위의 표와 같이 intrinsicContentSize를 가지지 않는 View도 있고 View마다 정의도 모두 다른 것을 확인할 수 있습니다.

---

그래서 intrinsicContentSize가 Hugging Priority와 Compression Resistance Priorty와 무슨 상관이냐

 

그것은 intrinsicContentSize가 위 그림처럼 이 두 가지 제약을 이용해서 나타나기 때문입니다.

 

그럼 각각이 무엇을 의미하는지 알아보도록 합시다.

---

 Hugging Priority

이름에서부터 끌어당길 거 같은 느낌이 물씬 풍깁니다.

 

쉽게 생각해보면 뷰 안에서 크기가 늘어나지 않게 끌어당기고 있는 거에요.

 

만약 그 힘이 약해진다면 크기가 늘어나버리겠죠?

 

직접 확인해보겠습니다.

 

이런 식으로 버튼 2개를 생성하고

 

이런 식으로 autoLayout을 설정할게요.

 

파란색 버튼과 노란색 버튼이 각각 safeArea에 leading과 trailing에 딱 붙게 만들고

그 둘을 딱 붙힌겁니다.

 

그러면

이런 식으로 에러를 뱉어냅니다.

 

두 버튼의 Hugging Priority가 같긴 때문인데요.

 

이 상태에서 오른쪽의 위치한 파란색 버튼의 Hugging Priority를 낮춰볼게요.

 

당기고 있던 힘이 약해지니깐?

이런 식으로 늘어나게 됩니다.

 

그럼 251로 올린다면 다시 당기겠죠?

줄어드는 것을 확인할 수 있습니다.

 

이렇게 Hugging Priority는 공간이 남을 때 남은 공간을 누가 채울지를 결정할 때 사용한다고 생각하면 될 것 같습니다.

---

Compression Resistance Priorty

이름에서부터 줄어들기 싫어하는게 느껴집니다.

 

이런 식으로 UIButton들의 제목을 길게 설정해보겠습니다.

 

 

 

그럼 이번에는 위와 같은 에러를 보여주는데요.

 

초기 상태는 위와 같습니다.

 

파란 색 버튼의 Priority를 751로 올려보겠습니다.

 

그러면 파란색 버튼은 으아아아아아앙! 줄어들기 싫어~ 하면서 안줄어들겠죠?

네, 파란색 버튼이 늘어난 것을 확인할 수 있습니다.

 

749로 낮춘다면?

 

파란색 버튼이 내가 줄어들게~ 하면서 줄어듭니다.

이렇게 말이죠.

 

이렇듯 Compression Resistance Priority는 공간이 부족할 때 누가 줄어들지를 결정한다고 생각하시면 될 것 같습니다.

---

오늘은 여기까지 하겠습니다.

 

혹시 잘못된 정보가 있으면 알려주시면 감사하겠습니다.