[iOS] StackView의 Distribution과 Alignment

StackView 알아보기 전에 먼저 알아야할 개념

Content Hugging Prioritoy  & Content Compression Resistence Priority

 

Label 두개를 일렬로 놓은 상황에서 오토레이아웃을 잡으면 문제가 생김

 

Content Hugging Prioritoy

공간이 남을 경우 적용

우선순위가 높은 뷰는 본인 공간 유지

우선순위가 낮은 뷰가 남은 공간을 차지

 

Content Compression Resistance Priority

공간이 부족할 경우 경우 적용

우선순위가 높은 뷰는 본인 공간 유지

우선순위가 낮은 뷰가 남은 공간을 차지

오른쪽 Label의 Content Hugging Priority를 높이면 오른쪽은 본인 크기만큼 유지

왼쪽 Label은 남은 공간만큼 늘어남

 

공간을 좁게 만들면 아래와 같은 오류가 뜸

 

왼쪽 Label의 Content Compression Resistance Priority를 높임

크기만큼 늘어나면서 오른쪽 Label 짤리게 됨

 

만약에 오른쪽 Label이 짤리면 안되는 경우에 오른쪽 Label의 Priority를 높임

 

Distribution

 

Fill

배열된 뷰가 스택 뷰에 맞지 않으면 위에 말한 우선순위에 따라 뷰를 줄임

자리가 부족할 때 아까 위에 언급했던 우선순위를 지정해주어야 함

여기선 첫번째 Label의 Compression Resistence Priority를 낮추어서 나머지가 보이게 조정함

 

Fill Equally

우선순위 이런거 필요 없고 그냥 동일하게 채우고 싶다고 하면

모든 서브뷰를 동일한 크기로 넣어주는 Fill Equally 쓰면 됨

 

Fill Proportionally

Intrinsic Content Size를 해치지 않게 크기를 설정해줌

 

Equal Spacing

 

자리를 다 차지하지 못할 경우 동일한 Spacing을 갖도록 조정해줌

축소해야할 경우에는 우선순위에 따라 축소됨

 

Equal Centering

 

중심간 거리를 동일하게 유지함

 

Alignment

Fill일 경우 전체를 다 채움

 

Leading은 앞에서부터 채움

Center, Trailing도 본인 크기 유지하면서 해당 방향부터 채움

 

 

참고자료

https://developer.apple.com/documentation/uikit/uistackview/alignment

https://developer.apple.com/documentation/uikit/uistackview/distribution

https://jeonyeohun.tistory.com/195