GeometryReader in SwiftUI to get a view's size and location | Continued Learning #6

The GeometryReader is one of the most powerful components in the SwiftUI universe. By adding a Geometry Reader to the view, we can find the contents exact size and location on the screen! We will first review how to implement this feature and then test out our knowledge with a real-world example. As you'll see in this video, we can use this data to make really cool animations by tracking the position of views as they move across the screen. Additionally, the GeometryReader is adaptive when the device rotates, so it is the perfect helper if you want to resize your view when a user switched from portrait to landscape mode (or vice-versa).
Next video: • Multiple Sheets in a S...
Last video: • ScrollViewReader to au...
🤙 WELCOME BACK 🤙
WEBSITE: www.swiftful-t...
DISCORD: / discord
GITHUB: github.com/Swi...
SAY THANKS: www.buymeacoff...

[@AZMerf]

Using an image instead of the simple rectangle really shows off this effect. I was trying to line up a text string above it but didn’t have much luck. It rotated but not along the same axis as the image so it looked weird. Ha! I figured it out. If I use the rotation effect on the entire VStack that contains the image and the text, they rotate together. Super Cool! I am getting the hang off this.

[@SwiftfulThinking]

Haha sounds like you got it down pat! Yea the GeometryReader is very tricky but once you figure it out it can become super useful.

[@user-yd9xy3rb4x]

You might have noticed, when you use rotation or rotationEffect methods ,you can use anchor in the initializer, that enables you to choose a side around which the rotation conducts, for example: .center, topLeading, .bottom and act. (they are of type UnitPoint). To make it clear.........
.rotationEffect(.degrees(45), anchor: .center)

[@user-zd1gj6jf8n]

this series is really great and perfect..!!! Make it More!!!!

[@SwiftfulThinking]

🙃

[@andrevdw747]

Cool tutorial 👏🏻

[@dugrut1325]

I replaced RoundedRectangle with: Image("mc\(index)").resizable().clipped().scaledToFit() / this worked great, scrolled through a lot of images, all correct

[@lococolony]

Very weak in maths so in My words its a Beauty ;-)

[@leezicai]

UIScreen.main.bounds.width is deprecated, GeometryReader is an option.

[@pitmanra]

Nick, at 6:34 you say that the GeometryReader is going to get the geometry (size) of the content that's inside it, and then you highlight the two Rectangles. But does it get the size of the two Rectangles, or does it get the size of the HStack that contains the Rectangles? Or does it not make any difference?

[@SwiftfulThinking]

You're right, the GeometryReader gets the size of the first item inside it, which is actually the HStack. We then use that size to set the size of the rectangle!

[@frederickjavalera558]

Nick, can you suggest how to solve the problem with GeometryReader where if you have a keyboard pop-up on the screen for the user to type, views using GeometryReader recalculate their height and shrink?

[@SwiftfulThinking]

Hi Frederick, I do need to make a keyboard avoidance video. Just a quick fyi, if you put your content inside a ScrollView or a List, it will automatically pop-up when the keyboard appears. This should be a default in SwiftUI. The view just needs to be scrollable.

[@josemanuelortizsanchez4983]

Is there any way to know which element is currently on the screen? What index is being displayed? Thanks.

[@anotherguycalledsmith]

The whole code would look cleaner if you avoided having rectangles being filled with a color - and directly used _Color.red_ and _Color.blue_ instead… ;-)
Why does setting something in _italic_ here on CZcams produce a link if containing a dot???
Thanks a lot, this video was really helpful ;-)

[@Nunny25]

Nice, some logic :-)

[@mourbatsalim4830]

please, how you can inactivate the hall code by adding // ?

[@SwiftfulThinking]

CMD + /

[@mourbatsalim4830]

@@SwiftfulThinking thank u alot im looking for her a long time

[@emdutt4012]

But in Xcode 14 you don’t need to use geometry reader to get the exact size in landscape mode..

[@satyadodda2386]

[@andresraigoza2082]

Hey Nick!! thank you so much 😊 And I'm trying to understand this cool effect better, so I put a text on the top of the screen to see how currentX changes on the preview. But when I scroll through the rectangles I notice that the value of currentX goes from 166 to -6,236. it's like the geometry is tracking only the first rectangle throughout the entire scroll view and not each rectangle separately. Of course we can see on the preview that the geometry is tracking each rectangle otherwise this wouldn't work, but I was expecting to see this too in the currentX value, I was expecting currentX to go from the width value of the screen to zero for each rectangle while I scroll. I'm a little confused by that and I was hoping that maybe you could clarify this a little for me please. Thanks!!!

[@SwiftfulThinking]

You can use multiple geometry readers if you need, they will read whatever frame they are drawn on

[@dillontrembath]

0:21

[@fermatslasttheorem6298]

GeometryReader is one of the worst and buggiest components. It works well if the view will take the entire screen, but it doesn't work well if you need the size of a smaller view on the screen. Every time I use it, it adds a bunch of white space because it attempts to fill the parent view, which is dumb. SwiftUI needs a way to get the view's size WITHOUT affecting the view itself. GeometryReader fails in that regard, and even in your example, it fails which is why you needed to explicitly give it the frame. But this does not work for dynamic values.