상세 컨텐츠

본문 제목

[오토레이아웃]Content Compression, Content hugging(CHCR)

autoLayout

by 옹홍 2021. 7. 5. 02:19

본문

※오토레이아웃 게시물들의 내용은 apple document와 야곰님의 오토레이아웃 강의를 듣고 공부한 내용을 기록합니다.

 

Content Compression, Content hugging

1. Content Compression Resistance: 컨텐츠를 외부에서 누르려고 할때 content가 버티는 힘. Content가 최대한 잘리지 않으려고 버티는 힘이다.

 

2. Content Hugging: content가 intrinsic size에 꼭 맞게 줄어드려고 하는 힘이다. 즉, 늘어나지 않으려하는 힘이다. 결국 컨텐츠보다 더 늘어나지 않으려는 힘이라고 생각할 수 있다.


이 2가지는 Priority를 기준을 가지고 움직이다. 이것을 이해하려면 무조건 예시가 필요하다!!

 

이런식으로 label을 3개를 두고 다 모두 20씩 간격을 줬다고 해보자.

이때 우리는 Equal width로 위의 오류를 없앨 수 있지만, 하지만 우리는 3개의 label이 모두 같은 길이가 아니어야 한다고 생각한다.

 

이런식으로 각각의 size가 다를 수 있는 것이다! 이럴때 그러면 어떻게 해결해야할까?  즉 어떤 친구가 줄어들어야할지 모르는 싸움의 상황이 나왔다. 그렇다면 우리는 어떻게 해야할까? 우리는 늘어나는 것을 방해하는 힘인 Content hugging을 생각할 수 있다. 일단 맨 왼쪽 label을 Hugging priority를 가장 높게 줬다

이렇게 생각하면 지금 중간 label이 가장 늘어난것으로 확인된다. 왜나면 왼쪽의 hugging priority가 가장 높기때문에 이 label은 content에 맞게 size가 조정된다.

만약에 여기서 중간 label의 hugging priority를 높여준다면, 왼쪽 라벨과 중간 라벨은 딱 content에 맞게 설정되고 마지막 label나 intrinsic size가 커지게 될 것이다.


하지만 여기서 맨 왼쪽 라벨의 길이가 길어진다고 한다면, 이런상황이 벌어질 것이다. 이런 상황을 막기 위해서 다른 라벨들이 어떤 순서대로 줄어들 것인지 알려주는 것이 Resistance priority이다.

이제 3개의 라벨들을 왼쪽에서 오른쪽 방향으로 아래와 같이 Compression Resistance Priority를 주었다고 한다면?

아래와 같이 먼저 왼쪽의 길이가 길어진다고 해도, 오른쪽의 2개 라벨은 왼쪽 라벨보다 CR priority가 높기때문에 줄어들지 않는다. 왼쪽 라벨이 ...으로 변경될 뿐이다.

반면에 중간 라벨의 길이가 길어진다면?

왼쪽의 label은 우선순위가 낮기 때문에, 줄어들 것이고, 오른쪽의 label은 가운데 label 보다 우선순위가 높기 때문에, 최대한 줄어든 것에서 안줄어든다.

마지막 라벨의 Resistance priority가 높기 떄문에 가장 길어진다면, 나머지 둘은 아예 사라져버릴수도 있다.

결국 Resistance Priority가 높을수록 자기가 가지고있는 content를 지키는 힘이 가장 커진다.


이 2가지를 활용해서 view에서 이 친구의 content는 무조건 지켜져야하는지, 아니면 이친구의 content가 길어지면 보기 안좋은지를 파악해서 사용하면 될것이다.!

관련글 더보기

댓글 영역