안녕하세요 릴리입니다😄
오늘은 Constraint를 주지 않고도 Auto Layout을 적용시킬 수 있는 View인 StackView에 대해 알아보도록 하겠습니다.

이 글은 Apple Document와 야곰닷넷의 Auto Layout 정복하기를 수강하고 참고하여 작성되었습니다.
Auto Layout Without Constraints
🐻 야곰 닷넷 _ Auto Layout 정복하기
👀 참고해 볼 WWDC
Mysteries of Auto Layout, Part 1

Auto Layout Without Constraints

---

개발자가 constraint를 별도로 주지 않고 Auto Layout을 적용시킬 수 있는 도구가 있습니다!
그건 바로 UIStackView라는 클래스인데요~

1. Stack View 개념

이름 그대로 view를 stack처럼 쌓아 넣어주는 View입니다.
view를 어떤 방향으로 쌓을지, 어떤 사이즈로 분배할지, 어떤 위치에 배치 할지 등은 property에 기반하여 결정하게 됩니다! Auto Layout이 적용되는 기준을 property라고 볼 수 있겠습니다.

애플 개발자 문서에서는 UIStackView 클래스를 아래와 같이 정의하고 있네요.

An UIStackView creates and manages the constraints necessary to create horizontal or vertical stacks of views. It will dynamically add and remove its constraints to react to views being removed or added to its stack. With customization it can also react and influence the layout around it.
[🍎 Developer Documentation] UIStackView

뷰의 collection을 vertical or horizontal layout으로 만드는 선형의 인터페이스.
수평 또는 수직의 뷰 스택을 만드는 데 필요한 constraints를 만들고 관리합니다. 스택에 뷰가 추가되거나 삭제될 때마다 dynamic하게 constraints를 추가하고 삭제합니다. 커스터마이제이션으로 레이아웃 주변의 뷰와 상호작용도 할 수 있습니다.

2. Instance Property

view가 어떤 기준으로 놓여질지 정하는 UIStackVeiw의 인스턴스 프로퍼티 입니다.

• axis : 스택뷰의 방향. Horizontal / Vertical
• distribution : 스택 뷰 안의 view들의 사이즈를 어떻게 분배할지
• alignment : 스택 뷰 안의 view들의 위치를 어떻게 배치할지
• spacing : view간의 거리를 설정
  
  

distribution cases (size 정하는 기준)

• .fill : 스택 뷰 방향에 따라 꽉차도록 폭/높이를 결정한다.
  contents hugging priority가 낮은 요소가 늘어납니다.
• .fill equally : 모든 view의 폭/높이가 같다
• .fill proportionally : contents의 비율대로 꽉차게 폭/높이 결정
• .equal spacing : fill + spacing, 꽉차게 늘어나면서 spacing은 동일하게 폭/높이 결정
• .equal centering : 각 뷰의 center간에 거리가 동일하도록 폭/높이가 결정
  
  
  

사이즈를 결정했으니, 위치도 결정해주어야겠죠?
위치는 alignment 프로퍼티를 기반으로 결정합니다.

alignment (location 정하는 기준)

• .fill : 스택 뷰 방향(axis)의 반대 방향으로 폭/넓이가 stackView에 꽉차도록 배치
• .leading : axis가 vertical일 때, leading에 맞춰 정렬
• .top : axis가 horizontal일 때, top에 맞춰 정렬
• .firstBaseline : 뷰의 텍스트 첫번째 줄 baseline을 맞추어 정렬
• .lastBaseline : 뷰의 텍스트 마지막 줄 baseline을 맞추어 정렬
• .center : axis가 vertical - 수직 중앙 정렬, horizontal - 수평 중앙 정렬
• .trailing : axis가 vertical일 때, trailing 에 맞춰 정렬
• .bottom : axis가 horizontal일 때, bottom에 맞춰 정렬
  
  
  

3. StackView에 view 추가하고 삭제하기

var vertical: UIStackView = UIStackView()
  
// stack에 view 추가
  @objc func addView() {
      let view = UIView()
      vertical.addArrangedSubview(view)
  }

// stack에 있는 view 삭제
  @objc func removeView() {
      guard let last = vertical.arrangedSubviews.last else {
          vertical.removeArrangedSubview(last)
      }
  }

arrangedSubViews

Instance Property
arrangedSubviews

The list of views arranged by the stack view.

var arrangedSubviews: [UIView] { get }

[🍎 Developer Documentation] arrangedSubViews

[UIView] array로 정의되어 있어서 array에서 사용하는 메서드들을 사용 가능합니다👍