[SwiftUI] 디바이스의 width, height 구하기

SwiftUI에서 디바이스의 사이즈 (width, height)를 구하는 방법은 2가지가 있다.

1. GeometryReader 사용하기

import SwiftUI

struct ContentView: View {

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Color
                    .yellow
                    .frame(
                        width: geometry.size.width,
                        height: geometry.size.height
                    )
                
                VStack {
                    Text("Width \(geometry.size.width)")
                    Text("Height \(geometry.size.height)")
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

GeometryReader에서 height는 safeArea를 제외한 부분을 나타낸다.

safeArea는 사이즈가 아니라 EdgeInsets이기 때문이다!

 

만약 safeArea를 포함한 모든 영역의 너비, 높이를 알고 싶다면, edgesIgnoringSareArea(.all)을 사용하면 된다.

struct ContentView: View {

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Color
                    .yellow
                    .frame(
                        width: geometry.size.width,
                        height: geometry.size.height
                    )
                
                VStack {
                    Text("Width \(geometry.size.width)")
                    Text("Height \(geometry.size.height)")
                }
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

 

때로는 디바이스 크기를 미리 알아야 할 때가 있다. 이 때는 UIScreen을 사용하면 된다.

 

2. UIScreen 사용하기

import SwiftUI

struct ContentView: View {

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Color
                    .yellow
                    .frame(
                        width: UIScreen.main.bounds.size.width,
                        height: UIScreen.main.bounds.size.height
                    )
                
                VStack {
                    Text("Width \(UIScreen.main.bounds.size.width)")
                    Text("Height \(UIScreen.main.bounds.size.height)")
                }
            }
        }
    }
}

struct ContenttView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

그럼 어떤 상황에서 GeometryReader를 사용하고, 어떤 상황에서 UIScreen을 사용해야할까?

import SwiftUI

struct ContentView: View {

    var body: some View {
        VStack {
            VStack {
                GeometryReader {geometry in
                    VStack (alignment: .leading){
                        Text("View 1").bold()
                        Text("Screen Width: \(geometry.size.width)")
                        Text("Screen Height: \(geometry.size.height)")
                    }
                    .padding()
                    .background(Color.green)
                    .foregroundColor(Color.white)
                }
            }
            
            VStack {
                GeometryReader {geometry in
                    VStack (alignment: .leading){
                        Text("View 2").bold()
                        Text("Screen Width: \(geometry.size.width)")
                        Text("Screen Height: \(geometry.size.height)")
                    }
                    .padding()
                    .background(Color.red)
                    .foregroundColor(Color.white)
                }
            }
            .frame(width: 250, height: 250)
            
            VStack {
                let screenSize = UIScreen.main.bounds.size
                GeometryReader {geometry in
                    VStack (alignment: .leading){
                        Text("Screen Size").bold()
                        Text("Screen Width: \(screenSize.width)")
                        Text("Screen Height: \(screenSize.height)")
                    }
                    .padding()
                    .background(Color.red)
                    .foregroundColor(Color.white)
                }
            }
            .frame(width: 250, height: 250)
        }
    }
}

struct ContenttView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

View1에서는 GeometryReader를 사용해서 상위 뷰에서 제공된 크기를 확인했다.

View2에서도 GeometryReader를 사용했지만, 이 경우 상위 뷰의 크기는 프레임에 의해 고정된다. 그래서 Width와 Height가 250인 것을 확인할 수 있다.

View1, View2 모두 GeometryReader를 사용했지만 다른 크기를 가져온다.

 

하지만 UIScreen.main.bounds를 사용하면, 프레임 값을 줘도 Screen Width, Height가 일정하게 나오는 것을 확인할 수 있다.

상황에 따라 적절한 것을 선택해서 사용하면 된다.