iOS ) AutoLayout2 - Content Hugging, Compression Resistance

 

1. Frame-based layout: 특정 뷰의 위치와 크기 지정
   • Auto resizing Mask
2. Auto Layout: View의 위치와 크기를 다른 뷰와의 관계(제약)으로 지정
3. Adaptive Layout
   • Auto Layout
   • Size Class: 뷰의 높이와 너비를 설명하는 크기
   • Trait Collection: iOS가 실행되는 환경의 다양성
   • Universal Storyboard

Autolayout

Autoresizing mask로 Frame-based layout의 단점을 완화할 수 있지만 여전히 언어별로 다른 글자 수나, 뉴스 앱과 같은 개별 뉴스 기사의 크기에 따른 레이아웃 조정과 같은 것에는 대응할 수 없습니다. 왜냐면.. 뷰의 위치나 크기가 고정되어 있기 때문이죠 ㅠㅠ

 

그래서 나온 게 Auto Layout!!! 입니다. 제약 조건을 사용해서 인터페이스를 정의한다는 특징을 가지고 있습니다. 이전의 특정 뷰의 프레임(위치, 크기)에 대해 생각하는 대신 뷰들간의 관계를 생각하는 방식입니다. 이런 뷰들간의 관계, 즉 제약 조건을 기반으로 각 뷰의 크기와 위치를 계산하게 됩니다. 따라서 외부, 내부의 변화에 따라 동적으로 대응할 수 있는 레이아웃을 설계할 수 있는거죠!

 

위의 그림처럼 첫번째 뷰의 height가 경우에 따라 길~어지게 돼도 두번째 뷰는 첫번째 뷰에서 8만큼 떨어져 있어라!하는 제약을 지키면 되기 때문에 첫번째 뷰의 bottom이 끝나는 곳에서 8만큼 떨어진 위치에 뷰를 그리면 되겠죠?

 

오토레이아웃의 제약도 인터페이스빌더에서 쉽게 설정할 수 있습니다.

스토리보드의 오른쪽 하단 부분에서 설정할 수 있습니다. 또 특정 뷰를 클릭 후 Control 키를 누른 채로 드래그해서 다른 뷰 위에서 클릭을 떼면 뷰 두개 사이의 제약을 지정할 수도 있습니다.

 

 

저는 위와 같이 두 개의 뷰를 추가하고 두 뷰 사이의 제약을 줘봤는데요!

 

 

아웃라인 뷰를 보면 PinkView와 BlueView의 Constraints가 두 뷰의 공통 상위 뷰인 Sample View Controller의 View에 추가된 것을 확인할 수 있습니다. 이처럼 관계 제약은 가장 인접한 공통 뷰에 추가됩니다. 그리고 제약들을 자세히 살펴보면 아래와 같은 방정식 형태로 되어있죠.

 

 

 

위의 방정식은 BlueView의 trailing 모서리의 위치에 1.0을 곱한 값에 8만큼 떨어진 거리에 RedView의 Leading 모서리가 위치한다. 정도로 해석할 수 있겠네요. 직접 제약들을 설정해보고 어떻게 방정식으로 표현되는지 보다보면 쉽게 익숙해집니다.

 

• Attribute
  • Leading: Text가 시작되는 지점
  • Trailing: Text가 끝나는 지점
  • 아랍권은 글짜를 오른쪽에서 왼쪽으로 읽는 문화를 가지고 있음
  • 왼쪽, 오른쪽을 지정해야 하는 사항이 아니면 Leading, Trailing을 사용하자!
•  
• 
• Relationship. 방정식에서 왼쪽과 오른쪽사이의 관계.
  • 세 가지의 관계를 가질 수 있다.
  • equal
  • greater than or equal
  • less than or equal

 

 

오토레이아웃을 설정하다보면 반갑지 않은 에러들이 뜨기도 하는데요.

• Unsatisfiable Layouts
• Ambiguous Layouts
• Logical Errors

 

대부분 제약 조건이 충돌했거나, 제약 조건이 누락됐거나, 우선 순위가 같은 조건이 있거나 해서 나는 에러들입니다. 우선순위에 대해선 아래에서 정리해볼게요!

 

오토레이아웃은 뷰에 적용된 제약 조건에 따라 크기와 위치를 계산하는 방식이에요. 대부분의 에러들은 내가 준 조건들로 이 뷰에 대한 위치와 크기를 계산할 수 있나? 를 살펴보면 어디가 틀렸는지 알 수 있더라구요.

 

 

애플에서 디버깅 팁 도 알려주는데요. 로그를 읽는 방법이나, 뷰의 계층 구조를 시각적으로 볼 수 있는 방법을 소개해주고 있어요.

 

 

 

그밖에도 오토레이아웃을 설정하면서 자주 보게될 다양한 용어들과 우선순위가 무엇인가!에 대해 정리해볼게요!

 

SafeArea: System UI와 겹치지 않는 기준 점(M자 탈모가 생긴 아이폰때문에 iOS11 이후 등장)

 

Priority : 1000 필수 제약 / 1000이하 선택 제약

 

 

Intrinsic Content Size : View자체의 본질의 크기, Label, Button, Switch, Slider 과 같은 경우 Width, Height를 가지기 때문에 뷰의 크기를 예측할 수 있습니다.

즉, Width에 대한 제약을 주지 않아도 자체 크기를 가지기 때문에 에러가 나지 않죠!

 

하지만, Intrinsic Size를 가지는 두 개를 같이 쓸 경우 문제가 생길 수 있는데요. 그 때 Content Hugging과 Compression Resistance 라는 개념으로 해결할 수 있습니다.

 

 

스토리보드에서 설정을 원하는 View를 클릭하고 [Inspector]영역에서 삼각자 모양으로 생긴 [Show Size Inspector]를 아래를 봐볼게요!

 

Content Hugging - 최대 크기에 대한 제한

Intrinsic Size를 가지는 두 개를 같이 쓸 때 사용하는 개념입니다.

 

 

두 개의 Label을 추가하고 다음과 같이 제약을 줘봤어요.

 

 

 

 

PurpleLabel.leading = YellowLabel.trailing + 10 이라는 두 개의 label에 사이에 Leading, Trailing 제약이 있죠. 이 제약때문에 Content Priority Ambiguity라는 에러가 뜨게 되는데요.

 

제약 때문에 Intrinsic Size를 유지하지 못하고 둘 중 어느 한쪽은 늘어나야 합니다. 하지만 우선순위가 같기 때문에 어느쪽을 늘려야할 지 모르겠다!! Hugging Priority를 설정해라!!하고 말해주는 에러인데요.

 

Hugging은 꽉 껴안다라는 뜻을 가지고 있어요. 즉 Content Hugging(CH) Priority가 높은 애를 먼저 꽉 껴안아주는거다! 라는 뜻이에요.

 

 

노란색 라벨의 horizontal CH를 252로, 보라색 라벨은 251로 그대로 두었어요.

노란색 라벨의 우선순위가 더 높죠? 그러니까 노란색을 먼저 꽉! 껴안아주는겁니다. 그래서 위와 같이 노란색이 Intrinsic Size를 가지고, 보라색의 길이가 확장됐어요.

 

정리하자면 Content Hugging Priority가 높은 애가 Intrinsic Size를 가지고 낮은 애가 확장됩니다.

 

만약 우선순위가 같을 때, 우선순위를 조정하고 싶지 않다면?! Width제약을 주거나 equal제약을 추가해주면 됩니다.

 

 

Compression Resistance - 최소 크기에 대한 제한

 

 

Hugging Priority 문제와 반대로 두 라벨의 길이가 너무 길 때의 상황입니다. 또 에러가 떴는데요. Compression Resistance Priority를 조정해라!라고 말해주고 있네요.

 

Resistance는 저항이라는 뜻을 가지고 있죠. 즉 값이 높으면 압축에 대한 저항이 높다는 뜻이에요.

 

 

 

노란 라벨의 Horizontal Compression Resistance Priority를 751로 높혔더니 보라색 라벨이 줄어들었어요.

노란색 라벨의 우선순위가 더 높기 때문에 압축에 대한 저항을 더 잘하고 보라색이 줄어들게 되는 겁니다.

정리하자면 Compression Resitance Priority가 높은 애가 Intrinsic Size를 가지고 낮은 애가 압축됩니다.

 

Autolayout 1

2021.10.02 - [IOS] - AutoLayout1 - Frame-based Layout Autoresizing Mask

AutoLayout1 - Frame-based Layout Autoresizing Mask

 

Autolayout 3

2021.10.05 - [IOS] - Autolayout3 - Adaptive Layout, Size Class

 

 

출처

• https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
• https://medium.com/@Alpaca_iOSStudy/uitraitcollection-공부-c85f2a9901ef
• https://developer.apple.com/documentation/uikit/uiview/1622559-autoresizingmask
• https://babbab2.tistory.com/133