[AutoLayout] StackView에서 내가 원하는 컴포넌트를 크게 하고 싶을 때 - iOS
저는 주로 모두 비율을 똑같이 배치할 때 스택뷰를 사용합니다.
그런데 아래 사진과 같이 같은 컴포넌트들을 배치하여 스택뷰에 넣었을 때 가끔 문제가 발생합니다.
위의 사진에서 보면 저는 Title이 아닌 Overview 레이블을 크게 만들고 싶었습니다.
그런데 스택뷰로 묶고 난 직후에 보면 위와 같이 묶입니다!
(보기좋게 레이블 별로 background색상을 추가해보았습니다)
이럴때 조절해주어야 하는 속성이
인터페이스 빌더에 있는
Content Hugging Priority,
Content Compression Resistance Priority
입니다!
이름만 보면 뭔말이야 싶죠..?
두 속성에 대해 간단한 설명을 적어본 후
아래쪽에 해결방법을 적어두었습니다.
(결과만 보고싶으신 분들은 아래쪽으로 스크롤해보세요!)
두 priority의 관계는
이 그림을 보면 조금은 감이 오실겁니다 :)
두 속성을 설명하려면 우선 알아야할 개념이 하나 있습니다.
IntrinsicContentSize
대부분의 뷰(UILabel, UIButton, UIImagView 등)는 컨텐츠 고유의 사이즈를 가집니다.
이 고유 사이즈를 intrinsic size 라고 합니다.
예를 들어 우리가 레이블을 만들 때 직접 height, width를 지정해주지 않아도 되는 이유가 바로 고유 사이즈가 있기 때문입니다.
뷰 안에 표시되는 내용이 변경될 때 intrinsic size도 변경됩니다!
하지만!
컨테이너 역할을 하는 UIView와 같은 일부 뷰들은 고유 사이즈가 없기 때문에
centerX, centerY를 해주었을 떄 제약조건 위배 오류가 나므로,
height, width와 같은 속성을 추가로 지정해 주어야 합니다.
Content Hugging Priority
고유 사이즈의 최대 크기에 제한을 두는 것입니다.
즉,
"주어진 크기보다 작아질 수 있어~"
라는 의미입니다.
예를들어 label 두 개를 스텍뷰로 묶어 다음과 같이 구성해보겠습니다.
묶은 직후의 우선순위 입니다.
레이블1과 레이블2는 Horizontal하게 묶여 있으므로
'레이블1'의 Horizontal Hugging을 +1 하면
'레이블1'이 컨텐츠 사이즈에 딱 맞게 hugging 되어 있는 것을 볼 수 있습니다. (최소 intrinsic size 까지)
Compression Resistance Priority
고유 사이즈의 최소 크기에 제한을 두는 것입니다.
즉,
"주어진 크기보다 커질 수 있어~"
라는 의미입니다.
똑같이 예를 들어 두 개의 레이블을 준비했습니다.
현재는 제약조건을 주어 두번째 레이블의 글씨가 ...의 형태로 잘려있는것을 볼 수 있습니다.
이때 두번째레이블의 Horizontal Compression Resistance를 +1 해주면
위와 같이 두번째 레이블이 잘리지 않고 출력되는 것을 볼 수 있습니다.
즉, 두번째레이블의 우선순위를 +1 함으로써
두번째레이블의 최소크기에 제한을 두는 것입니다.
(최소한 컨텐츠의 크기만큼 차지하도록!)
반대로
Horizontal Compression Resistance를 -1 해주면
위와 같이 첫번째 레이블이 잘리지 않게 출력되고,
두번째 레이블을 다시 잘리는 모습을 볼 수 있습니다!
문제 해결
그래서 포스트 가장 초반에 언급했던 문제를 다시 상기시켜보면,
저는
Title을 Label의 intrinsic size(DateLabel 처럼)로 만들고,
Overview를 stackView의 나머지를 차지하도록(사진 속 TitleLabel의 크기처럼)
만들고자 했습니다.
stackView가 Vertical하게 구성되어있으므로,
OverView의 Vertical Hugging Priority를 하나 낮추면!
짜잔~ 🤸
제가 원하던대로
Title, Date는 Label의 기본 높이로,
stackView에서 Title, Date Label의 높이와 spacing을 제외한 나머지 높이는 Overview의 높이가 되었습니다!
위의 글이 이해가 잘 안되신다면
우선 auto-layout에 대한 개념부터 이해하고 오시면 좋을 것 같습니다!
조금 오래되었지만 애플 개발자 사이트에 있는 Auto Layout Guide 입니다. 참고해보세요 :)
Auto Layout Guide: Understanding Auto Layout
developer.apple.com
그럼 오늘의 글은 여기까지!
생각보다 정리하는데 오래걸렸네요..😇
다음엔 비슷한 상황이 발생해도 헷갈리지 않으려 적다보니,
약간 제 상황 위주로 정리가 된 것 같기도하네요!
그래도 이 글을 보시는 분들이 조금이라도 도움이 되셨으면 좋겠습니다!
그럼 20000~
틀린부분이 있거나, 더 좋은 방법이 있다면 댓글로 남겨주세요!
🌈댓글은 언제나 환영입니다🙏🏻
참고자료
https://academy.realm.io/kr/posts/ios-autolayout/
오토 레이아웃으로 iOS 앱 쉽게 개발하기
소개 iPhone의 다양한 해상도를 지원하기 위해 오토 레이아웃이 필수가 되고 있습니다. 코드 양을 줄일 수 있는 오토 레이아웃으로 쉽게 개발하기라는 주제로 강연하겠습니다. IntrinsicContentSize 컨
academy.realm.io
Auto Layout by Tutorials, Chapter 8: Content-Hugging & Compression-Resistance Priorities
Discover what happens when the Auto Layout engine must choose between conflicting constraints. Learn how to use priorities to communicate how the system should resolve ambiguities to create the layout you want.
www.raywenderlich.com
https://medium.com/@dineshk1389/content-hugging-and-compression-resistance-in-ios-35a0e8f19118
Content Hugging Priorities And Content Compression Resistance Priorities
At times, some of the apples API are a lot confusing and really hard to understand. Same is the case with content hugging priority and…
medium.com