How to get Height and Width of View or Screen in SwiftUI

Question

I'm using a drag gesture to change the Hue/Saturation of a Color object. The idea is that you can drag across the screen and see all Hue values (0.0 - 1.0), and the same top to bottom with Saturation.

I require the size of the Screen (or view, this is a single view app) in order to normalize/convert the CGPoint values into a range between 0.0 - 1.0, but I am unable to find anyway to get this information. There are many threads discussing this, but they usually talk about how to set the width/heigh of a View when I just want to retrieve it.

I have everything functioning, just that I am using hardcoded values to normalize it.

Answer 1

Look into GeometryReader . It allows you to get the size of the current view:

struct ContentView: View {
    
    var body: some View {
        GeometryReader { geo in
            VStack {
                Text("Hello World!")
                Text("Size:  (\(geo.size.width), \(geo.size.height))")
            }
        }
    }
}

And here is an example where you can drag on the screen to change the hue value:

struct ContentView: View {

    @State private var hue: CGFloat = 0
    
    var body: some View {
        GeometryReader { geo in
            ZStack {
                Color.white
                    .gesture(DragGesture().onChanged({ value in
                        self.hue = value.location.y / geo.size.height
                    }))
                
                VStack {
                    Text("Hello World!")
                    Text("Size:  (\(geo.size.width), \(geo.size.height))")
                    Text("Hue:  \(self.hue)")
                }.allowsHitTesting(false)
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

---

GeometryReader breaking your view layout? Check out this gist .

Answer 2

Just for completeness, the GeometryReader will return size of the container. As the OP explicitly referred to screen dimensions it may be worth to mention UIScreen class. We can use UIScreen.main.bounds.height and UIScreen.main.bounds.height to obtain screen dimensions without GeometryReader. It may be worth adding that GeometryReader results reflect size of the container, that will differ from what UIScreen returns

Example

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader {geometry in
            VStack {
                Text("Sizes")
                    .font(.title)
                VStack {
                    Text("Screen width via UIScreen: \(Int(UIScreen.main.bounds.width))")
                    Text("Screen height via UIScreen: \(Int(UIScreen.main.bounds.height))")
                    Text("This VStack height: \(Int(geometry.size.height))")
                    Text("This VStack width: \(Int(geometry.size.width))")
                }
            }
        }
    }
}

Results