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

what is up everyone welcome back i'm nick this is swiffle thinking and in this exciting video we're gonna look at the geometry reader now the geometry reader is a little hard to use if you've ever tried to use it before but it is super super useful and so extremely handy to any swift ui developer so by using the geometry reader we can basically get the exact size and location of objects on the screen so when we're developing swift ui applications most of the time we're not worried about the exact location of an item on the screen because we're using spacers and h stacks and we're pushing items all different directions but sometimes when you're building complex applications you do want to make sure certain things are specific sizes or maybe specific locations on your app and to do that we can use the geometry reader now there are so many use cases for the geometry reader and i can't cover them all in this quick intro video but we are going to look at using a geometry reader with a scroll view so we can add animations into our app when items are scrolling onto or off of our screen and i think from that use case you'll begin to see how powerful this geometry reader really could be one final thing i want to mention before we get into this is that i've found that the geometry reader does get a little expensive when you're using a lot of geometry readers on the screen at one time so i've run into cases where we had so many geometry readers that it starts to slow down the ui a little bit and for that reason i would definitely recommend always trying to build your screens without using a geometry reader and if you can't if you need a geometry reader then go ahead and add one because i've found that a lot of beginner developers end up using the geometry reader really often because it is super handy but they use it a lot of places where they don't really need to so my quick recommendation is try not to use it but there are cases where you definitely need it and then go ahead and use it in this video we're going to quickly look at some of those cases on when you might need it when you might not need it this video is going to be a lot of fun but it is going to be a little hard so i recommend grabbing a coffee if you don't have one and let's get coding welcome back everyone in this video we are doing the geometry reader so let's right click on the navigator create a new file it's going to be a swift ui view and as we always do let's call it by the name of what we're going to do so geometry reader boot camp go ahead and click create click resume on the canvas and let's get set up here and we're going to start out real basic i'm going to add an h stack to the screen i'm going to add a rectangle with a dot fill of color.red then i add another rectangle with a dot fill of color.blue okay let's remove the spacing in between them so this h stack let's add spacing and make sure it's zero instead of the default amount and let's put ignores a safe area on the entire h stack so it goes to the edge of the screen now it's super convenient that swift will automatically resize our objects for us so right now we have two rectangles in a single h stack and swift uis automatically made both of those rectangles the same size so that's super convenient if we wanted them to be the exact same size but what if we wanted one of these rectangles like the red rectangle to be two-thirds of the screen and the blue to be only one-third well the simple way you might think of doing that is by calling dot frame and setting the width and we can set it equal to ui screen dot main dot bounds dot width times zero point times 0.666 and that will be two thirds of the screen and this looks good and it works uh but let's run this on a simulator quick so i'm going to take this geometry reader bootcamp i'm going to open up our app.swift file make this geometry reader boot camp at the first file in our app and let's click run on the simulator i'm running on iphone 12 and let's check it out so wrap here work looks like it's working well our red is two-thirds of the screen the blue is only one-third but remember this two-thirds is based on the ui screen.main.bounds.width so that's the distance between this edge of the iphone and this edge of the iphone it's not the distance between the top and the bottom so if i were to rotate the device we'll see that the red is now actually not even like one third because the width of this red is still two-thirds of the width of the iphone which is from this height which is from this edge now to this edge now so the width stayed the same when we rotated it so it stayed exactly this many pixels but we wanted it to actually be just two thirds of the current screen's width not the width of the iphone unfortunately when we call this uiscreen.main.bounds.width it is not adaptive to the device rotation so if we rotate the device as you saw it didn't work well this is where the geometry reader comes in and the geometry reader is is just basically going to give us the height and width of the current content on the current device in the current landscape or portrait mode so back in our code outside of this h stack i'm going to add a geometry reader open the parentheses and we use the content and just like the scroll view reader i don't like this extra content word here so we're gonna instead just do geometry reader open the brackets geometry in alright so we can get rid of this first version now let's put our h stack in the geometry reader so when we're inside this geometry reader this reader is going to get the geometry which is the size basically of the content that's inside it so with that we can use this geometry reader to tell the height and width of the actual content so instead of calling uiscreen.main.bounds we will call geometry.size.with so the geometry now is going to change when our device orientation changes so click run on the preview one more time and now we have the red is two-thirds of the screen and if i rotate it the red is still two-thirds of the screen that's because the geometry in the geometry reader updated to our current device settings which is now in landscape mode so this is where the geometry reader comes in when you really need to know the exact geometry of the area that you're working inside so this is obviously great if our device rotates and if your device is rotating from horizontal from landscape to vertical geometry reader is going to come in handy but if your device is just available in portrait mode then i would use the uiscreen.main.bounds because what i've come to find is that the geometrator is very expensive it costs a lot of computing power to use and if you put too many geometry readers and the geometries are doing a lot of tasks on the screen i've noticed that sometimes it will slow down the app just slightly so personally my recommendation is to always create your screen without the geometry reader first and try to get it to do exactly what you want it to do and if you can't do it without a geometry reader then go ahead and add one but i would recommend trying to find other solutions before forcing to use one if possible but anyway that's enough of my spiel let's now play around with this geometry reader a little bit because one of the other cool things we can do in a geometry reader is get the exact location of an object inside the geometry so let's do a quick example here i'm going to jump back into xcode let's click resume on the canvas we're going to start fresh so i'm going to comment this out and let's add a scroll view in here open the parentheses i'm going to use the completion and we're going to make this a horizontal scroll view because we never use horizontal scroll views shows indicators will be false and then for the content let's add an h stack open the brackets and let's do four each open the parenthesis there we go let's do the data and range so we'll do zero dot dot less than 20 maybe for the content we'll hit enter we'll get rid of this and just make this the index and for each of these 20 let's add a rounded rectangle the corner radius of 20. let's give it a dot frame with a width of maybe 300 and a height of 250 that looks good we don't need the alignment so let's get rid of that and let's add a little bit of padding between each of them so let's just add padding around that alright so now let's plus press play on the simulator and we have our scroll view we can scroll through each of these items it's working it looks well it looks good but now i want to add a little bit of animation so that when items are coming from the beginning of the screen or the end of the screen i want to animate it a little bit so what i want to do is get the x position of the rectangle within this area within the screen right now it's working but we don't know where this rectangle starts we don't know what point on the screen this actually is so we can use a geometry reader to do that so i'm going to wrap each of these rectangles in a geometry reader so let's do geometry reader open the brackets geometry in and then i'll put the rounded rectangle inside the geometry reader now the geometry reader needs to know the exact size of these items so even though we have a frame on this rectangle the geometry reader doesn't know the actual size of it so instead of putting the frame here and the padding let's put that onto the geometry reader so now we're back to where we started but we're inside a geometry reader so now we can access that geometry and we're going to use a modifier called dot rotation 3d effect and the rotation and let's and let's start with this angle here so put the angle as degrees of 10 and then because we're using a 3d effect we can rotate on the x the y or the z axis and we're going to use the y which is already set to 1. so you can see here that this item is kind of looks like it's tilted to the left a little if i increase the angle to 40 it'll be tilted even more but let's put it back down to 10 and we're going to do is use the geometry to change the degrees to change the angle when it's moving across the screen so it's going to be a little bit of logic into that so i'm going to add a function outside of the body so let's put it outside of the body and normally i put it below the body but because we have this extra code here i'm just going to put it on the top above the body so let's call funk get percentage and open close parentheses and open the brackets in this percentage we're going to need to pass in this geometry for each of these rectangles so as a parameter here we'll add geo of type geometry proxy now the proxy is the value that's coming out of this and then we can add some logic here and the starting point of this animation is going to be the center of the screen so when it's in the center i want this angle to be zero so we're going to start by saying let max distance equals ui screen dot main dot bounds dot width divided by two so this will get the center of the screen and then we're going to say let current x equals geo which is the geometry of that rectangle dot frame in and you can make custom coordinate spaces in your app which we haven't done yet but i'm just going to use the dot global which is just the frame in the entire screen and then we're going to get the dot min x dot mid x and this is going to give us the middle x coordinate of the rectangle so right in the center and then finally i want to return the percentage to the left or to the right it is so if it's at one if it's right in the center if this current x is equal to the max distance it's going to give us 1.0 so i'm going to return 1 minus the percentage which will be the current x divided by the max distance and of course it's giving us this error that it's an unexpected non-void return that's because we haven't told this function to return something so we can add an arrow here we want to return a double we're then going to need to convert this cg float into a double which it's giving us a fix for already so let's just click fix and it adds the double word and then wraps it in parentheses and now we're getting the percentage to the left or to the right of the center that the item is so in this degrees let's call get percentage pass in our geometry and then multiply the percentage times an angle so let's do 10. click resume on the canvas and now it looks like it is working but the angle is too low so let's change this angle to maybe 40. let's try it again and as we scroll our items are now looks like they're rotating in from the right side and rotating out to the left side so this really cool effect by using the geometry reader because the geometry reader is telling us where each of these items are within the global coordinates and i'm not going to do it but you can also use this geometry reader on a vertical scroll view if you wanted to animate maybe the items coming onto the top of the screen or maybe animate their opacity and then also leaving the screen down at the bottom but the concept is the exact same you basically just need to use the the dot frame in function to get the location of your object within the coordinate space and then using that and then using that location you can add a bunch of really cool animations all right everyone that's it for this video there's a lot more that we can do with the geometry reader that i'm not going to cover right now but we're going to start using this in some projects going forward so i wanted to introduce you guys to the basics here the geometry is super powerful super useful so definitely get comfortable using it and as i mentioned before i would definitely recommend trying to not use the geometry reader unless you absolutely have to because it is expensive it does cost a lot of computing power to put into your apps and it can in cases slow down your apps if you have like a lot of logic that is using the geometry all right thank you guys for watching as always i'm nick this is swiffle thinking and i'll see you in the next video

Channel: Swiftful Thinking

Views: 2,590

Keywords: SwiftUI GeometryReader, SwiftUI GeometryReader(), Geometry Reader, SwiftUI Geometry Proxy, How to use geometry reader, How to use geometryreader, How to use geometry reader SwiftUI, how to add geometry reader SwiftUI, SwiftUI geometry proxy, SwiftUI GeometryProxy, GeometryReader help, Geometry reader not working, SwiftUI geometry, SwiftUI get size of view, SwiftUI what is GeometryReader, What is GeometryReader SwiftUI

Id: lMteVjlOIbM

Length: 16min 2sec (962 seconds)

Published: Sun Apr 04 2021