Stack View Properties

• axis(UIStackView Only)

  • horizontal 가로 스택뷰
  • vertical 세로 스택뷰

• distribution: UIStackView.Distribution - 뷰의 사이즈에 관한 방법

  • fill: hugging priority가 낮은 친구들이 늘어나서 스택뷰를 채움
  • fillEqually: 모든 뷰가 동일한 크기로 채워짐
  • fillProportionally: 컨텐츠 사이즈 비율대로 채워짐(ex> 3:2:4:1)
  • equalSpacing: 기본으로 fill로 작동하고 동일한 간격을 유지
  • equalCentering: 모든 뷰의 중앙이 동일한 간격을 유지

• alignment: UIStackViw.Alingment - 뷰의 위치에 관한 방법

  • fill: 스택뷰의 크기에 맞춰서 뷰의 크기가 늘어남
  • leading: 뷰의 leading이 스택뷰의 leading과 일치
  • top: 뷰의 top이 스택뷰의 top과 일치
  • firstBaseline: 뷰의 firstBaseline이 스택뷰의 firstBaseline과 일치
  • center: 뷰의 center가 스택뷰의 center와 일치
  • trailing: 뷰의 trailing이 스택뷰의 trailing과 일치
    
  • bottom: 뷰의 bottom이 스택뷰의 bottom과 일치
  • lastBaseline: 뷰의 lastBaseline이 스택뷰의 lastBaseline과 일치

• spacing: CGFloat 요소 사이의 간격

Simple Stack View

Label과 Image View, Button으로 이루어진 Stack View를 만들어보자.

1. 3가지 요소를 선택한 후, Editor - Embed In - Stack View를 선택한다.
2. 스택뷰를 선택하고 constraints를 상하좌우 0으로 설정해서 화면에 꽉차게 만든다.
3. 이미지가 커지는 것을 원하기 때문에 Image View의 Hugging Priority를 낮게 설정한다.(여기서는 1로 설정했다.)
4. 스택뷰의 Allignment를 Fill로 설정한다.
5. 위쪽 레이블을 선택하고 center로 설정해 준다.

Simple Stack View	Nested Stack Views View

Nested Stack Views

1. name과 text field를 선택하고 Editor - Embed In - Stack View를 선택한다.
2. 만들어준 first, middle, last 스택뷰를 선택하고 다시 하나의 스택뷰에 담아준다
3. 왼쪽의 이미지 뷰와 묶어서 스택뷰를 만들어 준다.
4. 하단 3개의 버튼을 묶어서 스택뷰를 만들고 , 모든 스택뷰를 하나의 스택뷰에 담아준다.

Reference

Auto Layout Without Constraints
Apple Developer Documentation - UIStackView
WWDC18 - Mysteries of Auto Layout, Part 1
Auto Layout Cookbook - StackView