UIStackView란?
열 또는 행에 여러 View를 묶어서 배치할 수 있는 인터페이스로, 오토레이아웃 제약조건을 설정하지 않아도 자동으로 사이즈에 맞게 View의 사이즈나 위치를 정렬 해준다.
스택뷰는 다음 속성들을 통해 view를 정렬해준다.
- Axis(축)
- 스택 뷰의 축의 방향에 따라 뷰를 배열한다.
- Vertical: 탑을 쌓듯이 위에서 아래로
- Horizontal: 책꽂이 처럼 왼쪽에서 오른쪽으로
- Spacing(여백)
- 뷰들이 가져야할 최소한의 여백을 설정
- 만약 여백과 뷰의 사이즈를 합한 것이 스택뷰 사이즈를 넘어가게 된다면 뷰들의 사이즈를 감소
- Distribution(분배)
- 스택 뷰의 축을 따라 내부 뷰들의 사이즈를 어떻게 분배하여 갖게 할 것인가에 대한 옵션
- 뷰들의 사이즈의 합이 스택 뷰의 사이즈를 초과할 경우에는 Compression resistance priority에 따라 뷰의 크기를 감소
- 뷰들의 크기가 스택 뷰의 사이즈보다 부족할 때에는 Content hugging priority에 따라 뷰의 크기를 증가
- Content hugging priority
- 뷰에 우선순위를 설정하여 스택 뷰 전체 사이즈가 변화함에 따라 낮은 우선순위를 가진 뷰는 크기가 커지고, 높은 우선순위를 가진 뷰는 본래 크기 유지
- Compression resistance priority
- 낮은 우선순위를 가진 뷰는 크기가 작아지고, 우선순위가 높을수록 본래 크기 유지
- Content hugging priority, Compression resistance priority는 0~1000까지의 숫자로 설정 가능하며 1000이 가장 높은 우선순위
- Options
- Fill
-
스택 뷰의 축을 따라 가능한 모든 공간을 채우기 위해 내부 뷰들의 사이즈를 조정
-
- Fill Equally
-
뷰들이 최대한 같은 크기로 분배하여 공간을 채우도록 하는 옵션
-
- Fill Proportionally
-
intrinsic content size 비율에 따라 뷰들의 사이즈를 조정
-
- Equal Spacing
-
스택뷰의 공간이 남을 경우 뷰들의 사이의 공간을 동일하게 재배치하고, 공간이 부족하면 리사이징을 통해 뷰를 줄여서라도 공간이 동일하도록 함
-
- Equal Centering
-
각 뷰들의 center와 center간 거리를 동일하게 하도록 재배치
-
이 때 spacing 값 만큼의 거리는 반드시 유지되어야 하며, 만약 뷰들이 스택뷰의 사이즈를 초과할 경우 spacing의 거리를 만족시킬 때까지 간격을 좁히고, 그래도 초과하면 뷰의 사이즈를 조정
-
- Fill
- Alignment(정렬)
- 정렬 방식을 어떻게 할 것인가?
- Options
- Fill
- 축의 수직인 방향으로 공간을 채우기 위해 뷰들의 사이즈를 조정
- ex) 축이 가로로 되어있다면 뷰의 세로 길이(height)를 늘림
- 축의 수직인 방향으로 공간을 채우기 위해 뷰들의 사이즈를 조정
- Leading
-
스택뷰와 내부 뷰의 leading edge를 맞추어 정렬
- 세로축의 경우 왼쪽 혹은 오른쪽이 되고
- 가로축의 경우에는 top과 동일한 결과가 나옴
-
- Top
-
스택 뷰와 내부 뷰들의 top edge를 맞추어 정렬
-
- FirstBaseline
- 뷰들의 first baseline에 맞추어 정렬
- 가로축을 가진 스택뷰에서만 사용 가능
- Center
- 축을 따라 뷰들의 center를 스택뷰의 center에 맞추어 조정
- Trailing
- 스택 뷰와 내부 뷰들의 trailing edge를 맞추어 정렬
- Bottom
- 스택 뷰와 내부 뷰들의 bottom edge를 맞추어 정렬
- LastBaseline
- 뷰들의 first baseline에 맞추어 정렬
- 가로축을 가진 스택뷰에서만 사용 가능
- Fill
Reference
https://hyunndyblog.tistory.com/148