[iOS/Swift] UIStackView 기본

2022년 6월 17일에 작성됨

 

StackView는 UI를 그릴 때 상당히 많이 이용하는 것 같습니다. 개인적인 생각이지만 StackView 만 잘 써도 기본 UI 틀은 다 만들 수 있는 것 같네요.. 이 유용한 StackView의 기본에 대해 정리해보려 합니다.

 

StackView의 기본 속성은 axis, distribution, alignment, spacing 4가지가 있다.

Axis

Distribution (axis 방향)

• Fill (default) Fill 속성은 현재 기준 방향으로 요소들을 채운다. 만약 너비의 합이 스택 뷰의 너비보다 크거나 작다면 뷰들의 최소, 최대 크기에 대한 우선순위에 따라 크기를 줄이거나 확장시킵니다.
  • compression resistance priority: 최소 크기에 대한 제한 우선순위
  • hugging prioity: 최대 크기에 대한 제한 우선순위

Fill Equally 속성은 각 내부 요소들이 동일한 크기를 가집니다.

Fill Proportionally 속성은 스택 뷰를 채우기 위해 Intrinsic content size를 기준으로 내부 요소들의 크기를 정합니다. 이때 Intrinsic content size는 뷰가 가지는 콘텐츠를 기준으로 계산되는 크기를 의미합니다.

예를 들어 각 View들이 가지는 width, height 값들에 따라 다르게 계산됩니다.

 

Equal Spacing 속성은 스택 뷰 내부가 가득 차지 못하면 뷰들의 크기를 조절하지 않고 내부 뷰들 사이의 간격을 일정하게 증가시키거나 감소시켜 스택 뷰를 가득 채우는 속성입니다.

 

Equal Centering 속성은 View 간 간격 특성의 거리를 유지하면서 뷰들의 중간 지점 사이의 거리가 같아지도록 spacing을 조절하는 속성입니다.

추가로 Equal Spacing, Equal Centering에 대한 블로그 그림 참고

Alignment (axis 반대 방향)

• Fill (default)내부 뷰들을 axis의 반대방향으로 채웁니다.

• vertical (center, trailing, leading)

• horizontal (center, bottom, top)

Spacing

spacing은 뷰 내부 사이의 간격을 뜻합니다. default는 0.0이며 다음 사진은 50을 주었을 때입니다.