[IOS] [AutoLayout] intrinsic content size와 content hugging / compression resistance

intrinsic content size란?

본질적인 고유 콘텐츠 크기이다. 기본적으로 대부분의 뷰들은 콘텐츠 크기만큼의 사이즈를 가지고 있다.

고유 콘텐츠를 가지고 있는 뷰들은 콘텐츠 사이즈에 맞춰서 조건이 자동으로 만들어진다.

예를 들어 폰트 크기, 텍스트의 양, 이미지 크기 등을 고려하여 조건을 설정한다.

그래서 텍스트를 가지는 레이블의 경우 텍스트 콘텐츠 크기를 이용하여 조건이 만들어졌기 때문에 조건을 모두 지정하지 않아도 오류가 뜨지 않는다.

 

Content hugging과 compression resistance

content hugging

콘텐츠 허깅이란 콘텐츠 사이즈 이상으로 늘어나지 않으려는 힘이다.

즉 사이즈에 맞게 줄어들려고 하는 힘이다.

compression resistance

컴프레션 저항은 콘텐츠 사이즈 이하로 줄어들려 하지 않으려는 힘이다.

즉 외부에서 힘을 가해 콘텐츠를 줄이려 할 때 버티려는 힘이라고 할 수 있다.

 

이 두 가지 조건을 사용하기 위해서는 우선순위의 개념을 알아야 한다.

사이즈 인스펙터 하단 부분에 보면 콘텐츠 허깅과 컴프레션 저항의 우선순위를 정하는 탭이 존재한다.

수직과 수평방향으로 나누어 우선순위를 설정할 수 있다.

1~1000까지의 값을 줄 수 있으며 일반적으로 250은 low 우선순위, 500은 medium, 750은 high, 1000은 required를 의미한다.

content hugging 예제

버튼 두 개에 양옆으로 10씩 제약조건을 주었을 때 충돌이 일어난다.

각 버튼들은 텍스트만큼의 크기를 가지는데 10씩 조건을 주게 되면 버튼을 늘려야 한다. 

하지만 둘의 콘텐츠 허깅 우선순위가 같기 때문에 무엇을 늘려야 할지 모르는 상황이다.

버튼 1의 사이즈는 유지하고 버튼2가 변경되기 원한다면, 버튼1의 콘텐츠 허깅 우선순위를 높여준다.

버튼 1과 2가 모두 250의 우선순위를 가지고 있었는데 버튼 1의 우선순위만 500으로 올려주니 버튼 2의 너비가 늘어나고 오류 또한 사라진 것을 볼 수 있다. 즉 컨텐츠를 늘어나지 않게하는 콘텐츠 허깅 우선순위가 버튼1이 더 크기 때문에 우선순위가 낮은 버튼2의 콘텐츠 크기가 늘어나게 된 것이다.

compression resistance 예제

이번에는 콘텐츠들의 크기가 넘쳐 누군가의 크기를 줄여여할 때이다.

두 우선순위 값이 750으로 같아 누구를 줄여야 할지 몰라 오류가 발생하였다.

1의 콘텐츠 크기를 유지하고 2의 크기를 줄이고자 하면 노란 레이블의 컴프레션 저항 우선순위값을 올려주면 된다.

우선순위 값을 올려주니 노란 레이블의 모든 콘텐츠 내용이 보이고 보라 레이블의 컨텐츠 크기가 줄어든 것을 볼 수 있었다.

즉 콘텐츠가 줄어들지 않게 하기 위한 우선순위가 보라색 레이블이 더 낮으므로 노란 레이블의 우선순위에 밀려 줄어든 게 된 것이다.