[IOS] UIStackView 정리

 

UIStackView

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

Apple Developer Documentation

 

 

UIStackView는 열 또는 행에 View들의 묶음을 배치할 수 있는 간소화 된 인터페이스를 의미한다. Autolayout Ui를 보다 효율적으로 관리할 수 있다는 장점을 가지고 있다.

 

 

UIStackView는 총 Axis, Alignment, Distribution, spacing 4가지 속성을 가지고 있다.

 

 

 

1. Axis(축)

: 내부의 뷰들을 어느 방향으로 배치할 지 정하는 기준이다. vertical, horizontal 두가지로 나누어 진다. 

 

 

2. Distribution(분배)

 : 스텍안에서 뷰들의 사이즈를 어떻게 분배할 것 인지에 대한 기준이다.

•  fill : 방향에 따라 가능한 공간을 모두 채운다. 뷰들이 스텍 뷰의 크기를 초과한다면 compression resistance priority에 따라 뷰를 감소시키고, 스텍 뷰의 크기보다 부족하다면 hugging resistance priority에 따라 감소시킨다.

fill

          compression resistance priority과 hugging resistance priority이 기억 안난다면 이전 포스팅을 확인하기 바란다.

 

https://hyukji.tistory.com/9

[IOS] content Hugging , compression Resistance

 

• fill equally : 각 뷰들의 크기를 일정하게 하여 뷰들의 사이즈를 분배한다.

fill equally

•  fill proportionally : intrinsic content size 의 비율에 따라 뷰들의 사이즈를 분배한다.

fill proportionally

•  equal spacing : 뷰들의 사이의 간격을 일정하게 설정하며 뷰들의 사이즈를 분배한다.

equal spacing

•  equal centering : 뷰들의 중심 즉 center 간의 간격이 같게 뷰들의 사이즈를 분배한다.

equal centering

 

 

 

3. Alignment(정렬)

 : 스텍 안에서 뷰들을 축의 수직으로는 어떻게 설정할 것 인지에 대한 기준이다.

•  Fill : horizontal(수평)이라면 수직(위아래)으로 가능한 공간을 가득 채운다. vertical이라면 수평으로 가능한 공간을 가득 채운다. 

fill

•  Leading : vertical 스텍 뷰의 맨 왼 쪽(leading Edge)에 맞추어 내부 뷰들을 정렬한다. horizontal에서의 top과 동일하다.

leading

•  Top : horizontal 스텍 뷰의 맨 위 쪽(top Edge)에 맞추어 내부 뷰들을 정렬한다. verical에서의 leading과 동일하다.

top

•  Center : 스텍 뷰가 축을 따라서 뷰들의 중심을 스텍뷰의 중심에 맞춰 정렬

center

•  Trailing : veritcal에서 맨 오른쪽(trailinng edge)에 맞추어 내부 뷰들을 정렬한다. horizontal의 bottom과 동일하다.

trailing

•  bottom : horizontal에서 아래쪽(bottom edge)에 맞추어 내부 뷰들을 정렬한다. vertical의 trailing과 동일하다.

bottom

•  First Baseline : horizontal에서만 가능하며 뷰들의 first 베이스라인에 맞춰 정렬

first baseline

•  Last baseline : horizontal에서만 가능하며 뷰들의 last 베이스라인에 맞춰 정렬

last baseline

 

4. Spacing(간격)

: 뷰들의 간격을 조정하는 속성이다.