[Auto Layout] 10. StackView

StackView의 장점은 여러개의 컴포넌트를 정렬해야할 때 복잡한 Constraints를 단순화 시켜서 간단하게 만들 수 있다.

StackView를 화면에 놓고 다른 컴포넌트들을 StackView위에 놓으면 StackView안에 컴포넌트들이 들어가게 된다.

하지만 위의 방식처럼 StackView에 컴포넌트를 추가하는 경우 View자체를 2개이상 추가했을 때 상위View에 View가 들어가서 중첩 View가 될 수 있다.

다음 방법으로 진행하면 오류가 나지 않게 만들 수 있다.

[오류 없는 StackView]

1. StackView에 넣을 컴포넌트들을 우선적으로 화면에 배치해준다.

폰트와 글자 길이가 다른 Label 3개를 추가해주었다.

2. 추가한 컴포넌트를 모두 클릭하고 우측하단에 있는 Embed in에서 StackView를 선택해준다.

이렇게하면 StackView에 컴포넌트를 오류 없이 넣을 수 있다.

[StackView 속성]

이제 StackView 속성에 대해서 알아보자.

그전에 StackView의 Constraints를 각각 10씩걸어주자. (bottom 제외) + 각 Label의 배경색도 지정

• Axis - 수직, 수평을 정하는 옵션

• Alignment - StackView안에 view들의 Y축을 정렬하는 옵션

• Distribution - StackView안에 view들의 X축을 정렬하는 옵션

  • Fill: 각 컴포넌트의 Priority에 맞춰서 StackView를 채운다. Priority가 모두 같다면 인덱스 순으로 크기를 조절한다.
  • Fill Equally: 컴포넌트를 같은 크기로 만들어서StackView를 채운다.
  • Fill Proportionally: 컨텐츠 고유의 크기에 따라서 컴포넌트 크기가 확장되어 주어진 Spacing과 함께 Stackview를 채운다.
  • Equal Spacing: Spacing을 통해서 컴포넌트끼리의 간격을 일정하게 증감시켜 StackView를 채운다.
  • Equal Centering: 어느 컴포넌트의 중심점에서 옆쪽 컴포넌트의 중심점까지의 거리가 같도록 Spacing을 결정해서 StackView를 채운다.

• Spacing - subview들 간의 간격을 설정하는 옵션

실습에 관한 내용은 다음에