UIStackView 기초

Stackview 

여러 개의 View를 하나의 스택으로 이뤄어진 뷰로 만들어 주는 역할을 하는 뷰

 

stackview 의 속성은 아래와 같다. 

 

• axis :  스택 뷰의 방향을 정한다.( 가로 , 세로 ) 
• distribution :  축을 따라 뷰의 레이아웃을 정의한다.
• alignment :  스택 뷰의 축에 따른 위치를 정의한다. 
• spacing : 뷰 사이이 공간을 정한다.

---

UIStackview.Distribution 

- fill

  hugging priorty가 낮은 요소가 늘어나서 채우게 된다.

 

- fillEqually 

  동등한 사이즈로 채우게 된다. 

 

- fillPropertionally 

  자신의 콘텐츠 사이즈의 비율대로 채워진다.

 

 

- equalSpacing 

   기본은 Fill 이고 동일한 spacing 을 가지게 된다. 

 

- equalCentering 

  요소의 가운데 간격이 동일하게 가지게 된다.

---

UIStackview.Alignment 

 

- fill 

  stackview  세로 방향으로 채운다.

- leading 

  leading 쪽으로 정렬 

- top

   top 쪽으로 정렬 

- firstBaseLine 

  첫번째 라인 기준으로 맞춰준다.

- center 

   center 로 정렬

 

- trailing 

   trailing 으로 정렬

 

- bottom 

   bottom 으로 정렬 

 

 

- lastbaseline 

  맨 아래 줄에 맞춰 정렬 

---

StoryBoard 로 StackView 구현하기 

 

UIStackView 를 활용하여 label, image, button을 stackView 에 넣고 image를 크게 보이게 설정하고자 한다. 

 

 label, imageView,button 을 배치후 3개를 StackView 로 설정한다.

 

StackView  레이아웃을 view 에 맞게 설정한다. 

stackview 속성( 변경 전)  

 

 

이미지를 크게 보이기 위해 content hugging priority vertical 를 1로 설정 후

stackview alignment 을 fill , spacing 은 8 로 설정한다. 

이미지 hugging 속성

stackview 속성 ( 변경 후 )

label 를 가운데 정렬한다. 

---

reference 

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH11-SW1

https://developer.apple.com/documentation/uikit/uistackview/distribution