StroyBoard를 공부하면서 UIStackView를 사용하다 실수 하나로 한참을 해맸었다...
그래서 UIStackView에 대해서 정리 해보자.
UIStackView 설명
Apple Developer Documentation
developer.apple.com
Label이나 Button과 같은 UI들을 하나의 Stack으로 묶어주는 기능을 합니다!
UI를 여러개 중복 선택 후 왼쪽 아래의 Embed in View 버튼을 클릭해 StackView를 생성할 수 있습니다.
StackView를 사용할 때... 첫 번째로 중요한게 어떻게 쌓이는지가 문제인데,
UI를 묶을 때 storyboard에서 vertical, horizontal 중 가장 근접한 위치로 알아서 묶어줍니다!
StackView의 Inspector를 확인해 보면
- Axis
- Alignment
- Distribution
- Spacing
4가지의 속성이 있는데 위에서 부터 차례대로 알아봅시다!
아래 그림을 보면서 이해하면 쉽게 이해할 수 있습니다. (Horizontal StackView)
Axis ⇒ StackView의 축을 지정합니다. Vertical, Horizontal이 존재합니다. 각각 수직과 수평을 만들어줍니다.
Alignment ⇒ 정렬방법을 설정합니다. Axis의 반대 방향으로 지정되어 정렬합니다.
Distribution ⇒ 분배 방법을 설정합니다. Axis와 같은 방향으로 지정되어 분배됩니다.
Spacing ⇒ 상수를 입력 여백을 설정합니다. UI들의 간격을 일정하게 정리합니다.
4가지의 속성 중 Alignment, Distribution의 플래그를 그림으로 간단하게 알아보겠습니다!
Alignment 플래그
fill (Horizontal, Vertical)
축을 기준으로 수직에 사용가능한 공간을 채우도록 뷰의 크기를 조정합니다.
Axis = Horizontal일 때 위-아래 공간을 채워버립니다.
top (Horizontal)
StackView의 상단 모서리를 따라 정렬됩니다.
Axis가 Horizontal일 경우 사용됩니다.
center (Horizontal, Vertical)
스택 뷰가 정렬된 뷰의 중심을 축을 따라 중심과 정렬하는 배치입니다.
bottom (Horizontal)
스택 뷰가 정렬된 뷰의 하단 모서리를 따라 정렬되는 Horizontal 스택의 정렬입니다
Leading (Vertical)
스택뷰가 정렬된 뷰의 앞쪽 모서리를 따라 정렬됩니다.
Trailing (Vertical)
스택뷰가 정렬된 뷰의 뒤쪽 모서리를 따라 정렬니다.
first baseline (Horizontal)
스택 뷰가 정렬된 뷰를 첫 번째 기준선에 따라 정렬하는 배치입니다.
last baseline (Horizontal)
스택 뷰가 정렬된 뷰를 마지막 기준선에 따라 정렬하는 배치입니다.
Distribution 플래그
fill
스택 뷰의 축을 따라 사용 가능한 공간을 채우도록 정렬된 뷰의 크기를 조정하는 배치입니다.
정렬된 뷰가 스택 뷰 내에 맞지 않으면 Hugging Priority에 따라 뷰를 조정합니다.
fillEqually
스택 뷰의 축을 따라 사용 가능한 공간을 채우도록 정렬된 뷰의 크기를 조정하는 배치입니다.
뷰의 크기가 스택 뷰의 축을 따라 모두 동일한 크기로 조정됩니다.
fillProportionally
스택 뷰의 축을 따라 사용 가능한 공간을 채우도록 정렬된 뷰의 크기를 조정하는 배치입니다.
남은 공간이 생긴다면 intrinsic content size 의 비율에 따라 비례적으로 크기가 조정됩니다.
eqaulSpacing
정렬된 뷰가 스택 뷰를 채우지 않으면 뷰 사이의 간격을 고르게 패딩합니다.
정렬된 뷰가 스택 뷰 내에 맞지 않으면 Hugging Priority에 따라 뷰를 축소합니다.
모호함이 있는 경우 스택 뷰는 정렬된 하위 뷰 배열의 인덱스에 따라 뷰를 축소합니다.
eqaulCentering
스택 뷰의 축을 따라 동일한 중심 대 중심 간격을 가지면서도 뷰 간 간격의 거리를 유지하도록 정렬된 뷰를 배치하려고 시도하는 배치입니다.
정렬된 뷰가 스택 뷰 내에 맞지 않으면 간격 특성에 의해 정의된 최소 간격에 도달할 때까지 간격을 축소합니다.
그래도 보기가 맞지 않으면 스택 뷰는 Hugging Priority에 따라 정렬된 뷰를 축소합니다.
모호함이 있는 경우 스택 뷰는 정렬된 하위 뷰 배열의 인덱스에 따라 뷰를 축소합니다.
UI를 배운대로 그냥 사용하는 것 보다, autolayout의 동작원리와 사용하는 UI의 배치에 대해 생각하면서 만들면 문제를 해결할 수 있기에 앞으로 자주 사용하는 것, 중요한 것 들을 정리해 볼 생각입니다.
stackView.layoutMargins = UIEdgeInsets(top: 10, left: 10, bottom: .zero, right: 10)
stackView.isLayoutMarginsRelativeArrangement = true