Hi all, in SwiftUI, the GeometryReader is a powerful view that allows you to read the size and position of its parent view. This can be extremely useful when you need to position child views relative to their parent, or when you need to size a view based on the size of its parent. In this blog post, we'll explore the GeometryReader and how you can use it in your SwiftUI apps.

The code of this demonstration is available here.

What is Geometry Reader?

The GeometryReader is a SwiftUI view that provides a geometry proxy to its child views. This proxy contains information about the size and position of the parent view, as well as the size and position of the child views. The geometry proxy is passed as a parameter to a closure that you provide, allowing you to read and use this information in your SwiftUI code.

Basic Usage

To use GeometryReader, you simply need to embed it in a view hierarchy and provide a closure that takes a GeometryProxy parameter. For example, consider the following code:

GeometryReader { proxy in
    Text("Width: \(proxy.size.width), Height: \(proxy.size.height)")
}

In this example, we're using GeometryReader to read the size of its parent view and display the width and height using a Text view. When you run this code, you'll see the width and height of the parent view displayed on the screen.

Positioning Child Views

One of the most common use cases for GeometryReader is to position child views relative to their parent view. For example, consider the following code:

VStack {
    GeometryReader { proxy in
        VStack {
            Text("Parent Width: \(proxy.size.width)")
            HStack(spacing: 0) {
                Text("Left")
                Spacer()
                Text("Right")
            }
        }
    }
}
.padding(.horizontal, 20)

In this example, we're using GeometryReader to position two Text views horizontally centered within its parent view. By using a Spacer view, we're able to position the two Text views at the left and right edges of the parent view, respectively. When you run this code, you'll see the two Text views are positioned correctly within the parent view. And there’s a padding view modifier providing a horizontal padding of 20 points for the parent VStack, resulting in a width of 353 points. ( = 393 - 2 * 20 )

Sizing Child Views Based on Parent Size

Another common use case for GeometryReader is to size a view based on the size of its parent. For example, consider the following code:

HStack {
    GeometryReader { proxy in
        Circle()
            .stroke(lineWidth: 2)
            .foregroundColor(.cyan)
            .frame(width: proxy.size.width / 2, height: proxy.size.width / 2)
    }
}
.frame(width: 100)

In this example, we're using GeometryReader to size a Circle view based on the size of its parent view - an HStack with a width of 100 points. By dividing the parent view's width by two, we're able to make the Circle view half the size of its parent view. When you run this code, you'll see a Circle view that is sized based on the size of its parent view.

The screenshot below shows an HStack with a width of 100 and a stroked circle with a diameter of 50 (as defined in the frame view modifier).

Conclusion

In conclusion, the GeometryReader is a powerful view that allows you to read the size and position of its parent view, as well as the size and position of child views. This can be extremely useful when you need to position child views relative to their parent or when you need to size a view based on the size of its parent. By using GeometryReader in your SwiftUI code, you can easily control the size or location of a child view, dynamically based on its parent view.

That’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!