How to provide relative sizes using GeometryReader

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-provide-relative-sizes-using-geometryreader]

 

How to provide relative sizes using GeometryReader

 

일반적으로 SwiftUI가 스택을 사용해서 자동으로 배치(layout)하도록 하는 것이 좋지만, GeometryReader를 사용해서 컨테이너에 적절한 뷰 크기를 제공하는 것이 가능합니다. 예를들어, 화면에서 사용가능한 넓이의 절반을 2개의 뷰가 차지하도록 하는 경우에, 화면의 넓이를 미리 알수가 없기 때문에, 하드코딩된(hard-coded) 값을 사용하는 것은 불가능합니다. 

 

이를 해결하기 위해서, GeometryReade는 사용가능한 넓이와 높이를 알려주는 입력 값을 제공하고, 계산이 필요할때마다 사용할 수 있습니다. 따라서 2개의 뷰가 동일한 넓이를 가지도록 하기 위해서, 다음과 같이 사용가능한 공간을 절반으로 나눌 수 있습니다. 

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            HStack(spacing: 0) {
                Text("Left")
                    .frame(width: geometry.size.width / 2, height: 50)
                    .background(Color.yellow)
                Text("Right")
                    .frame(width: geometry.size.width / 2, height: 50)
                    .background(Color.orange)
            }
        }
    }
}

 

주의: GeometryReader는 뷰 계층구조에서 오프셋이나 공백을 더 이상 고려하지 않으며, HStack에 공백이 없는 이유입니다 - 이곳에 공백을 주는 경우에, 그 뷰들은 사용 가능한 공간이 너무 큽니다.