![[AutoLayout] Hugging Priority vs Compression Resistance Priority](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWYYkO%2FbtrATcrOaC7%2FLTVr7p6rlPg2vvJFdsv580%2Fimg.png)
Intro
오늘은 미루고 미뤘던, 알지만 알지못했던 (이게 바로 정확히 아는게 아니닷!)
Hugging Priority와 Compression Resistance Priority의 차이에 대해 정리해보겠습니다.
정리하면서 공부하는거죠,,하핳하ㅏ
시작하게씁니다~~!
Intrinsic Content Size
먼저 해당 차이를 정리하기 전에 Intrinsic Content Size에 대해 아시나요?!
그대로 해석하면 '고유한 콘텐츠의 크기'
즉, 콘텐츠는 고유한 크기를 갖고 있다는 것입니다.
말 그대로 Label이나 Button 같은 것들은 자체로 Width, Height를 본질적으로 가지는데요.
라벨에 들어가는 텍스트의 길이나, 폰트 두께 등에 따라 알아서 Width, Height를 계산하여 보여줍니다.
그래서 constraints만 지정해주면 따로 에러는 나지 않는 것이죠!
Priority
그렇다면 우선순위 왜 필요 할까요?
저도 사실 간단한 프로젝트를 할 때는 굳이 사용 되지 않아 모르고 넘어갔었는데
테이블 뷰의 셀에 왼쪽과 오른쪽 라벨을 동일한 위치에 설정해야 할 때가 있었는데,
이 때 에러가 나면서 충돌을 해결해야 할 때 개념이 필요 했었네요,,😅
예시는 그냥 View에 구현해보도록 하겠습니다!
라벨1과 라벨2는 각각의 Intrinsic Content Size를 가지면서 동일한 사이즈의 Constaints가 연결되어 있습니당
이 때, 에러는 아니지만 경고문구가 뜨는데요!
라벨1은 Trailing이 라벨2는 Leading이 없다는 경고가 있습니다.
그러면 경고를 해결하기 위해, 라벨1의 Trailing을 라벨2의 Leading에 연결하면??
에러가 발생합니다 🚨
해결하기 위해선, Hugging Priority의 크기를 조절하면서 해결할 수 있으므로!! 알아보아용
Hugging Priority
뷰가 고유 크기보다 커지는 것을 방지하는 우선 순위 설정을 말하는데요
이 우선순위에 더 큰 값을 설정하면 큰 값을 설정한 쪽이 더 커지는 것을 막을 수 있어요
라벨1 < 라벨2
라벨2의 Hugging Priority를 251로 더 크게 설정하였더니,
라벨1의 사이즈가 자동으로 더 크게 늘어나는 것을 확인할 수 있었습니다!!!
(이 때 두 개다 width는 설정되지 않았습니당)
라벨1 > 라벨2
그렇다면 반대로 라벨1의 Hugging Priority 값을 크게 설정하면 ???
예상되시죠?! 라벨2의 Width가 늘어납니다!!!
왜냐면 Hugging Priority는 우선순위 값이 클수록 더 커지는 것을 막기 때문에,
우선순위가 낮은 쪽의 width가 늘어나는 것이죠!!
Compression Resistance Priority
Hugging은 고유 크기보다 커지는 것을 막는 것이라면
반대로 Compression Resistance은 고유 크기보다 작아지는 것을 막는 것입니다!!
기존의 Hugging Priority 그대로 했을 때 라벨 1의 값을 ㅇㄹㄴㄹㄴ~~ 더 늘려봅시다
그렇게 되면!!! 에러가 또 발생하는데요🚨
라벨 1이 너무 길어서 라벨 2의 영역을 넘어갈 때, 둘의 Compression Resistance Priority가 같아
어떤 것이 줄어들어야 할지 모른다는 것입니다.
즉, 둘 중 어떤 것을 줄일지 결정해야게쬬?!
라벨1 > 라벨2
라벨1의 Compression Resistance Priority 값을 높이면,
에러가 해결되면서 라벨2가 사라졌네요 ?!?!?
왜그러냐하믄... 라벨1의 우선순위가 더 높아 계속 늘어나며 고유한 너비(Intrinsic Width)를 유지하지만,
라벨2는 우선순위가 더 낮으므로 Intrinsic Width를 유지하지 못하고 사라져버렸습니다,,,ㅎ
라벨1 < 라벨2
그렇다면 반대로!!
라벨2의 Compression Resistance Priority 값을 높이면, Intrinsic Width를 유지할 수 있으므로
라벨1의 글자가 압축되어 다 보이지 않는 것을 알 수 있습니다.
정리
작성하면서도 헷갈리네욥,,, 다시 정리하자면!!!!
| 우선순위 높음 | 우선순위 낮음 | |
| Hugging Priority (둘 중 하나는 커져야 할 때) |
Intrinsic Content Size 유지 | Intrinsic Content Size 유지X 늘어남 |
| Compression Resistance Priority (둘 중 하나는 줄어들어야 할 때) |
Intrinsic Content Size 유지 | Intrinsic Content Size 유지X 줄어듬 |
2개의 content의 고정된 width, height가 없을 때,
우선순위를 설정하여 높인 쪽의 Intrinsic Content Size는 유지되고
낮은쪽은 늘어나거나 줄어들면서 둘 중 하나는 값이 동적으로 설정되는 것을 알 수 있습니다!
드뎌 끝이네요,,, 휴우
hoxy,,, 틀린 부분있으면 지적해주셔두 됩니당 감사합니다😊
참고 자료
iOS) Auto Layout 정복하기 (3/5) - IntrinsicContentSize, Hugging Priority/ Compression Resistance Priority
안녕하세요 :) 소들입니다!!! 저번 포스팅에서 Auto Layout이 무엇인지, Frame-Based Layout과 어떤 차이점이 있는지, 또 Top/Bottom Layout Guide와 Safe Area에 대해서 공부 했어요 :D 이번 포스팅에선 Intrinsi..
babbab2.tistory.com
iOS — content hugging and content compression resistance priorities
Priorities are very much important when dealing with autolayout. Every constraint has a priority. It is just a number ranges from 0–1000 .
abhimuralidharan.medium.com
'iOS' 카테고리의 다른 글
| iOS 커스텀 아키텍처 고민하며 구상해보기 (Unidirectional Data Flow / Based ReactorKit) (0) | 2024.07.21 |
|---|---|
| [iOS] Table Views - Filling a Table with Data (0) | 2022.05.01 |
| [UIKit] UserDefault로 데이터 저장하기 (0) | 2021.12.27 |
| [Timer] 타이머 숫자(초단위)를 { 분 : 초 }로 변경하기 (String format) (0) | 2021.09.11 |
| [SwiftUI] NavigationLink를 이용해서 페이지 이동하기 (0) | 2021.08.28 |