AutoLayout - Compression Resistance Priority
AutoLayout - Hugging Priority
Hugging Priority AutoLayout 에 대해 공부하던 중, Hugging Priority Attribute 는 왜 있는거고 어디에 쓰이는지 궁금해졌다. 다음과 같이 두 개의 텍스트 라벨이 있는 화면을 생각해보자 위에서 회색 배경을.
forstudy.tistory.com
Compression Resistance Priority
이전에 Hugging Priority 에 대해 알아보았다. 그렇다면 바로 밑에 존재하는 속성인 Compression Resistance Priority 는 뭘까??
영어를 직역하자면 압축 저항 우선 순위라고 하는데, 지금부터 Compression Resistance Priority 에 대해 알아보자
다음과 같이 텍스트 라벨이 두 개 있는 화면을 생각해보자.
이제 위 두 개의 라벨에 각각 제약 조건을 추가해보자.
노란색 라벨에는 좌측 상단 20 포인트의 제약 조건을, 파란색 라벨에는 좌측, 상단, 우측 에 20 포인트의 제약 조건을 줘보자.
그러면 위와 같이 오류가 뜨게 된다. 그 이유는 이전 Hugging Priority 포스트에서 설명했다. 파란색 라벨의 크기를 유지하기 위해, 파란색 라벨의 Hugging Priority 를 높여보자!
위와 같이 파란색 라벨이 제 크기를 유지하고, 노란색 라벨의 크기가 제약조건을 만족하기 위해 늘어난 것을 볼 수 있다.
여기서 노란색 라벨에 엄청나게 긴 텍스트를 추가해보자.
그렇다면 위와 같이 또 오류가 뜬다. 그 이유가 무엇일까?
노란색 라벨이 엄청나게 길어져 버려서, 제약조건을 맞추기 위해 어떤 라벨의 크기를 줄여야 할지 AutoLayout 이 결정하지 못해서다.
좌측, 우측 20 포인트만큼의 제약조건을 만족하기 위해서 두 개의 라벨 중 하나의 라벨의 크기가 줄어야 하는데, 어떤 라벨의 크기를 줄여야 하는지 결정하지 못하기 때문에 생기는 에러다.
이것을 해결해보자!
Compression Resistance Priority 설정하기
노란색 라벨을 클릭하고 우측 사이즈 인스펙터를 보면, 아래와 같이 Compression Resistance Priority 를 볼 수 있다.
위 숫자의 우선 순위가 높으면, 두 개의 오브젝트 중 하나의 오브젝트의 크기가 줄어야 할 때 우선 순위가 높은 오브젝트의 크기가 줄어들지 않는다.
즉 위 화면에서 파란색 라벨의 크기를 줄이고 싶지 않다면, 파란색 라벨의 우선순위를 1 높여서 751로 만들어보자.
파란색 라벨의 Compresstion Resistance 우선순위가 높기 때문에, 노란색 라벨의 크기를 줄여서 제약조건을 만족하는 것을 볼 수 있다.
만약 파란색 라벨의 우선순위를 낮춘다면 어떻게 될까?
제약조건을 맞추기 위해 파란색 라벨의 크기가 줄어든 것을 볼 수 있다.
결론
여러 오브젝트들 간의 제약조건을 설정할 때, Hugging Priority 나 Compression Resistance Priority 를 잘 설정하는 것이 매우 중요해보인다.
두 개의 오브젝트 간의 제약조건이 설정되어있는데, 하나의 오브젝트 크기를 줄여야 하는 경우 무슨 오브젝트의 크기를 줄일지를 Compression Resistance Priority 로 결정할 수 있다.
만약 테이블 뷰에서 아래와 같이 텍스트와 작성 일시를 나타내는 두 개의 라벨이 있다고 가정해보자.
여기서 Date 라벨은 무조건 우측에 있어야 하고, 날짜를 항상 전부 보여주어야 한다. 즉 왼쪽 타이틀의 크기가 제약조건에 맞게 설정되어야 하는데, 이런 경우 노란색 라벨의 Hugging Priority 와 Compresstion Resistance Priority 를 적절히 조정해주어서 원하는 레이아웃을 만들 수 있는 것이다.