UIStackView

raindrop·2023년 3월 13일
0
post-custom-banner
@MainActor class UIStackView : UIView

스택 뷰의 종류

  • Horizontal Stack View
  • Vertical Stack View

오토레이아웃을 사용하여 장치 방향, 스크린 크기, 공간 변화에 따라 동적으로 유저 인터페이스 생성한다. 모든 뷰의 레이아웃을 arrangedSubviews 프라퍼티에서 관리하며, arrangedSubviews 배열에 있는 순서로 정렬된다. axis, distribution, alignment, spacing 등으로 자세한 레이아웃 설정된다.

distributions

along stack axis -> UIStackView.Distribution
stack의 축과 평행하게는 fillEqually를 제외하고 intrinsic ContentSize 프라퍼티를 사용해서 크기를 계산한다. UIStackView.Distribution.fillEqually를 사용하면 모두 크기가 같도록 조정한다.
perpendicular to stack axis -> UIStackView.Alignment
stack의 축과 수직하게는 fill을 제외하고 intrinsicContentSize 프라퍼티로 크기를 조정한다. UIStackView.Alignment.fill을 사용하면 가장 큰 뷰의 크기에 맞춰 다른 모든 뷰들의 크기를 늘여준다.

fitting size
along stack view's axis(스택 뷰와 평항하게) : 모든 뷰 크기 + 사이 공간
perpendicular to stack view's axis(스택 뷰와 수직하게) : 가장 큰 뷰의 사이즈
margin 추가하기 : 스택 뷰의 isLayoutMarginsRelativeArraangement 프라퍼티를 true로 설정하면 마진 크기가 fitting size에 추가된다.

positions

당연하지만 오토레이아웃으로 포지션은 정해줘야한다.
baseline은 content size로 결정

수평 스택 뷰에서 키가 가장 큰 뷰를 리턴시키는 법
forFirstBaselineLayout, forLastBaselineLayout 메소드 사용
가장 키가 큰 뷰가 스택 뷰라면, 그 스택 뷰의 키가 가장 큰 뷰가 호촐된다.
수직 스택 뷰에서 가장 먼저 정렬된 뷰를 리턴시키는 법
forFirstBaselineLayout, forLastBaselineLayout으로 각각 가장 먼저, 마지막에 정렬된 뷰를 리턴한다. 해당하는 뷰가 스택 뷰이면, 그 스택뷰에서 해당하는 뷰가 리턴된다.

보통 스택 뷰 레이아웃 정의하기

포지션만 정의하기
슈퍼뷰에 대해 인접한 두 모서리를 정의하는 방법으로, 고유한 크기(intrinsic content size)로 표현할 때 특히 유용하다.

축에 따라 스택 사이즈 정의하기
superview에 맞춰 스택 뷰의 크기를 정의하고, 스택 뷰의 포지션을 정의한다.
스택 크기를 스택 축에 수직하게 정의하기
스택 뷰의 크기와 포지션을 정의하기

스택 뷰의 appearance 관리하기

axis, distribution, alignment, spacing, isBaselineRelativeArrangement, isLayoutMarginsRelativeArrangement

정렬된 뷰와 서브뷰 간에 일관성 유지하기

subviews는 속한 모든 뷰라고 생각하고, arrangedSubviews는 그 뷰들중 정렬된 뷰라고 생각하면 될 것 같다.(arrangedSubviews ∈ subviews가 항상 보장된다)
arrangedSubviews의 순서가 스택에서 뷰가 나타나는 순서를 정의한다.

스택 뷰 content를 동적으로 바꾸기

뷰가 arrangedSubviews에 추가되거나, 삭제되거나, 삽입될 때마다 스택 뷰는 자동으로 레이아웃을 업데이트 한다. 정렬된 서브뷰의 isHidden 프라퍼티를 변경하는 것도 반영된다.
또 스택의 방향을 바꾸고 싶다면 스택뷰의 axis 속성을 바꾸면 된다.

레퍼런스

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

post-custom-banner

0개의 댓글