[iOS] SwiftUI - GeometryReader / View 크기와 좌표 계산하기

https://developer.apple.com/documentation/swiftui/geometryreader
스유 공부하기 🧐

GeometryReader

GeometryReader 는 컨텐츠의 크기와 위치를 함수로 나타내는 컨테이너 뷰로, 부모 뷰의 사이즈를 반환합니다.

• 일반적으로는 HStack, VStack, ZStack 을 사용해서 레이아웃을 배치하지만,
• UIKit 을 같이 사용할 경우 혹은 세부적인 조정이 필요할 경우 사용할 것으로 보이네요 👀
• View 의 크기나 좌표를 계산하고 싶을때 활용도 가능해보입니다! 🤔

GeometryReader 사용해서 레이아웃 배치해보기

• GeometryReader 생성자의 클로저 인자는 GeometryProxy 로 되어있습니다.
  • GeometryProxy : 컨테이너뷰의 크기와 위치에 접근할 수 있는 proxy
  • https://developer.apple.com/documentation/swiftui/geometryproxy

• GeometryProxy 객체에 접근해서 size, safeAreaInsets 변수와 frame(in:) 메소드를 사용할 수 있습니다
  • size : 컨테이너 뷰의 크기
  • safeAreaInsets : 컨테이너 뷰의 safe area inset
  • frame(in:) : 컨테이너뷰의 frame

safeAreaInsets

• 컨테이너 뷰가 safeArea 이랑 붙어있는 경우에만 측정할 수 있습니다.
  • 아래 예시처럼 VStack 으로 상단에 다른 뷰가 있는 경우에 상단의 값은 0으로 뜹니다!
  • EdgeInsets(top: 0.0, leading: 0.0, bottom: 34.0, trailing: 0.0)

frame(in:)

func frame(in coordinateSpace: CoordinateSpace) -> CGRect

• 위의 메소드는 iOS 17.0 에서 deprecated

func frame(in coordinateSpace: some CoordinateSpaceProtocol) -> CGRect

• CoordinateSpaceProtocol 는 베타에서부터 사용가능이지만, 내부에 global, local, named 는 사용가능해보입니다!

• CoordinateSpace 는 뷰의 좌표 공간으로, 일반적으로 .global, .local, .named(AnyHashable) 을 사용합니다.
  • .global : 루트 뷰(전체 화면)의 좌표 공간
  • .local : 현재 뷰의 좌표 공간
  • .named(AnyHashable) : 특정한 뷰에 이름을 붙이고, 해당 뷰에서 봤을때의 좌표 공간
• 코드로 확인해보면 각각 다른걸 확인할 수 있습니다!

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello!")

            GeometryReader { geometry in
                Text("Hello!")
                    .frame(
                        width: geometry.frame(in: .global).width,
                        height: geometry.frame(in: .global).height / 2
                    )
                    .background(Color.blue)
                    .onAppear {
                        print("\(geometry.frame(in: .global))")
                        print("\(geometry.frame(in: .local))")
                        print("\(geometry.frame(in: .named("test")))")
                    }
            }

            Text("Hello!")
                .coordinateSpace(name: "test")
        }
    }
}