SwiftUI view의 크기 (높이,넓이) 구해보자!!

화면을 구성하거나 로직을 작성하다보면 동적으로 변하는 view의 크기를 구해야한 경우가 생긴다.

 

안드로이드나 스토리보드에서는 비교적 쉽게 해당 view의 크기를 구할수 있었지만 

 

SwiftUI에서는 view의 크기를 구하는 방법이 잘 알려져 있지 않고 SwiftUI 특성상 별로 권장하지 않는다.

 

 하지만 꼭 필요한 경우 view의 크기를 동적으로 가져올수 있는 방법이 있다.

 

그건 바로

 

sizePreferenceKey 를 이용한 방법인데  

 

PreferenceKey란? 

 

https://developer.apple.com/documentation/swiftui/preferencekey

Apple Developer Documentation

하지만 이해가 어렵다면 간단하게 view의 크기를 담을수 있는 변수? 정도라고만 생각하면된다.

 

그러면 바로 코딩으로 구현해보자

 

우선 위에서 말한 화면의 크기를 담을 변수를 하나 선언한다.

//View의 크기를 알기위해 사용하는 변수
struct sizePreferenceKey: PreferenceKey{
    static var defaultValue: CGSize = .zero
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {}
}

	//사용하는 메인뷰의 높이를 구하기위해 사용하는 변수
    @State var heigtVStackMain : CGFloat = 0
    
    var body: some View {
    		//내가 구할려고하는 view를 감싸는 GeometryReader 를 선언을 해준다.
            GeometryReader{ g in
                VStack(spacing : 0){
                    Image("1")
                        .resizable()
                        .frame(width: UIScreen.main.bounds.width, height: 500)
                    Image("1")
                        .resizable()
                        .frame(width: UIScreen.main.bounds.width, height: 500)
                    Image("1")
                        .resizable()
                        .frame(width: UIScreen.main.bounds.width, height: 500)
                }
                .background(
                    //SwiftUI 에서는 각 뷰의 크기를 구하는것이 함수화 되어있지않다 그래서 살짝 꼼수를 사용해야하는데
                    //내가 상단으로 인지하고싶은 부분에 투명한 색상의 배경을 하나 선언을 해주고
                    //선언한 투명한 배경의 크기를 구한다.
                    
                    //그때 필요한것이 바로 sizePreferenceKey
                    GeometryReader { proxy in
                        Color.clear
                            .preference(key: sizePreferenceKey.self, value: proxy.size)
                    }
                )
                //SizePreferenceKey.self 값이 변경될때마다 실행되는 트리거를 실행하고
                //이렇게 구한 화면의 크기를 heigtVStackMain 변수에 넣어준다.
                .onPreferenceChange(sizePreferenceKey.self){ newSize in
                    self.heigtVStackMain = newSize.height
                    print("높이 :  \(self.heigtVStackMain)")
                }
            }
           
        
    }

 

자세한 설명은 주석을 통해 달아 놨습니다

 

이렇게 해당파일을 실행하게된다면!!

아이폰 화면

구해진 높이

이렇게 view의 높이가 구해진것을 확인 할 수 있습니다.

 

만약 view width 를 알 고 싶다면

 

self.heigtVStackMain = newSize.height 에서 height 를 width 로 변경해주시면 됩니다!

 

이상 모두들 즐코딩하세요!