[iOS] SwiftUI - Container View

UIKit에서 반복되는 컨텐츠를 그룹핑하고 나타내는 방법으로는, 스크롤 뷰와 스택뷰를 결합하거나 테이블뷰 또는 컬렉션 뷰를 이용했다.

 

UISwift에서 또한 뷰를 그룹핑하고 반복되는 컨텐츠에 대한 컨테이너를 제공한다.

앱 사용자 인터페이스의 각 부분의 특성에 따라 겉으로 보이기엔 똑같으나, 앱의 성능을 고려하여 적합한 컨테이너 뷰를 선택하는 것이 중요하다.

 

StackView

• HStack - 수평선으로 배치
• VStack - 수직선으로 배치
• ZStack - 겹쳐서 배치

StackView 예시

출처 : https://docs-assets.developer.apple.com/published/cfcda1d8b2521e35ff381ae4ae6e2143/10600/Picking-Container-Views-for-Your-Content-1@2x.png

 

Stack, LazyStack

LazyStack은 컨텐츠가 컨테이너 범위를 넘어서 확장될수 있다. 아래와 같이 ScrollView와 결합해서 사용하는 것 같은 모습이다.

 

이미지 출처: https://docs-assets.developer.apple.com/published/11e35ee58bbcc2fe0e58e4add7ff42d1/10600/Picking-Container-Views-for-Your-Content-2@2x.png

Stack은 자식 뷰를 로드할때 하위 뷰의 크기와 모양을 다 알고 있기 때문에 한번에 로드할 수 있고

그로 인해 레이아웃을 안정적으로 보이게 할수 있다.

LazyStack은 성능을 위해 어느정도 레이아웃 정확성을 등가교환 한다고 생각하면 된다. 하위뷰가 표시될때만 그 크기와 위치를 계산하기 때문이다. 

 

각각의 장단점이 있기 때문에,

기본적으로는 Stack을 사용하고

자식뷰가 너무 많거나 예측 불가능할 경우 성능 향상에 의미 있는 경우 LazyStack을 사용하는 것이 좋다.

 

Grid

테이블 뷰나 컬랙션 뷰와 같이 보이는 뷰로 정사각형 컨테이너에 자연스럽게 표시되는 컨텐츠를 레이아웃 하는 데에 적합하다.

아래 사진과 같이 사용자 인터페이스 레이아웃을 확장할때도 잘 쓰인다.

Grid도 Stack과 마찬가지로 범위에 넘어서는 컨텐츠를 담지 못한다.

컨텐츠가 더 있다면 스크롤 뷰를 먼저 설정한 후 그 안에 Grid를 넣어야한다.

출처: https://docs-assets.developer.apple.com/published/ad1dd58b588799bee3436a09dc5306d3/10600/Picking-Container-Views-for-Your-Content-3@2x.png

 

List

List는 LazyVStack과 유사해보인다.

기본적으로 List에는 항목과 항목 사이에 Divider 역할의 구분선이나, 셀을 누르면 넘어가는 것이 예상 되는 화살표 아이콘(disclosure indicator)등이 포함되어있다.

또한 리스트에는 항목을 삽입하고 재정렬하고 제거하는 것과 같은 일반적인 작업에 대한 플랫폼에 적합한 상호작용도 지원한다.

List 내부의 행도 Lazy하게 로드된다. (스크롤할때 로드)

List는 기본적으로 스크롤링이 가능하기 때문에 스크롤뷰 안에 넣을 필요가 없다.

 

Form

기본 설정화면 같은 레이아웃을 적용하기에 좋다.

아래는 내용이 같은 iOS, macOS 설정 화면이다.

별도로 만들 필요 없이 form을 사용하면 각각의 플랫폼에 적합한 방식으로 내용을 표시하게 된다.

 출처: https://docs-assets.developer.apple.com/published/624bd221651ed358c66daa08c3cfb6bf/10600/Picking-Container-Views-for-Your-Content-4@2x.png