Swift: YouTube – How to Create a Slide-In Menu Part 1 (Ep 7)

hey welcome back to the channel my fellow app builders hope you guys are doing well I’m in today’s video we are going to be doing another user request so go ahead and take a look at this message from someone named Jim me though I believe his name is pronounced and he has a long comment here but let’s just read the important section of it he says I’m leaving a comment here because I’d like to ask you a favor for this series of recreating the YouTube app would you please make the setting button on the upper right corner work the button with three white dots that triggers the half screen menu sliding up from the bottom then he goes on to mention a couple of more popular apps such as YouTube Evernote that has this type of menu and then he goes on to presenting some solutions or possible solutions to accomplishing this task alright good question Jim now let’s go ahead and show you what exactly he is talking about so I’m go into simulator here I’m gonna just bump this up and bring it to the center here and okay so instead of my communist somewhat semi completed application here I’m gonna click this menu on the top right you see the menu slides up from the bottom to somewhat near the middle we also give this black dimmed out kind of cover that you can dismiss by clicking onto it look like that dismiss the menu by clicking here and then also if I click here and I click on one of these menus cancel actually tells me that I hit the cancel button those it’s aware of which item you clicked onto so settings and gives me the settings so pretty good pretty self-explanatory but achieving this is actually pretty easy as well it’s easier than you would expect from such a really really cool nifty menu alright so pretty exciting stuff and let’s go ahead and dive into the code for building out such a cool menu system now I want to run this code right here and here’s what we get that menu does absolutely nothing so here is the code that we have so far and what we left off last was kind of figuring out how all the images load correctly right so let me tell you this if you’re just watching this video now you don’t need any prior knowledge of what happened before the only thing you need to know is that we’re setting up this navigation button up here and it’s called nav more icon we have an icon in our assets catalog and it’s calling this handle more function right here and then we’re going to execute some okay it’s a show menu and that’s all you need to know so I do highly recommend that you watch the previous videos on I don’t get to this point there’s not absolutely necessary that you know what’s going on anyhow we’re going to respond to this top right menu button by doing this so let’s go back to the other application right and this animation right here is separated into two parts first is the black dimmer background that shows up and then we have this bottom of collection view that slides up from the bottom so why don’t we first accomplish this by showing the black background view now that’s very easy to do if we just simply say let black view equals UI view like this set the background color to say UI color that black color like that and now what do we need to do well first we need to add it at this level we a sub view on 2d view controllers view I’m going to call view add sub view black and view like this and then we need to either set constraints on the black view or set a frame like this I’m going to call it cg rekt make and this will be something right so you can actually specify for values in here or you can just say view that frame like that and now we’re going to run this handle Morken which gets executed when we hit that top right button and you see how we get this black background now so you notice how we actually need to cover the entire application with this black view but the view controller only extends up to here around here and then we have a menu that covering the view controllers view so we’ll fix this by actually accessing the entire apps window by doing this now go here let’s say if let window equals UI application shared app key window this is the entire applications window I’m going to cut all this code put it in here and as I’m adding it to the views at that view we’re gonna stay a window at sub view black and view get rid of

this guy here instead of you will say window dot frame okay pretty good and now we’re going to run the application and upon hitting this Settings button over here we’ll get the entire screen covered by this black view that’s pretty good that’s what we’re trying to achieve now how do we get to be transparent well it’s not a black color will say UI color white like this zero for a completely black and alpha value at point five to give it that little bit of transparency no all right so I think this more button you get a dimmer transparent black view now we want to animate this black move onto the screen so you notice before it just kind of popped in without slowly animating it and we do the animation very very simply by executing UI view animate with duration let’s just use this one for now animation will be 0.5 or however long you want your animation to last so enter and here we’ll say black view dot alpha equals 1 now if I run this it’s actually not going to do anything for us because black views alpha is already 1 right so the color has an alpha of 0.5 but the actual black view has an alpha value of what already so if we set black view alpha equals 0 it’ll animate the 0 value from or the alpha from 0 to 1 just like this I’m going to click in wash with the animation so it slowly animates in right so that’s pretty good and let’s figure out how to dismiss this black view when we tap on it so if I tap on it I want it to go away and the way to do that is to add a gesture recognizer onto black view it’s a black view add gesture recognizer this will be you I tap gesture like so and this will say target target is most always going to be self selector will be this pound selector thing and we’ll specify a selector so here I like to call my selectors handle something so handle dismiss typically that’s my naming convention for my button handler functions and that’s what they should do handles the dismiss now we actually need to dismiss this black view from the entire window well the first reaction that I have is I don’t know what this black view is when I’m inside of this function because this is inside of the scope of handle more so to get it outside of the scope I’m going to cut this here and paste it right there and now we have access to black view so let’s fix this by adding a self there and here we’ll say you have you enemy literation 0.5 again animations will be take a guess it should be self black view dot alpha equals zero so now let’s run and when we click on the add the black view it’s going to actually dismiss out so go there click there you see it kind of just fades out and dismisses itself all right not too bad right so the next thing we want to do is we want to animate the collection view from the bottom of the screen onto the kind of the middle right there so in other words we want to achieve this effect here where this comes from the bottom okay so let’s see what do we want to do here now before we implement the collection view animation I want to talk about something called the Fat Controller issue that we commonly run into inside of iOS development and the Fat Controller problem occurs whenever we introduce a ton of code like this that has pretty much absolutely nothing to do with our home controller so home controllers full responsibility is to kind of orchestrate the behavior between the views and how they’re presented on the screen and it’s not exactly its job to present this the settings collection view and that black black background so in order to avoid this Fat Controller problem is to introduce this idea of encapsulation and decapsulation just pretty much packs all this code here into another class so that you kind of obscure all this code away from the home controller I’m going to do that inside of let’s see the viewer controller I’m

going to put a new file in here it’s not on my controller group and call it Swift file and I call this new file setting this laundry right here and then now we have this new file I’m gonna say import uikit just so I can get access to this class this nsobject comes inside of UIKit and this will be a settings launcher class and here all we need to do is override in it and call super init and then we can probably start doing something here maybe okay and here we can actually take all of this code I’m just going to copy all that I’m gonna paste it right above here and instead I’m calling this handle more I’m going to call this show settings like this and I’m going to build this project now and here’s what I can do to avoid the Fat Controller or a fat view controller problem I’m going to remove all these functions here and pretty much remove all that there they’re still going to show my menu I need this handle more function because that’s what’s being called when I hit the more button and up above I’m going to say it let settings launcher equal settings launcher like that that gives me the settings lingerie here and when I have that available to me right here I can call show settings and run the application so it built fine now it’s running and instead of calling all that junk it’s just going to call this code right here which executes that it more gives me this dim view and dismisses upon hitting the black view it’s pretty good this is an excellent tip for those of you that are trying to be really really solid programmers this will save you a lot of time in the long run when you come back to your code and you kind of look at it and you can figure out what’s going on so setting launcher is fully responsible for launching the settings so the very obvious the name of the file makes a lot of sense well pretty good nice explanation there good job me now the next thing we want to do is want to introduce this animation of this collection view right here right so I’m going to go ahead and pop in a collection view when I enter this dark mode okay now I am going to create this collection view out here so I know a lot of you are already fully aware of my love for collection views and this video tutorial is going to be no different what I mean is I’m going to use a collection view yet again by creating ones like this let’s see V equals UI collection view and here we need to create this collection view alright so let’s use this bottom instructor here this is dot 0 that’s our frame that’s a 0 frame actually and this layout will say UI collection view flow layout right there and here we’ll say layout return this collection view and then execute this block giving us this collection view as our class variable right here or our local variable I think they call it so now we can do something and what is that something well we’ll just we’re just going to present this collection view inside of our window down and let’s just go here so let’s do this here will say window dot add sub view collection view like this and then we need to specify the frame of collection view right here frame is equal say cg rekt make 0 0 and for width will say window dot frame dot with and provide let’s just use a value perhaps 200 and let’s run this application now so make sure to add this collection view after the black view otherwise this will be behind the black view and you don’t want that okay so I think that I get the dim that view and then now I get this collection view up here so first thing we need to fix from this view is to actually set the background color of the collection view to UI color white color white color like that and then let’s run the application see the effect it has now clicking up here we get this white collection view now we need to pop it all the way down to the bottom right here and that’s kind of where it needs to live so I’m gonna do that first before we show you how to animate it from below so how do we get the actual location to come all the way down here well we need to actually change the Y value so I’m going to say let y equal something this something will be the entire

those height – the height of this guy okay so let’s just capture this 200 value inside of height so let’s do the height and then let’s do height equals 200 like that and this Y value will be windows height minus this 200 value up there and this little now is B Y and then that looks pretty good right so we need to fix this error here and we simply need to say height is a CG float value because all of these values right here operate on a CG type system so it’s core graphics that’s what CG means and we need all those values to be core graphic values all right so clicking that gives me this collection beautyrx and now let’s see so the first thing I’m going to do is I’m going to show you how to animate this from the bottom down here up to this location right so let’s see how do we want to do that well the trick is we want to set this this frame here to down here and then we’ll just animate it up here so it’s very simple and we’re gonna set the frames original starting point Y value to be windows at frame dot height like this and then inside of this animation block we’ll set the new frame of the collection view so we’ll say self that collection view that frame equals this Y here so cg rekt make 0 and use that Y value C with is C self let’s just be safe here and say self collection view frame dot with here we’ll say F collection view frame dot height and as you guys we want to maintain the exact frame for the collection view now running this application we’ll get the sliding in of the collection view from the bottom that was pretty good right and let’s see what do I do okay before I move on to filling out the collection view I am going to show you something very very cool with you Ivy animations so notice how when I go inside of this application here when I click on this button there’s a animation curve of acceleration value in the beginning and a deceleration value at the very end of the animation so that type of animation style or acceleration curve is called an ease out curve and we want to have that inside of our application let’s see so I’m going to remove this couple of lines then get rid of these lines so you notice how when I hit this button the animation is linear so it’s a constant acceleration or constant velocity for the animation I’m going to change that in here by saying UI view dot animate with duration so I’m gonna use this this spring dampening huh the spring dampening animation right here so you notice how we have using the spring with dampening and duration will be the same 0.5 delay of 0 spring dampening is one spring velocity one so here is the important value so instead of options always hit dot curve ease out like that animations will enter completion we’ll hit let’s just do nil for now and then here we just take the entire animation that we had before and type it in there and remove this guy now we get hit run again and that’ll give us that smoother animation that’s more similar to what we expect in real life so I hit that and it kind of slid in there so I’m going to show you that a little bit slower by changing the animation duration to 1.5 seconds we’ll run and hit the more button it’s gonna be slower so kind of slid up a little bit faster in the beginning and then it slows down at the very end so let’s take that value back to 0.5 and run this one more time let’s show you the very nice acceleration deceleration effect so I had that and there we go okay so that looks pretty good and I think I’m doing okay on time and let’s see so the next video I want to show you guys how to actually implement the rest of this animation and how to fill out the collection of you so the first problem we have that is still existing in this app right now is when I click this dim this collection view stays on to the screen so let me want to fix that right now so self dot collection view dot frame you need to be the frame of down here and we do that very easily by

getting the windows frame again so if let window equals UI application shared application let’s see key window then we’ll set this to let’s see cg rekt make 0 any y-value is the interesting one where it’s the frame that height and here will is this a self collection view frame that with the good stuff collection view frame height here we go and now that we have that animation on dismiss we’ll see it go back to the very bottom of the screen so click here comes down comes up comes down comes up comes down go up go down so this is a very fun animation to actually get a rack with I can do this all day but we do not have all day and that’s pretty much the kind of the end of today’s video alright that about wraps it up for today hope you guys really enjoyed this really really cool animation effect make sure the like button if you do and also hit subscribe really does go a long way to help out the channel one other thing is if you want to message me on Twitter or send me a tweet you go ahead and add me on Twitter with my handle build that app and then you know have a nice chat with me if you have the time also one other thing is if you’re interested in having me implemented fix or some kind of feature that you really really want to see implemented please make sure to leave a comment down below and I’ll try to find a solution for you members in the video in the next lesson so hope you have a good day and keep on coding bye bye