이것도 매일 강의만 보다가 안 되겠어서 정리하는 StackView... 입니당..
맨날 볼때마다 헷갈리고 사실 지금도 헷갈리기 때문에 바싹하게 정리해놓는 글..입니다..
구성요소부터 시작해볼게요!
StackView를 알기전에 StackView의 구성요소부터 알아봅시당
Axis, Alignment, Distribution 이렇게 3개로 구성되어 있어요.
Axis 는 stackview의 방향을 결정해요. (Vertical, Horiztonal)
Alignment 는 stackview의 서브뷰들을 어떤식으로 정렬할지 결정해요. (Vertical, Horiztonal)
Distribution 는 stackview 안에 들어가는 뷰들의 사이즈를 어떻게 분배할지 결정해요. (Vertical, Horiztonal)
먼저 Horizontal 인 경우부터 확인해봅시다.
Button 2개, Label 1개로 이루어진 Horizontal StackView에요.
(StackView 자체에 constrains을 주지는 않았어요)
Aixs가 Horizontal인 StackView의 Alignment, Distribution은
Alignment는 Fill, Top, Center, Bottom, First Baseline, Last BaseLine
Distribution은 Fill, Fill Equally, Fill Proporitionally, Equal Spacing, Equal Centering
이렇게 설정을 할 수 있네요!
지금 상태는 Fill, 원래 디폴트로 Fill이기 때문에 Fill로 설정되어 있어요!
그럼 한번 차례대로 다른 설정도 확인해봅시당
Horizontal StackView Alignment (정렬하기!)
1. Fill : 스택뷰에 서브뷰들을 빈공간 없이 채웁니다. (높이도)
2. Top : 서브뷰들의 원래 크기를 유지하면서 StackView의 위에 붙여서 정렬해요.
3. Center : 서브뷰들의 원래 크기를 유지하면서 StackView의 중앙에 정렬해요.
4. Bottom : 서브뷰들의 원래 크기를 유지하면서 StackView의 하단에 붙여서 정렬해요.
5. First Baseline : 첫 번째 기준선을 기준으로 정렬해요.
6. Last Baseline : 마지막 기준선을 기준으로 정렬해요.
Alignment를 디폴트인 Fill로 설정하고 Distribution을 확인해볼게요.
1. Fill : 디폴트 설정값으로, 현재 기준 방향으로 StackView 안에 서브뷰들을 빈공간 없이 채워요.
2. Fill Equally : StackView의 너비에 맞춰서 서브뷰들이 너비를 동일하게 맞춰요.
* 지금 이 상황에서는 Button의 intrinsic content size에 맞춰서 Label 너비가 조절된것 같아요.
3. Fill Proportionally : 스택뷰의 intrinsic content size 맞춰서 StackView의 너비를 조절해요.
* Button, Label의 고유 크기대로 StackView가 조절되었어요.
4. Fill Spacing : 서브뷰 사이의 간격을 조절하여 StackView를 채워요.
* 서브뷰가 StackView보다 크다면 compression resistance priority을 기준으로 감소해요.
* 우선순위가 모두 동일하다면 인덱스 순서대로 변경해요.
5. Fill Centering : StackView안의 서브뷰들의 center를 구해서 각 서브뷰간의 center 거리가 동일하도록 조절해요.
헷갈리니까 constrains를 주고도 확인해볼게요.
그럼 이제 Veritcal인 경우를 확인해볼게요
Alignment는 Fill, Leading, Center, Trailing
Distribution은 Fill, Fill Equally, Fill Proportionally, Equal Spacing, Equal Centering 을 설정할 수 있네요!
그럼 하나씩 확인해봅시당
먼저 Alignment부터 확인해볼게요!
Alignment의 디폴트 값 Fill 로 설정 후 Distribution 확인한거에요!
Fill : StackView의 너비에 맞춰져서 늘어나서 정렬되며, StackView의 기본 디폴트 값이에요.
Leading : 서브뷰의 원래 길이를 유지하면서 StackView의 글자 시작 방향부터 정렬되어서 채워져요.
Center : 서브뷰들의 center가 StackView의 center에 배치돼요.
Trailing : 서브뷰들의 원래 길이를 유지하면서 StackView의 글자가 끝나는 방향부터 정렬되어서 채워져요.
Vertical의 Distribution은 horizontal이랑 똑같지만 그래도 한번 더 확인해볼게요!!
마무리
저는 맨 처음에 Fill Proportionally 가 많이 헷갈렸어요!
고유값을 모르는 정말 무지한 상태로 강의를 들었거든요.. ㅎ
요거는 직접 해봐야 바로바로 터득하는거 같으니, 다들 한번씩 해보시면 좋을것 같아요!
'Swift > Swift Auto LayOut' 카테고리의 다른 글
| [Swift / Auto LayOut] hugging priority, compression resistance priority를 알아보자, 차이점 정리 (2) | 2023.02.16 |
|---|
