Hi, Alex here from rebeloper.com. In today's video I want to talk about a topic that a lot of developers are terrified with.
And that is GeometryReader
If you are interested in building out this project with scroll animation then make sure you keep on watching.
Hit that subscribe button, open up xCode and let's dive in.
So let's take a look at what we are build out today.
So I already started the demo project here and as you can see here we have an image, a text
and some other text with different frames, okay. And the animation is this one.
We are going to build out this awesome scrolling animation for this cards, okay.
So let's jump right into it. Let me just close this and minimise it
And go ahead and take a look at the link down below in the description for the project that you can see here.
I already put in some work here to, yeah just talking about the GeometryReader.
Okay, so first of all we have two tab views, content view and the card view and we are going to talk about
first about the content view. And as you can see without the GeometryReader and
without adding any frame to this elements, this views
this is how it looks like. So we have a logo image
and two texts here. And this is how it's add it to our VStack.
And please remember that we have here a ZStack because we are going to use the GeometryReader.
So what is exactly the GeometryReader?
Well it gives us the geometry of the incapsulated view.
Again. It gives us the geometry of the incapsulated view.
So let me just show you what I mean by that.
And it can be any view. It can be a VStack, image, text and so on.
So I am going to use this VStacks geometry to layout this three views.
And I am just going to encapsulate the VStack into the GeometryReader, there we go.
And it returns here a geometry and in, okay.
And all we have to do now is move all of this VStack up.
Okay, I believe I got that right and let's copy it out, like cut it out, cmd X, there we go.
And just paste it in there and this error should go away, okay.
So now as you can see we have this VStack inside our GeometryReader.
And now we have at our availability this geometry of the VStack.
And I am just going to comment this out, I'm just going to use the images frame
I'm going to use the geometry to set up the frame of this logo image.
And the width will be the geometrys size width and again this VStack is inside this CardView
which encapsulates all of our screen. So it's entire width of our screen.
and of course we are going to use the height / 4 because that's what we want. Why not?
And while we are at it let's do the same for our first text and our second text.
And as you can see the hole height of these, so it will fill out the hole height of our screen.
Because, yeah 4, 2, 4. So let's build again and this is how easy it is.
So maybe you are scared, ohh what is this new GeometryReader? Well is just that.
And there we go, we have this image here, the logo image. The rebeloper text and
the layout with GeometryReader text, okay.
So let's move on to the second tab of our project here and if you don't know how to create tabs go ahead
and take a look at the older video that I have created about the tab view.
So this is our list here and it's kind of boring. So we are going to add a spin to it literally.
And let's go to our ContentView and as you can see I have already added here of course commented out
Rotation3DEffect with an angle and an axis. Now this is very new complicated effect in SwiftUI,
what you need to know is that we are going to use the geometrys frame and
and we are going to use the global frame. As you can see we are going to use the global
which means the hole screen, okay. And yeah, we need to converted to Double because this is a CGFloat.
Pains of everyday coding.
And we are going to need our geometry again.
And here we have a ForEach loop with an image. And we are going to add a GeometryReader to our image.
So geometry reader, there we go. Let's add these only, and as you can see I'm leaving the frame out because
I want to set this images frame on the GeometryReader. It will make sense as I just type this out.
Just a second here. There we go. Let's select all and hit ctrl I to make the indentation correctly, okay.
So now I need to add in here the geometry and I will just copy here so we have no typos and in, okay.
Now we have the geometry, it's time to uncomment this line, hit ctrl I for indentation and that should fix it, okay.
Let's build and run and see, but before we do let me just be clear again. So we have set a frame for this geometry
which intern is reading the frame of this image, well basically we did set the frame for this image
and than we are just using the geometry which could be the size or I don't know, the frame of the geometry
to calculate the Rotation3DEffact angle, okay.
It's a mouthful I know but let's just build and run and see what this effect does.
And maybe if you rep your head around it you will understand, okay.
And if I scroll as you can see we are adding this nice angled effect. And let me just dived this by 40
so we can have a little smother animation.
Okay! Let's go to the animation here, awesome. Really really nice! Okay!
That is it for our GeometryReader.
If you did like it go ahead and give a #rebeloper in the comment down below.
Now so far in this video I talk a lot about scroll animations using GeometryReader.
But I want you to hit that notification bell beacuse in my next video I'm actually gonna talk about
Dark Mode in SwiftUI.
If you are interested make sure you hit the notification bell so you don't miss that video.
In the mean time while you wait for that video make sure you also check out these two videos
that I have over here, I talk a lot about iOS development, SwiftUI and how to code smarter.
So make sure check out these videos as well. And as always I will see you in the next one.