Getting Started with the SwiftUI GeometryReader - Part 1

Mark Moeykens
Nov 13, 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


Free SwiftUI Picture Book



Screenshots for every code example? Yes! Get your FREE SwiftUI picture book here.

7 comments

Show earlier comments
q8yas q8
Nov 15, 2019
thanks brother , can upload the source code pls
Mark Moeykens
Nov 15, 2019
You'll be seeing the source code in Part 3 and 5 when they come out.
Rebaz Salahaddin
Nov 17, 2019
amazing Series and I am learning a lot from them so far. Please continue.
Deleted
Nov 29, 2019
Glad to hear it, Rebaz!
Melissa Bain
Nov 18, 2019
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!
Deleted
Nov 29, 2019
You're welcome, Melissa!