Swift: Firebase 3 - How to Implement Image Zoom (Ep 19)

hey what is up guys welcome back to the channel and welcome to episode 19 of our firebase 3 real-time chat application video tutorial kind of feels like forever since I've last recorded at one of these coding session videos so do apologize if I am kind of rusty as I'm trying to get back into the groove of coding alive again so let's go ahead and start with what we want to make inside of today's video lesson so to start I'm going to show you what we have in a simulator and we're logged in as Jon Snow currently with two chat logs going on one for stamped our lead and the other one for it great now Sam Charlie contains a couple of different varying messages some are text and some are images so that was all done in the last episode and probably depa so before aswell so nothing new here what we want to implement today is the exciting part and I have on my phone what is what you're seeing on the left side inside of QuickTime and as I tap on one of these images here you notice how it kind of zooms in and then if you tap on it again it kind of zooms out right so quite nifty quite cool you see a lot of this type of animation inside of even Facebook's app it kind of zooms in and you can dismiss it by dragging it down zoom we're going to learn how to actually zoom in the image like this today and that's what we're going to do so not actually all that hard it just takes a lot of many many steps and I'm gonna show you exactly how to perform all these tiny little steps to get to this final animation here so there we go and so some of you guys have seen my previous video where I show you how to do this with frames and CG Rex so to make it a little bit more interesting I'll show you guys how to do this with iOS 9 constraints so that the layout actually performs a little better so let's get started with the current project right here I'm just going to run it make sure we have something good to start out on and here we go we have Sam Carly and clicking out here nothing happens so the first thing I want to do is to actually trigger a print statement every time I click on one of these images here and to do that we go into chat message cell go to this message image view guy here and I'm going to add a tap gesture recognizer you're on imagery so image view add gesture recognizer United tap gesture target self and selector is pound selector with a function of handle zoom tap I think that's a good name for our function here and zoom tap I'll create as a function down here and there we go so now what do we do we can actually add a tap gesture in here as the parameter for the selector function and where you go and if we want to actually use this self variable here you see how it's giving us a compiler error we actually need to say lazy bar so don't get too hung up on what this means just know that the self works kind of like this alright so to also trigger this tap gesture recognizer some of you guys probably know this already but you have to set user interaction enabled equals true now if you look at the property and look at the documentation on the right you can actually see that it's defaulted to false right there so let's make sure to turn it on in order for the interaction to work so running and you notice if I click on this you would expect that print statement to show up we don't see it or you expect something to occur for example print handling zoom tap yeah and here we go let's run it and make sure the print statement shows up or not and we click and click click click click click so you notice how the print statement doesn't show up and that's because this text view is actually on top of the image so if I do for example background color equals UI color dot yellow color and run this you'll see that the yellow is actually on top of it the reason why it's invisible is because it's clear color over here so topping it to yellow now you'll see this right here and you click on the edge you'll see that you have the zooming tap being printed on the bottom so to fix this minor modern issue let's go to chat log controller and inside of I think it's self or row at our self or item at index path we call this method called setup cell I think or even down here we can actually do this so if it's a text message so this is a a text message and not a image message we can actually say cell that text view that hidden equals false and then down here we'll say cell dot text view hidden equals true and this is just going to toggle the visibility of that yellow text view everytime we render one of these messages cell guys and here we go so that's pretty nice if we go back to chat messages cell remove this yellow color guy we should be okay so tap that tap we get this guy in here now I want to kind of let you guys in on something that I'll call a pro tip here so pro tip don't perform a lot of custom logic inside of a view class okay so this chat message cell is a Buchan view class and we don't want to handle or perform all this zooming animation that zooms in these cell images inside of this view class we actually want to perform it inside of a chatlog controller so basically we want to delegate the zooming animation to the controller class and that's the tip of the day and to do that we actually need to get a reference to this chat lock controller somehow and how do we do that right well first we have to do this here so where's self or self or item at index path I want to actually give the reference on the cell chat message sell gay the cell I want to say something like chat log controller equals self right but we can do this yet because the cell doesn't have this property on it so why don't we go back to the cell and then on the top and give it this property here that's the bar chat log controller is chat log controller optional like that and there we go so now this cell has a reference to the chat log controller and if we go all the way down here is my zooming logic so my custom zooming logic and this will be a function called a handle or perform zoom in for an image view and this will be image view UI image view okay all right perhaps this should be called starting image view this will be a little bit clearer as I type out the logic in here so image view alright so I have this function here now and I'm going to copy this function and inside of chat messages cell where am I printing this handle tab soon guy is that up here I'm going to call self dot chat log controller and that function there so let me build perform the zoom in for starting image view and what is this image view guy here well this image view is actually whatever I tapped on right so to get to that view all we have to do is say let image view equals tap gesture dot image see view that gives us the view and we have to cast down to a UI image view like that so what we actually need to do is say image view bang I believe let's see what that'll do so I'll run this application down you'll see the chat log controller do nothing actually so why don't we add some code in here that will print out performing zoom in logic and controller okay so that was pretty good I'm going to run it on application and verify that this print statement is actually being printed up so click click click performing a zoom in logic and controller alright good stuff so going back to the chat message cell I'm going to remove that print statement here if you actually wanted to do is a little bit safer you can unwrap it like this and move this code in here and I think we're going to remove the bang all right pretty good this way doesn't crash if the image is not a a huge image uiimageblock good stuff now going back to this chat log controller we actually want to perform some bit of code to actually render out the zoom logic so let me just unlock my phone here and once you perform this zoom right so how do we do this because it's pretty tricky if you don't split it up into a couple of different steps the first step is to actually perform a rendering of a read view on top of the actual clicked image like that so this will actually require us to figure out the frame for this image view which isn't too hard and then we add this read view into the entire application so I'm going to show you how to do that right now inside of this function here so let's see let's use a variable called starting frame so starting frame is going to equal starting image view image view dot superview so I'm going to type this out first convert rect and this will say starting image view dot frame is the rect and view is no so let's just print out what the starting frame is and then I'll kind of perhaps explain to you what this does so let's run the application and here we go we get our sound Charlie chat line and we click this right here you notice how it says that the frame for this entire cell is at 167 118 so that's 167 and 118 click down here you notice how the Y value keeps going down which is good and this is exactly the frame inside of the entire application and that'll be helpful to us because we will want to add this frame right there inside at the entire app so why don't we create that red block and add it into the application and let's do it by creating a zooming image of e equals UI image view with this frame constructor here and we can actually call starting frame like this think we need to unwrap it like that so there we go and if we set the zooming image view that background color equals UI color of red color like that we can now add this sub view or add this view into the entire application by first getting the window of the app by calling UI application shared application key window ok so it says the apps key window right there and this basically is a UI window class which you can actually call add sub view on so add sub view it actually has its method we can add zoom zooming image view so if we just do this right now and run the application you'll see the zooming image view appear right on top of the image that we click on so that that even that right there and this so that's how we get this to work and I'm going to actually modify this a little bit by first getting us a reference to the key window by saying if light key window equals UI application a shared application key window and this way I can actually do this logic a little easier so let's perform the add side view and here instead zooming imagery okay so that's nice and so nothing has changed and now what do we want to do here so I'm gonna run those and verify that everything works as it should so nothing too fancy yet click click click and so the next step to this animation is to zoom it into the middle like this so I want to zoom this guy into the middle right here so to perform a to perform a zooming type of animation we call it UI v animate with duration and let's just get a little fancier with this this animation right here so duration is perhaps 0.5 delay is 0 options is curve ease out is the one I like to use out like that and here is the animation block and completion I think we can just say nil for now and ok so in order to perform this animation we need to set the frame inside of this block ah so what is this new frame right well we know the the width of this frame which is just the entire applications with so what we do is we say zooming image view that frame equals something so this will be cg rekt and we'll use X Y like this so we say X and Y is X Y is 0 and for the width what is a key window that frame that width and the height let's just use starting frame to hide for now and I think we need to unwrap this guy there and we should be good so let's run this and you'll see the image actually zoom from the middle to the top I believe so let's do that and that and that so that's how this kind of works right so how do we get it to the center well you can actually just set zoom in image view center equals key window dot Center I believe and that should be enough so we are still I'm left with actually figuring out what the correct height should be so I hit that and that so that takes it to the center and all we're missing is the height right now all right and I'm going to show you one thing if I flip the simulator let's see what happens so I flip it you notice that the actual read view is no longer in the correct place now I'll fix that a little later as well first we have to figure out what this the height of this red thing is and to kind of show you why we need the correct height well say zooming image view that image equals starting image view that's good image right there and let's run so I'll show you what that does so instead of the red well actually get the image that we're trying to zoom so I'll do that and we get that so you notice how the image is kind of squeezed right and that's because the height is not correct so the correct height is actually derived from the kind of the calculation of similar rectangles again and we know three values we know the starting with and the starting height and then we know the ending with and all we're missing is the ending height so the math for this the math I know that you guys love math so so here's the math we say H 2 over H 1 equals no H 2 over W 1 equals H 1 over W 1 and then we solve for H 2 equals H 1 over W 1 times W 1 so I'm just bringing the W 1 over to the right side is a what this math is doing so I'm going to say let height equals so H 1 and W 1 is actually the starting frames width and height so H 1 will be starting frame dot height over starting frame dot with and then we multiplied by key window frame dot with that boy so I think that look okay I think we need to unwrap these guys here unwrap that and then what do we do here we change this to actually that height so we'll use the height there and run the application hopefully we should be okay alright so click that and we get this and you see the image is perfectly scaled and zooms in just like that that's quite nice alright I can do this forever I guess alright so what do we want to do next well there's a couple of things that we can do and first I want to perhaps animate a black background behind this image here so let's do that with a black background and I'm going to go down here inside of the key window here as I let black background vo equals UI view and we'll create this with your frame constructor the frame is actually going to be UI or key window so key window dot Frank and then we'll say black background view dot background color equals you like color a black color and then I think we can just add it under key window add sub view this will say black background review and this because we've added it before the zooming image view it's going to appear behind it because this will have a higher Z index so it'll be in front so here we go click and we get the black background there so let's fix the animation first by saying this so up here was a black background view that alpha equals zero so it first starts off invisible and inside of this animation block will just say black background view alpha equals one and you'll see the fading in of the black background immediately after pressing the image down here so there we go and pretty nice so the next thing we want to do is to hide this chat input area down below so very similarly we call I think it's called input container view dot alpha equals zero so that's going to hide it and I think we need a self here so I'll say self and let's see what that'll give us running running reading and upon clicking I believe the bottom area should fade out like that so that's quite good and it's looking a lot closer to what we want to do for our application here so so that's what this looks like and that looks pretty good so the next thing to do is actually handle the action of zooming this thing back out to the center and I will just very simply do that inside of let's see inside of this zoom image view got here so I can just say zoom image view dot add gesture recognizer and UI tap gesture so very similar to the other image view we just add something every time we want to tap on it so let's just say target is self selector will be selector a handle zoom out I guess yeah that seems to be a good function name and zoom out will occur right here function handle zoom out and let's just say tap gesture again UI tap gesture and in here we will simply print out zooming out and what can I do so I want to remove this print statement here and this print statement here I don't actually like keeping my print statements in the code because it clutters the console and when things do appear here that's important kind of gets ignored if there's too many messages and yeah click that and then we actually want to enable user interaction on this image view so let's say assuming image view user interaction enable equals true so I also forget about this property quite a lot whenever I'm coding and sometimes it trips me up but after doing this enough enough times you kind of get it and you see zooming out down here so we need to actually zoom out on this function call right here so how do we do that well there's a couple of ways of doing this or tackling this issue and the first thing we need to do is we need to zoom this back to the starting area so the starting area is starting a frame here and why don't we keep a reference for this starting frame right above and the class itself this will be a class property called or instance property called starting frame I guess starting frame is of type cg rekt and let's make it optional like that and we'll say starting frame that and then we now have a reference to the starting frame I believe this down here needs a self now and this needs itself as well I think we are okay so let's just make sure the code still compiles so I'm building it's running everything okay hopefully nothing has broken so that and zoom out cool now what do we need to do here first we need to get the reference to this image view here and because we have this tap gesture parameter here I just remember this we can say let's see let's zoom out image view equals tap gesture dot view look at that and we actually unwrap it like this this way it's easier to work with and let's see zoom imagery zoom image view and we need to see so need to animate back out to control here's what we need to do uiview animate with duration and this will say 0.5 the lay of 0 options of curve C dot curve these out animation let's see this here and okay so what is the actual animation that we need to do and I'm going to use a completion block this time around so this will say completed bull perhaps and do something here later okay now the animation is quite simple we need to reset the zoom out interview that frame equals self dot starting frame I think we need to unwrap it like with that and let's see what this will actually give us okay so we have this right there clicking that and clicking here we see the image kind of zooms back out and we can't do anything afterwards because everything is still in view so how do we fix this so that the black also animates out well we need to have a reference to this black background view so what we do is very similarly to getting the starting frame reference will say bar black background view of UI view I believe and let's just make it optional there and if we say delete the let use this reference instead and in here we can say optional they're optional there I think this needs to unwrap like that and here we go so also unwrap or optional there and okay so I believe this also needs itself and now we have this reference to this black background view we can go back to the zoom out function and say a self-taught black background review dot alpha equals zero which means that the alpha will totally fade out as we are animating our image view out back to its original location so okay I'll see there there there and there we go there there okay okay that was kind of strange all right all right even stranger all right so a couple of things that we need to actually fix and let me just go back here and you see that this image is still kind of in view when we go back so what we what we have to do is we have to inside of this completion block right here we will say actually I'll just remove that we'll say zoom out image view dot remove from the super review that'll remove it completely and let's see what that will give us well alright so pretty good so far nothing to can see just yet so that was that and if we go back you notice that the image is gone so that and that so one thing I do notice is that the animation is a little a little slow for my taste and what I actually like to do for my animations is to use an even better animator so notice how fast and snappy that is I actually prefer to use the animation block that does this right here so let's see you have you animate with duration and use this spring dabbing function here so duration will be 0.5 delay of 0 spring with dampening is a1 velocity is 1 and this will say a curve ease out just like before and enter there enter there I think we can say completed it's a completed like that and we'll take this completion block put in there take these two guys cut it in there and totally remove that so this is going to change the zoom out animation style you can really tell that the difference is quite significant so zooming in is a slow style and zooming out kind of snaps it back it's it's like something that has acceleration and it's much more dramatic than the linear animation style of zooming in so why don't we also use this for the zooming in as well so what I'm going to do is copy that animation style and instead of here I'm going to perhaps replace this right here so let's just take all the stuff inside of the animation block and I'm going to cut that and paste it in here and for this you can actually just comment that out it should be okay so there we go and we don't really need this but I'll leave that comment in there for now I guess to make it a little better what to say do nothing okay and click in there and we get that so zooms in quite nice and alright so one thing that you can do so let's see that right there and one thing I need to fix is that the chat input area seems to have disappeared so let's bring this back inside the completion block here on handle zoom out so inside of this completion pot will say self dot chat input so input the input container view alpha goes back up to one perhaps I think you can even include this inside of the animation block here so I think we should be okay and what this is going to do is as its fading out the black the input area will come back and fade in so it goes out like that and the input area kind of comes back to life and you can actually still interact with it like that so pretty good not too bad and one thing that you can fix if you're really detail-oriented is then it's not what I'm doing out there's a glimpse of the image and as I'm zooming in the image kind of appears or it's kind of still there right so we can actually hide it if we really wanted to kind of make this just a little bit better so what we can do is let's just do this here so when you have to grab a reference to this starting image view and say starting image view you an interview like that perhaps and then up here we can say starting an image view is equal perhaps self dot starting image video equals this starting image a guy here and then inside a let's see which animation block do I want to use so when it's animating in I can actually hide hide the holder image first so animating in I can actually just start saying self dot starting image view dot hidden perhaps equals true so that's going to hide the image as soon as I click onto it and now I'll unhide it a little bit later so the application now looks like this and click on there you notice how the image is gone and when we click back out we need to bring the image of you back in so instead of completion block all you do is say starting image u dot hidden is equal to false I think we need is self here so there we go and we'll run the application one final time perhaps and go in there we get that and that so that that and if you're really really detail-oriented you notice how the corner radius kind of like snaps back out like that so it's a rectangle and then we can actually on zoom out here and so on the zoom out function we can say did the we can call zoom out and to do that layer corner radius equals 16 I believe now I think we also have to say Clips two bounds it goes true otherwise we don't get the corner radius to take into effect so hopefully this will make the zoom out a little bit better and avoid that herky-jerky nnessee that right there the corner radius doesn't seem so abrupt is what I would call it so good stuff good stuff now if you're really really detail-oriented you'll notice that if I take this simulator here zoom it in and if I try to flip the screen all this stuff is actually not correct so I guess you can ignore this input area thing for now but to actually make it so that see let me see if I click on this one it'll do so does that as well a lot of minor minor issues if you want to support a landscape mode so the first thing you can actually kind of do so that the flipping works like this so what I mean is the black should expand all the way out here and this view should be kind of centered still you can actually use constraints instead of these wrecks and these frames but because that's quite a bit of code as well I guess I can either show you guys in another video or if you guys are really really interested I'll paste some code in the description below perhaps okay guys that about wraps it up for today's video if you enjoy today's lesson - make sure to give it a thumbs up in the next video I want to show you guys how to upload a movie message into firebase and then rendering it as a cell in our chat log controller pretty exciting stuff and last but not least if you want to download the project for today's video click on the link on the screen or in the description below this has been a lot of fun guys I'll see you next time

Channel: Lets Build That App

Views: 13,092

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code, animation

Id: fo3nSRBWfRA

Length: 35min 21sec (2121 seconds)

Published: Wed Aug 03 2016