[swift] GeometryReader를 사용하여 뷰 배치하기

14 Dec 2023

swift

iOS 앱에서는 화면 크기나 디바이스의 방향에 따라 뷰를 동적으로 배치해야 하는 경우가 많습니다. 이때 GeometryReader를 사용하면 화면의 크기 및 경계를 쉽게 가져와서 뷰를 배치할 수 있습니다.

GeometryReader란?

GeometryReader는 SwiftUI에서 화면의 크기 및 경계에 대한 정보를 제공하는 뷰입니다. 이를 사용하여 뷰의 위치, 크기, 정렬 등을 정의할 수 있습니다.

GeometryReader { geometry in
    // geometry를 활용한 뷰 배치
}

GeometryReader의 클로저 내부에서 제공되는 geometry 매개변수를 통해 화면의 크기, 안전 영역, 경계 등의 데이터에 접근할 수 있습니다.

화면 중앙에 뷰 배치하기

가장 간단한 예로 GeometryReader를 사용해 화면 중앙에 텍스트를 배치하는 방법을 살펴보겠습니다.

GeometryReader { geometry in
    Text("Hello, World!")
        .frame(width: geometry.size.width, height: geometry.size.height)
        .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
}

위 예제에서 GeometryReader로 전달된 geometry를 이용하여 Text 뷰를 화면의 정가운데에 배치하고 있습니다.

안전 영역을 기준으로 뷰 배치하기

GeometryReader는 안전 영역을 기준으로도 뷰를 배치할 수 있습니다. 안전 영역은 표시 가능한 실제 화면 영역으로, 홈 인디케이터나 네비게이션 바와 같은 요소에 의해 가려지지 않는 영역입니다.

GeometryReader { geometry in
    VStack {
        Text("Safe area top: \(geometry.safeAreaInsets.top)")
        Text("Safe area leading: \(geometry.safeAreaInsets.leading)")
        Text("Safe area trailing: \(geometry.safeAreaInsets.trailing)")
        Text("Safe area bottom: \(geometry.safeAreaInsets.bottom)")
    }
}

위 예제에서는 GeometryReader로부터 제공되는 안전 영역 정보를 이용하여 해당 영역에 텍스트를 배치하고 있습니다.

GeometryReader를 이용하면 다양한 화면 크기와 디바이스 방향에 유연하게 대응할 수 있어, iOS 앱의 화면 배치에 유용하게 활용할 수 있습니다.

GeometryReader란?

화면 중앙에 뷰 배치하기

안전 영역을 기준으로 뷰 배치하기

참고 자료