[SwiftUI] View의 사이즈 얻기(Feat. GeometryReader)

프로필 보기 화면을 SwiftUI로 작업하던 도중 View의 사이즈를 어떻게 얻을까 고민을 하였다.

self를 통해 가져오려고 해봤지만 Failed... 따라서 검색을 해서 오늘의 주제인 GeometryReader 를 학습했다.

GeometryReader란?

Apple 공식 홈페이지 문서에 간단히 나와있다.

 

"콘텐츠를 자체 크기 및 좌표 공간의 함수로 정의하는 컨테이너 보기입니다."

"이 보기는 상위 레이아웃에 유연한 기본 크기를 반환합니다."

 

 

그래요. 이거 쓰면 됩니다. 라고 한마디로 정의해주고 있다.

 

사용 방법도 매우 간단하다.

 

var body: some View {
        GeometryReader { geometryValue in
            VStack {
                Image(systemName: "person")
                    .resizable()
                    .frame(width: geometryValue.size.width / 4, height: geometryValue.size.width / 4)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(.gray))
                    .padding()
                Text("사용자 이름").font(.headline)
                Text("상태 메세지").font(.subheadline)
                Divider()
                    .padding()
                HStack {
                    VStack{
                        Button(action:{}) {
                            Image(systemName: "message.fill")
                        }.padding(0.1)
                        Text("1:1 채팅")
                    }
                }
            }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
        }
    }

Body에 GeometryReader를 클로저 표현식으로 value를 받은 뒤 해당 Value를 사용해 구하면 된다.

 

해당 코드를 실행하면 하단처럼 이쁘장하게 가로 길이의 1/4 크기로 이미지를 만들 수 있다.