개요

SwiftUI 다양한 화면 크기에 대응할 수 있는 뷰를 짠다는 것은 가볍게 보았지만 그렇게 쉽지 않은 문제였다. 선언형 방식은 시스템이 컴포넌트를 알아서 배치해준다는 점이 편리하지만, 그 결과가 원하는 값과 멀어질 때도 많았다.

예를 들어 Spacer()로 만든 여백이 아이폰 화면에서는 적절해보일지 몰라도, 큰 화면에서는 광활하고 불필요한 여백으로 보일 수도 있다.

개발자가 원하는 레이아웃을 제대로 작성하기 위해서는 SwiftUI에서 제공하는 컴포넌트들을 정확히 이해하고 사용할 필요가 있었다.

컴포넌트별 정리

Geometry Reader

Geometry Reader는 부모의 레이아웃에 대한 크기를 반환할 수 있는 view이다. 컨테이너 뷰의 좌표 공간에 접근하는 Geometry Proxy 객체와 같이 사용하게 된다.

GeomteryReader { proxy in
	// proxy 객체에서 값을 읽어 사용
}

Geometry Proxy 객체를 통해 아래와 같은 정보에 접근할 수 있다.

• bounds(of: NamedCoordinateSpace): 입력으로 받은 좌표계를 local coordinate space에 대응한는 좌표로 변환해 제공.
• frame(in:): 정의된 좌표 공간으로 변환된 컨테이너 뷰의 프레임을 반환
• size: 컨테이너 뷰의 크기
• safeAreaInsets: 컨테이너 뷰의 safe area

🟢 특징

• 부모 뷰가 자식에게 줄 수 있는 최대 공간을 전부 차지함.
  • 공간을 최대로 차지하기 때문에 같은 계층의 다른 뷰를 화면 밖으로 밀어버릴 수도 있다. 크기를 제한하거나 background를 활용하는 등의 대응이 필요할 수 있다.
• 차지한 공간에 대한 정보를 Geometry Proxy로 제공.
• SwiftUI의 일반적인 정렬 방식인 Center 정렬을 따르지 않고 (0,0)을 기준으로 바뀐다.
• 레이아웃 계산 비용이 있으니 과도하게 사용하지 않도록 주의해야 한다.

containerRelativeFrame(iOS 17+)