Getting Started with SwiftUI's Geometry Reader - Part 1
November 14, 2019


Let's cover the SwiftUI geometry reader over the next few days starting with the basics. This view can be a little confusing at first. It's very powerful and solves some problems as you will be seeing.

📙Follow along with the FREE book sample: https://www.bigmountainstudio.com/free-swiftui-book 


First of all, it's a container that will push out to fill up all available space. You can add child views that will center themselves within.

This may not be the intended use but that is what is rendered at this time. I can't guarantee this is how it'll be rendered in the future either. In beta, child views appeared in the top left of the geometry reader.

Take a look at this example


struct Introduction: View {
    var body: some View {
         VStack {
            Text("GeometryReader")

            Image(systemName: "bolt.circle.fill")

            GeometryReader { geometry in
                 Image(systemName: "bolt.circle.fill")
            }.border(Color.green)

        }.font(.largeTitle)
    }
}

The green outline defines the extent of the geometry reader. It's pushing up the other views to the top.

It's effectively the same as this code:

struct Introduction: View {
    var body: some View {
         VStack {
             Text("GeometryReader")
             Image(systemName: "bolt.circle.fill")
             Spacer()
             Image(systemName: "bolt.circle.fill")
             Spacer()
         }.font(.largeTitle)
    }
}

But the geometry reader can do so much more...

This is your first little introduction to using the geometry reader. It's a container view but yes, it can do much more.

Later, I'm going to show you how to create this "sticky header" effect:


And this parallax effect where the background scrolls more slowly than the rest of the content:


Before we get there we need to cover some basics that are also covered in the free book sample above. Keep following along and we'll cover them together. 😃

Continue to Part 2

7 comments
Write a comment...
Melissa Bain

Thanks for putting this together. I am really looking forward to returning to development and jumping into SwiftUI. I have been apprehensive due to the new technology. This is great motivation for me. Thank you!

Mark Moeykens

You're welcome, Melissa!

Rebaz Salahaddin

amazing Series and I am learning a lot from them so far. Please continue.

Mark Moeykens

Glad to hear it, Rebaz!

q8yas q8

thanks brother , can upload the source code pls

Mark Moeykens

You'll be seeing the source code in Part 3 and 5 when they come out.

Chris Parker

Looking forward to this series Mark. Looks amazing.

Explorer

Free
Gain exclusive access to Big Mountain Studio 
  • News
  • Tutorials
  • Updates, etc.
When signed up, you get posts delivered right to your Inbox!
Includes access to 1 product:
Get access