[SwiftUI] GeometryReader

SwiftUI GeometryReader

SwiftUI 를 공부하면서 가장 처음으로 접하게 된 것이 VStack, HStack, ZStack이다.
기본적으로 위 Stack들을 활용하여서 뷰를 구성할 수 있었습니다.
뭔가 뷰의 크기를 알아내서 위치 및 사이즈를 조절하고 싶을 때는 어떻게 해야 할까요??

여러가지 방법들이 있겠지만 GeometryReader를 활용하면 좀 더 편하게 내 컨텐츠의 사이즈를
계산하고 활용 할 수 있습니다.

Apple 의 문서에서도 컨텐츠의 크기와 위치를 함수로 나타내어지는 뷰라고 설명되어 있습니다.

그렇다면 어떻게 GeomertyReader를 사용 할 수 있을까요????

GeometryReader 사용해 보기

GeometryReader의 사용법은 간단하다. 다음 코드를 한번 봐보자.

import SwiftUI

struct GeometryReaderTest: View {
    var body: some View {
        HStack()
        {
            GeometryReader { geo in
                HStack(spacing: 0) {
                    Text("1/2 사이즈")
                        .frame(width: geo.size.width/2.0, height: geo.size.height/1.0 , alignment: .center)
                        .foregroundColor(.white)
                        .font(.title)
                        .background(Color.blue)
                        .onAppear {
                            print(geo.size)
                        }

                    Text("1/3 사이즈")
                        .frame(width: geo.size.width/3.0, height: geo.size.height/1.0 , alignment: .center)
                        .background(.gray)
                        .font(.title)
                }
            }
        }
    }
}

struct GeometryReaderTest_Previews: PreviewProvider {
    static var previews: some View {
        GeometryReaderTest()
    }
}

간단하게 두개의 Text를 GeometryReader 를 활용하여 만들어 봤다. 결과는 어떻게 나올까?

위 스크린샷과 같이 1/2 사이즈, 1/3 사이즈로 나오게 되었다.
즉 컨텐츠가 할당 받은 View 사이즈를 정보를 가져올 수 있다.

절대적인 크그가 아닌 View 가 할당 받은 Size 임으로 할당 받는 사이즈를 다음과 같이 줄여주면
GeometryReader를 통해 나오는 View의 사이즈 역시 줄어들게 된다.

import SwiftUI

struct GeometryReaderTest: View {
    var body: some View {
        HStack()
        {
            Text("박스")
                .frame(width: 150, height : 100, alignment: .center)
                .background(Color.red)
                .font(.title)

            GeometryReader { geo in
                HStack(spacing: 0) {
                    Text("1/2 사이즈")
                        .frame(width: geo.size.width/2.0, height: geo.size.height/1.0 , alignment: .center)
                        .foregroundColor(.white)
                        .font(.title)
                        .background(Color.blue)
                        .onAppear {
                            print(geo.size)
                        }

                    Text("1/3 사이즈")
                        .frame(width: geo.size.width/3.0, height: geo.size.height/1.0 , alignment: .center)
                        .background(.gray)
                        .font(.title)
                }
            }
        }



    }
}

struct GeometryReaderTest_Previews: PreviewProvider {
    static var previews: some View {
        GeometryReaderTest()
    }
}

사이즈가 150인 박스를 사전에 넣어주니 그 공간을 제외하고 나머지 공간에서
1/2, 1/3 정도의 크기만큼 컨텐츠가 할당이 되었다.

간단하게 GeometryReader에 대해서 살펴보았다.
내가 원하는 항목이 View의 영역에 따라 사이즈가 조절되길 원한다면 사용할 가치가 높아 보인다.