55

I need to get width of a rendered view in SwiftUI, which is apparently not that easy.

The way I see it is that I need a function that returns a view's dimensions, simple as that.

var body: some View {
    VStack(alignment: .leading) {
        Text(timer.name)
            .font(.largeTitle)
            .fontWeight(.heavy)
        Text(timer.time)
            .font(.largeTitle)
            .fontWeight(.heavy)
            .opacity(0.5)
    }
}
0

4 Answers 4

108

The only available mechanism to get the dimension of a view, that is auto-resized by SwiftUI, is the GeometryReader. The GeometryReader is a proxy view that returns the dimensions of the container in which your view gets rendered.

struct SomeView: View {
    
    @State var size: CGSize = .zero
    
    var body: some View {
        VStack {
            Text("VStack width: \(size.width)")
            Text("VStack height: \(size.height)")
            
            GeometryReader { proxy in
                HStack {} // just an empty container to triggers the onAppear
                    .onAppear {
                        size = proxy.size
                    }
            }
        }
        
    }
}

The printed size is the dimension of the VStack.

How to get the dimension of a View

Now that we know that the GeometryReader gives us the size of the container, the usual follow-up question is: how do I use it to get the size of a specific view?

To do this we need to move the geometry reader one level below our targeted view. How? We could add an empty background that gets the size of the targeted view and sends this information back to a Binding.

Let's create a SizeCalculator ViewModifier so that we can use this functionality on every view:

struct SizeCalculator: ViewModifier {
    
    @Binding var size: CGSize
    
    func body(content: Content) -> some View {
        content
            .background(
                GeometryReader { proxy in
                    Color.clear // we just want the reader to get triggered, so let's use an empty color
                        .onAppear {
                            size = proxy.size
                        }
                }
            )
    }
}

extension View {
    func saveSize(in size: Binding<CGSize>) -> some View {
        modifier(SizeCalculator(size: size))
    }
}

The job of the SizeCalculator is to add a GeometryReader as the background of our target view. On appear, so after SwiftUI has rendered the content, it will send the size back to the Binding.

Usage:

struct SomeView: View {
    
    @State var size: CGSize = .zero
    
    var body: some View {
        VStack {
            Text("text width: \(size.width)")
            Text("text height: \(size.height)")
            
            Text("hello")
                .saveSize(in: $size)
        }
        
    }
}

how to get the size of a view in swiftUI

7
  • 1
    If I am not to calculate dimensions, then how would I go about implementing a layout similar to this dropbox.com/s/p4m47u3fhup7o8j/2.png?dl=0 Aug 20, 2019 at 16:27
  • 1
    I mean, I need to know the width of a cell to be able to calculate the numbers of cells in a row. Aug 20, 2019 at 16:28
  • @MaxPower mmh I suggest you to open a new question with a title like that "How to calculate number of cells in a Row" anyway try to look at this github.com/Q-Mobile/QGrid Aug 21, 2019 at 9:05
  • 3
    @GiuseppeSapienza thanks for this nice solution. Do you know why the call of DispatchQueue.main.async {...}is necessary in order to work? I would have thought that makeView() is running on the main thread already.
    – Lindemann
    Aug 31, 2021 at 6:23
  • @Lindemann no it's not necessary anymore. I have updated the answer with a better approach. Feb 26, 2023 at 10:55
47

Getting the dimensions of a child view is the first part of the task. Bubbling the value of dimensions up is the second part. GeometryReader gets the dims of the parent view which is probably not what you want. To get the dims of the child view in question we might call a modifier on its child view which has actual size such as .background() or .overlay()

struct GeometryGetterMod: ViewModifier {
    
    @Binding var rect: CGRect
    
    func body(content: Content) -> some View {
        print(content)
        return GeometryReader { (g) -> Color in // (g) -> Content in - is what it could be, but it doesn't work
            DispatchQueue.main.async { // to avoid warning
                self.rect = g.frame(in: .global)
            }
            return Color.clear // return content - doesn't work
        }
    }
}

struct ContentView: View {
    @State private var rect1 = CGRect()
    var body: some View {
        let t = HStack {
            // make two texts equal width, for example
            // this is not a good way to achieve this, just for demo
            Text("Long text").overlay(Color.clear.modifier(GeometryGetterMod(rect: $rect1)))
            // You can then use rect in other places of your view:

            Text("text").frame(width: rect1.width, height: rect1.height).background(Color.green)
            Text("text").background(Color.yellow)
        }
        print(rect1)
        return t
    }
}

Here is another convenient way to get and do something with the size of current view: readSize function.

extension View {
  func readSize(onChange: @escaping (CGSize) -> Void) -> some View {
    background(
      GeometryReader { geometryProxy in
        Color.clear
          .preference(key: SizePreferenceKey.self, value: geometryProxy.size)
      }
    )
    .onPreferenceChange(SizePreferenceKey.self, perform: onChange)
  }
}

private struct SizePreferenceKey: PreferenceKey {
  static var defaultValue: CGSize = .zero
  static func reduce(value: inout CGSize, nextValue: () -> CGSize) {}
}

Usage:

struct ContentView: View {
    @State private var commonSize = CGSize()
    var body: some View {
        VStack {
        Text("Hello, world!")
            .padding()
            .border(.yellow, width: 1)
            .readSize { textSize in
                commonSize = textSize
            }
        Rectangle()
                .foregroundColor(.yellow)
            .frame(width: commonSize.width, height: commonSize.height)
        }
    }
}
4

In reference to Giuseppe Sapienza's answer, by adding an .onChange modifier to SizeCalculator

.onChange(of: proxy.size, { oldValue, newValue in
    size = proxy.size
})

the ViewModifier will respond dynamically to changes in the size of the view being measured.

4
  • Shouldn’t it be size = newValue?
    – soundflix
    Sep 2, 2023 at 21:19
  • I think it doesn’t need onChange. If the view changes, onAppear will trigger again.
    – soundflix
    Sep 2, 2023 at 21:22
  • First, yes. It should be size = newValue. Sorry about that. Sep 4, 2023 at 4:24
  • However, the onChange is necessary, at least in my use case. I use the saveSize modifier on a VStack containing multiple Texts. I use a sheet to update the Texts (rather than making them TextFields). (This is a SwiftData app, and the Texts display the value of attributes.) In this case (where the contents of the VStack is changed by a sheet), onAppear is not called when the sheet is dismissed. The onChange modifier is needed to detect the size change in this case. Sep 4, 2023 at 4:33
0

There's a much simpler way to get the width of a view using GeometryReader. You need to create a state variable to store the width, then surround the desired view with a GeometryReader, and set the width value to the geometry inside that width. For instace:

struct ContentView: View {
    @State var width: CGFloat = 0.00 // this variable stores the width we want to get
    
    var body: some View {
        VStack(alignment: .leading) {
            GeometryReader { geometry in
                Text(timer.name)
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                    .onAppear {
                        self.width = geometry.size.width
                        print("text width: \(width)") // test
                    }
            } // in this case, we are reading the width of text
            Text(timer.time)
                .font(.largeTitle)
                .fontWeight(.heavy)
                .opacity(0.5)
        }
    }
}

Note that the width will change if the target's view also changes. If you want to store it, I would suggest using a let constant somewhere else. Hope that helps!

1
  • 2
    // in this case, we are reading the width of text No, we are not. We are reading size of VStack
    – Farid
    Feb 24, 2023 at 16:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.