부족한 것이 있거나 이해가 가지 않는 것이 있다면 댓글 부탁드립니다!!

일단 이것만 기억 합시다. ( StackView 속성 )

1. Axis : 방향
2. Alignment : Axis와 반대방향의 설정 ( 뷰의 위치 )
3. distribution : Axis방향을 어떠한 방법으로 채울 것이냐 ( 뷰의 크기 )
4. spacing : 뷰 사이의 간격

StackView

스택뷰는 뷰안의 하위 뷰의 오토레이아웃을 편리하게 설정 할 수 있도록 UIKit에서 제공하는 도구이다!!

StackView의 필요성

• 이런 복잡한 레이아웃을 설정 할 떄 StackView를 사용하면 보다 편리하게 사용 할 수 있다.
  
  StackView가 없다면 전부 각 뷰마다 constraints를 설정하고 충돌 대비해서 priority를 각각 다르게 설정을 해줘야되지만 StackView가 있다면 보다 편리하게 사용 할 수 있다.

간단하게 말하자면

10개짜리 스탬프버튼을 10개 constraints를 전부 설정해줘야 한다는 말이다.

StackView만 constraints설정하고 ( 그저 fill equally )

• 실제 프로젝트 StroryBoard설정
  

중간중간 View가 들어가 있는 것을 볼 수 있는데 이것은 StackView설정 할 때 첫번쨰와 마지막의 객체가 스택뷰의 방향의 양끝에 딱 스택뷰 안에 View를 넣고 하위 StackView에 Constraint를 주어 간격을 설정 한 것이다.

스택뷰 종류

1. Horizontal : 수평
2. VertiCal : 수직

이렇게 2개가 있다. 여기에서 이름은 Axis(방향)를 의미한다.

StackView

기본적인 사용

• Label은 폰트의 크기로 Label 객체의 크기를 알지만 View는 크기를 알지 못한다. 그래서 UIView 정렬(수직,수평)만으로 오토레이아웃이 설정이 되지 않기 때문에,
  수평정렬을 하고 왼쪽에 Constraint를 걸어준모습 그러면 자동적으로 오른쪽에도 그만큼의 Constraint가 설정된다. 왜? 수평정렬(Center 기준똑같이)이니까.

다시 한번 이것만 기억 합시다. ( StackView 속성 )

1. Axis : 방향
2. Alignment : Axis와 반대방향의 설정 ( 뷰의 위치 )
3. distribution : Axis방향을 어떠한 방법으로 채울 것이냐 ( 뷰의 크기 )
4. spacing : 뷰 사이의 간격

StackView ( Horizontal )

오류가 나는 이유 -> 뷰의 크기를 정확히 모른다.

왼쪽상단에보면 빨간색 화살표가 보인다.
위에서 Label의 크기 = font의 크기 ( 주황색 라벨 만큼의 크기 )
이렇지만 StackView에 들어가면 그 크기는 StackView에 맞게 설정된다.
아니 다 채워졌는데 왜 오류가 나지??

distribution : fill은 공간이 부족 할 때 priority기준으로 늘릴 뷰를 선택하고 남는공간을 해당뷰로 채운다.

Priority : 우선순위

1. Hugging Priority : 커지는 것의 우선순위
   Priority가 높을수록 뷰의 크기를 유지한다.-> 내 밑으로(우선순위가 떨어지는) 커져!!
2. Compression Resistance : 작아지는 것의 우선순위
   Priority가 높을수록 뷰의 크기를 유지한다.-> 내 밑으로 작아져!!

Distribution 종류

1. fill : 뷰의크기를 가득 채워준다.
2. fill equally : 모두 동등한 크기로 지정한다.
3. fill Proportionally : 하위 뷰의 고유한 크기의 비율만큼 크기를 설정하고 가득 채운다.
4. Equal Spacing : 하위 뷰는 그대로두고 뷰 사이에 동등한 공간으로 나머지 공간을 채운다.
5. Equal Centering : StackView의 중심에 하위 뷰를 두고 하위 뷰 사이의 간격을 layoutGuide크기만큼 공간을 넣는다.
   -> spacing을 모두 똑같이주고 가운데 정렬이다. ( space 속성이 필요없음 )

distribution의 동작원리.( Horizon 기준 )

1. 첫번째번뷰의 LeadingAnchor를 StackView의 LeadingAnchor에 고정한다.
2. 마지막뷰의 trailingAnchor를 StackView의 trailingAnchor에 고정한다.
3. Spacing을 적용 ( 떨어뜨린다. )
4. distribution 속성을 적용시킨다. ( 뷰 크기변환 )

즉, 양끝고정하고 스페이싱을준다.

1. fill : 부족한부분을 한 놈(마지막 뷰)을 늘려서 채운다.

근데 첫번째가 늘어나있다??( Priority가 같다 )이래서 오류가 나는 것 입니다. 이제 priority(우선순위를 설정하면됩니다.

오류해결법 : 마지막뷰 ( 세번째 뷰 ) 가 늘어나야 됨
Horizontal -> Hugging Horizontal(가로) priority를 다른 두개의 뷰보다 낮추면됩니다.

• 

2. fill equally : Spacing주고 남는 공간 나눠서 크기 설정

spacing을 10준 모습입니다. 스페이싱이 들어가고 남는 공간에 뷰가 같은 크기로 설정 된 것을 볼 수 있다.

1. 만약 하나의 라벨의 크기가 워낙 크다면 ??

• 
  크기를 유지하는 것을 볼 수 있다.

2. 그럼 전부 크면??

• 
  전부 라벨이 잘린다. 스페이싱이 먼저!

3. fill Proportionally : spacing주고 남는 것 비율대로 나눈다.

6,3,1 의 비율을 가진 뷰를 포함한 스택뷰 그러면 그 뷰의 크기는 스페이싱을 제외한 뷰의 크기에서
6:3:1로 크기가 설정된다.

4. equal Spacing : 하위뷰 크기를 유지하고 남는 공간에 같은 spacing을 주겠다.

위에랑 뷰의 크기가 달라진 이유 (너무 자주 말하나...)
지금 label은 크기가 딱 폰트크기
한과 세글자의 크기와 여섯글자있음크기를 제외한 공간의 크기를 동일(2로 나눔) 하게 준것입니다.

5. equal Centering : eqaul Spacing + 중앙정렬

4. equal Spacing, 5.equal Centering 얘네들은 뷰 크기를 유지한채 공간을 할당을 합니다. 뷰 크기가 우선적으로 설정하고 남는 공간인데 어떻게 spacing을 제한 할 수 있나? -> spacing의 Constraint를 기준으로 하면됩니다.

• 
  오류 : 70을 주니까 검정색 ( 스페이싱)이 늘어났습니다.
  뷰가 잘려버려서. spacing을 줄이거나 label을 줄여아합니다.

Alignment

Axix와 반대방향을 어떻게 채울래?

: Horizontal 기준으로 세로방향을 어떻게 할래?

1. fill

2. Top

3. Botton

4. center

설명이 필요 없습니다.
네......

그리고 stackView 끝에 간격을 주고 싶다? 하면 UIView안에 StackView를 넣어주시고 그곳에 StackView의 Constraint를 걸어주시면 됩니다.

이렇게

감사합니당