[SwiftUI] Geometry

안녕하세요 불망입니다. 

이번 글에서는 Geometry에 대해서 소개하겠습니다.

SwiftUI에서 Geometry는 뷰가 화면에 배치되는 방법을 제어하는 데 사용되는 객체입니다.

이것은 뷰의 위치, 크기 및 방향을 결정하는 데 유용합니다.

이번 글에서는 SwiftUI에서 Geometry 객체를 사용하는 방법에 대해 설명하겠습니다.

GeometryReader

GeometryReader는 SwiftUI에서 제공하는 뷰 중 하나로, 부모 뷰가 자식 뷰에 대한 크기와 위치를 결정하는 방법을 제어할 수 있습니다. 즉, 자식 뷰의 위치, 크기 및 방향을 결정하는 데 사용됩니다. GeometryReader는 다음과 같이 작성될 수 있습니다.

GeometryReader { geometry in
    // Geometry 객체를 사용하여 자식 뷰의 위치, 크기 및 방향을 결정합니다.
}

GeometryReader 내부의 클로저에서는 Geometry 객체를 사용하여 자식 뷰의 위치, 크기 및 방향을 결정할 수 있습니다. Geometry 객체는 부모 뷰의 크기, 위치, 안전 영역 및 레이아웃 가이드와 같은 정보를 포함합니다.

예를 들어, GeometryReader를 사용하여 뷰의 가운데에 원을 배치하는 코드는 다음과 같습니다.

GeometryReader { geometry in
    Circle()
        .frame(width: geometry.size.width / 2, height: geometry.size.width / 2)
        .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
}

위 코드에서는 Circle 뷰를 생성하고, Geometry 객체에서 제공되는 크기를 기반으로 뷰의 크기를 결정하고, position() 메소드를 사용하여 원의 위치를 결정합니다.

GeometryProxy

GeometryReader를 사용하여 뷰의 위치, 크기 및 방향을 결정할 수 있지만, 때로는 Geometry 객체가 제공하는 정보만으로는 충분하지 않을 수 있습니다. 이 때, GeometryProxy를 사용할 수 있습니다. GeometryProxy는 GeometryReader의 클로저 내부에서 생성되며, Geometry 객체보다 더 자세한 레이아웃 정보를 제공합니다.

GeometryProxy를 사용하여 뷰의 위치, 크기 및 방향을 결정하는 예제 코드는 다음과 같습니다.

GeometryReader { geometry in
    Rectangle()
        .foregroundColor(.red)
        .frame(width: geometry.size.width / 2, height: geometry.size.width / 2)
        .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
    
    Circle()
        .foregroundColor(.blue)
        .frame(width: geometry.size.width / 4, height: geometry.size.width / 4)
        .position(x: geometry.safeAreaInsets.leading + geometry.size.width / 8,
                  y: geometry.safeAreaInsets.top + geometry.size.width / 8)
}

위 코드에서는 Rectangle과 Circle 뷰를 생성하고, GeometryProxy에서 제공되는 안전 영역 정보를 사용하여, Circle 뷰를 안전 영역의 좌측 상단에 배치합니다. GeometryProxy에서 제공되는 다른 유용한 정보로는 부모 뷰의 크기, 레이아웃 가이드 및 좌표 공간 변환 정보가 있습니다.

Alignment

Alignment는 Geometry 객체와 함께 사용하여 뷰의 위치를 정렬하는 데 사용됩니다. SwiftUI에서는 다양한 Alignment 타입을 제공합니다. 예를 들어, .topLeading, .center, .trailingBottom 등이 있습니다. Alignment를 사용하여 뷰의 위치를 정렬하는 예제 코드는 다음과 같습니다.

GeometryReader { geometry in
    VStack(alignment: .leading) {
        Text("Hello, World!")
            .frame(width: geometry.size.width, height: geometry.size.height / 2)
        
        Spacer()
        
        Text("This is SwiftUI Geometry")
            .frame(width: geometry.size.width, height: geometry.size.height / 2)
    }
}

위 코드에서는 VStack을 사용하여 두 개의 Text 뷰를 세로로 정렬합니다. alignment 파라미터를 사용하여 Text 뷰를 왼쪽 정렬합니다.

정리

이번 글에서는 SwiftUI에서 Geometry 객체를 사용하는 방법에 대해 살펴보았습니다. GeometryReader와 GeometryProxy를 사용하여 뷰의 위치, 크기 및 방향을 결정하고, Alignment를 사용하여 뷰의 위치를 정렬하는 방법을 배웠습니다. Geometry를 사용하여 더욱 유연하고 다양한 레이아웃을 구성할 수 있습니다.