UIkit Basic 3 (UIStackView)

UIStackView

열 또는 행에 View 들의 묶음을 배치할 수 있는 간소화된 인터페이스 입니다. StackView 는 autoLayout을 이용하여 device 의 스크린 사이즈나, event 가 일어 날때 동적인 UI 를 구성하게 해 줍니다

StackView 를 사용하게 되면 autoLayout의 constraint(제약조건)을 많이 사용하지 않아도 쉽게 UI 구성이 가능하게 됩니다.

• StackView 사용 예시

• StackView Attribute

StackView Axis

StackView 의 방향을 결정 (가로 또는 세로)

StackView Distribution

StackView 안에 들어가는 뷰들의 사이즈를 어떻게 분배할지 설정하는 속성입니다

Fill

• Distribution 속성을 stackView 의 방향에 따라 가능한 공간을 모두 채우기 위해서 sub view 의 사이즈들을 재조정 합니다. 안에 children view 들의 크기를 constrain 조건에 따라서 늘리기나, 줄여서 StackView 사이즈 방향의 크기를 맞춥니다. 우선 순위가 낮은 subView 부터 크기를 감소 시키며,

Fill Equally

• StackView 안에 있는 subView 들의 크기를 일정하게 맞춰 크기를 꽉 채우는 속성입니다

Fill Proportionally

• stackView 의 방향에 따라 subView 가 가지고 있던 크기에 비례 하여, 공간을 차지하도록 하는 속성입니다

Equal Spacing

• StackView 의 방향에 따라서 subView 들의 공간사이를 균등하게 배치하는 속성입니다

Equal Centering

• 각 subView 들의 center 들간의 길이를 동일하게 맞춘 옵션입니다.

StackView Alignment

StackView 의 subView 들을 어떤식으로 정렬할지 결정하는 속성을 가리킵니다

Fill

stackView 방향이 horizontal 일 경우 아래 위 공간에 꽉 맞춰서 크기를 조절 합니다

Leading

stackView 들이 왼쪽 leading 에 맞춰서 왼쪽 정렬을 하게 됩니다

Top

stackView 들이 위쪽 top 에 맞춰서 왼쪽 정렬을 하게 됩니다.

First Baseline

Horizontal view 에서만 사용이 되며, 첫번째 first baseline 에 맞춰서 정렬을 합니다.

Center

subView 들이 stackView 의 center 에 맞춰서 정렬합니다

Trailing

Vertical StackView 에서 stack 에 오른쪽 끝쪽에 맞춰서 정렬합니다

Bottom

Horizontal StackView 에서 stack 에 아래쪽 밑에 부분에 맞춰서 정렬합니다

Last Baseline

StackView 부분의 lastBaseline 에 맞춰서 subView 들을 정렬 합니다. 이 정렬은 horizontal stackView 에서만 사용이 가능합니다

StackView Spacing

StackView 안에 들어가는 뷰들의 간격을 조정하는 속성입니다. spacing 값의 따라서 그 간격이 넓어지거나, 좁아 집니다

---

🔶 🔷 📌 🔑

Reference

Apple Developer Docs - https://developer.apple.com/documentation/uikit/uistackview

fastcampus - https://fastcampus.co.kr/dev_online_iosappfinal