Side Menu in SwiftUI 2.0 Like A Professional | Select Menu Options

[Music] what's up youtube welcome back to the channel hope everyone is doing well in today's video we're going to be creating a side menu feature using swift ui and it's going to look a little something like this we're going to have a really cool animation here and i'm going to show you guys how to create a menu with whatever list of options you want and we're going to create a scalable solution so that you guys can add or remove options or change the icons or the name very very easily and we are also going to be implementing this awesome feature where i'm going to show you how to actually navigate to a new screen or perform some sort of action when a navigation item or when one of these menu options is clicked i haven't seen a video online yet that shows you how to do this so this is exclusive content coming to you guys from my channel so this is going to be really similar to what you see in an app like twitter i have the same uh feature built into my twitter swift ui clone if you guys want to check this out i just dropped a course for this it's live on udemy now the link is in the description let me actually pull this up and right now you can get it for just 10 bucks right this is a complete version of twitter built 100 using nothing but swift ui it uses cloud firestore as the back end it's super awesome so if you guys want to go ahead and check that out click the link in the description and really quickly guys the source code for this feature will be available on my website at stefancodes.com shop and you just click on this side menu template and it will give you the ui kit version of this and the swift ui version of this so you guys can get both versions so that you can drag and drop this side menu feature into any one of your applications whether it's built using swift ui ui kit or a combination of both so now let's go ahead and actually get started with our xcode project in the code so with xcode open here guys we are going to go ahead and select um ios in the application in the uh platform list up at the top and then select app and you're going to hit next i'm going to call this side menu swift ui tutorial and make sure you have these three options selected interfaces swift ui life cycles swift ui app not ui kit appdelegate and then language is going to be swift and then we're going to hit create and xcode is going to create this project for us and now we are gonna have our little preview open and we're gonna start uh coding out what we want um for this uh home screen before we get started with the actual side menu so we're gonna be creating a navigation view and some sort of bar button in the left so really quickly guys i want you to just uh right click or command click onto this text and just hit like embed an h stack or something and then we're going to say navigation view and within that navigation view we're also going to wrap this text inside of a z stack and you're going to add this color and just say dot white so i'm going to go over what exactly that does in just a second let's just go ahead and hit resume to make sure that our project is working correctly and i'm going to select an iphone 11 pro max for my preview and we'll let this guy build and do its thing all right so basically what the z stack color.white does is it gives my whole screen a background of white so you guys will notice that i'm filling out the entire frame of the screen that's going to be something that's important for our side menu feature a little bit later on now i want us to go over how to add this navigation button so you can you guys could either uh you know do this with like an image of the user right there or you could do something like a hamburger menu i'm going to go over how to do both in this video so really quickly guys find where your z stack ends and go underneath that bracket and you're going to say dot navigation bar items and you're going to select the leading option so we're going to start with the little hamburger menu style guys and i highly recommend downloading this sf symbols application it has a giant list or it's like a giant repository of all of the system images we now get provided with from xcode so you can see here we have a bunch of these different hamburger menu styles i'm just going to select this list.bullet guy and there's a way to copy it but uh yeah so you can just right click and hit copy name and then down here when we're creating our image view i'm going to actually make this a button and then you're going to select action and label action is going to come later so just hit enter on that but this guy we're going to say image system name and then go ahead and paste that guy in there and i actually have to wrap it in quotes okay so now we see that navigation bar item coming up and that is looking pretty good so now what i want us to do is figure out how to actually get it looking like uh the way we want it so we're gonna say dot foreground color and we're just gonna say black and that's gonna change the foreground color of it so that is all we're gonna do uh for now with that now we are going to go down here and say navigation title and we're going to say home and you guys can leave it as this large title if you want to change that and have it display as sort of this inline title you're going to say navigation this bar title display mode and then you could select inline and you guys would notice that it changes that i however kind of like the uh the automatic look or the large font look so that's what we're going to keep it as and here in this uh button action we're just go ahead and add a print statement so just go ahead hit enter there in between your brackets and say print debug show menu here now let's actually run our project and see what this is looking like so now we should see a hamburger menu up at the top and right now when we click on it it's going to say show menu here so that looks pretty good so we're going to come back to this in a little bit guys this is just our home view and eventually we're going to implement the capabilities to actually show our menu but right now i want us to actually go ahead and start building out that menu so um let me go back to our application that we're building we are going to create a couple views for this right so we're going to create this view as its own thing it's going to be our header view and then this is going to be uh like each individual option or cell right here is going to be its own view and then we're also going to create a view model so we have like a data model for this list and then we are going to uh you know this is all going to be contained in sort of one big view so let's go ahead and create all these files right now so go up to your project and we're going to create some swift ui views so first one is just going to be side menu view next one is going to be the side menu header view the next one is going to be the cell or you guys could call it option whatever you want i'm going to call it side menu option view you could also just call it side menu cell it's up to you all right and then we need our view model so i'm going to go ahead and create this and this is just going to be a swift file and we're going to say side menu view model okay so that's going to just be sort of a blank file right now so really quickly guys i want us to start with the side menu view okay so i want us to get this like awesome gradient going on here and so all of that good stuff so let's um see what we have to start doing there so um delete this text and let's uh start with creating our gradient so we're going to do the same thing we did with our um our home controller or sorry home view i'm so used to saying controller and instead of just having a white color we're going to go ahead and select linear gradient or create a linear gradient and just select that option there and you guys are going to get some options for some colors and start pointing to end point i like to do the start point is top and the end point is going to be bottom and then the colors are just going to be color dot blue and color dot purple so this is just going to give your ui like a super cool look it's absolutely not necessary i just you know wanted to spice up this video a little bit and give the ui like a clean sort of interface so now that we've done that let's hit resume and let's see what we get back from our preview so we get this uh you know awesome gradient it's looking just like this so in order to get it to expand up into these safe areas we're just going to go and add a modifier dot ignores safe area i hate it when it does that man i think there's a bug with xcode where like the autocomplete for that option is messed up at least it is for me so just type out ignores safe area and now you can see that it's going to fill out the whole screen so now guys our overall container is this z stack and now we're going to start adding our elements here right so i'm going to create a v stack and that's because we can see that all of our items here are vertically stacked okay so basically we're going to put the header first then we're going to put the uh option view or cells right we could just call it cell items or something like that and that's going to be about it right so we have to now create this header and then create these cells and then we're just going to drag and drop them in here or not really drag and drop but you guys get what i mean so now let's uh go to our side menu header view file and we are going to start with this image up here so let's go ahead and create a v stack to place all of this stuff in because as you know it's an item here then beneath it we have these guys then beneath it we have these guys so we're just going to delete this text and say vstack and then we are going to create an image and i have this image in my assets guys if you guys you know you can replace this with any image that you like uh you know i just downloaded this from the internet and dragged and dropped it into my project i'll see if i can include the image if you guys really want it um in the description to this video but anyway let's just keep going like i said any image can be used there so here we're going to say dot resizable dot scaled to fill and then dot clipped and the frame is going to be width and height is going to be 64. then we're going to say clip shape is a circle and then we are going to give it a padding of bottom of 16 pixels so let's go ahead and hit resume here and see how that looks while it does its thing and that's looking pretty good guys to get this shoved all the way up to the top beneath our image just go ahead and add a spacer and you guys will notice that it moves that all the way up to the top i'm not sure why it's keep having me hit resume but yeah now it's all the way up top and that looks pretty good right and then for our alignment on the v stack we're going to say dot leading and it's not going to do anything right now because it's you know the width of the v stack is only um as tall as wide as the images right now but later on that stuff is going to move over to the left side of the screen once we add this little x button up there so we're going to do that in a little bit i want us to keep going with all of these view components however so then we're going to say uh text and i'm just going to you know say eddie brock and it's going to be dot font and then go ahead and in the parenthesis just say dot ss and then select system size and it's going to be 24 and then do a comma and say weight is dot semi bold that's 14 i want 24. cool and then we are gonna say uh eventually guys we're gonna change the foreground color to white um right now we're just trying to build out the view then we're going to say text and it's going to be at venom and the font is going to be i believe it's just a font of system size 14. and that looks pretty good now we're going to work on how to create these guys right here so this is going to be a little bit tricky um so we have an h stack right and then each one of these items is also its own h stack so you know this is kind of just like um showing you guys how to build some cool things in swift ui i promise we are going to get to the actual meat and potatoes of creating the side menu so let's just go ahead and create this h stack really quickly i'm actually just going to copy and paste it guys and explain it to you to save time so we have an h stack here and now we notice that you know everything is shoved over to the left side of the screen and that's because we put a spacer on this h stack but let's talk about what this actual guy is so if i highlight this guy here right so make sure you guys pause the video and type this stuff out um you're going to notice that the frame stretches all the way to the right side of the screen it's the full width of the screen then within this parent h stack i have an h stack for this guy and an h stack for this guy okay so we're just creating some number text and bolding it and then you know it's following and then another h stack for this guy over here and they're all contained in this parent h stack and the way we get everything over to the left side of the screen is by adding the spacer right here right so this this spacer is part of our v stack and it shows everything up to the top and then this spacer is part of our h stack and it shoves everything to the left so that's pretty cool um now uh we can just go down uh all the way here uh to the end of our v stack and say dot padding and it's gonna give everything a little bit more padding and we are also guys gonna to add some padding beneath these guys right here so let's see how are we going to do that so we can just add some padding underneath venom or we could add some padding to the um h stack doesn't matter which one so i'm going to just go say dot padding dot bottom and now let's make it like 32 and you guys notice that that moves it down a lot right there for us which looks pretty good if you guys want to mess with the spacing you can just adjust the padding of this um uh bottom padding on this venom guy to get this where you want it to be all right so that looks pretty good um now guys i want us to go and drop this in to our uh side menu view so let's just go replace this comma comma or this comment that says header and say side menu header view and open up our constructor and we notice that that looks pretty good right and to get all of these things to have the correct foreground color there's two ways i believe we could just go here and say dot foreground color is dot white and it will change everything to that white color or you could go and individually add all of this to your um your items in the header view or you could cut that out and just go back to your header view and at the end of your v stack just say you know that foreground color is white and it won't show up in your parent view or this preview unless you change the background color there but if we go back here we notice that everything looks good right there all right so next i want us to create our option views right here and then we will pretty much be ready to start implementing the functionality to get our side menu to show up when we click our button we just have to finish out with our cell items guy right here in our data model so guys let's hop over to this option view file and we are going to create this option view really quickly so as we can see it's just going to be an h stack with an image and some text so we're going to say h stack and we want the spacing right now oops to be set to 16 and then we're just going to say image and we're going to say system name and just say person and then you can say dot frame uh with oops width is going to be 24 height is also going to be 24 and then you're just going to go ahead and create your text which is just going to say like profile for right now and it's going to be dot font dot system size we're going to say 15 weight is dot semi bold and then on the whole h stack you're going to say dot padding and you're also going to say dot foreground color is dot white okay so let's go back to our side menu view and we can just we add this in here so we want to add a bunch of them right so we're going to use a for loop to do that and eventually if you guys want to see how to add like a data model to this i'm going to show you how to do that as well so it's going to be for each and then select that guy and for data we're just going to have a static set of numbers right now or indices and then on content tab over to it hit enter delete everything but the underscore in and you know keep the brackets obviously and then you're just going to say uh what's it called side menu option view and hit resume up at the top and you guys should notice that it creates a bunch of little option views for us so that's looking pretty good right now what we want to do is actually move all of this over to the right so sorry the left so we're going to add a spacer to each one of these guys right here so uh i'm going to go back to my side menu option view and inside of this h stack just go ahead and add a spacer and then go back to your side menu view and you guys will notice that everything is shoved over to the left side of the screen and because we have that padding on each one of the options it's like it sticks out a little bit right so you guys could like change around the options a bit and you guys will notice that um we want to eventually be able to move all of that up to the correct spot and we will be doing that in a little bit or actually we can just go ahead and take care of it now so on your side menu header view give it a frame and then say height is 240 and then you guys will notice that everything sort of gets squashed down because we have now set the frame on this guy so what we can do on this v-stack is just add a spacer and it's going to move everything up to the top right so that looks pretty good now we can you know change our options to have as many as we want and everything is looking nice so i'm just going to keep it at let's see one two three four five six let's just do six right so that looks good now we can actually get started with what we need to do to show this side menu so i'm going to hop back into my content view and the same the first thing we need to do is create a state variable and that state variable guys is going to keep track of whether or not the side menu is showing and we're going to go through the code and say hey if that is showing property is true then i want you to show the side menu and perform all the animations and do all that stuff and then once we click this button and toggle it back to false we're going to say is showing is false it's just going to you know bring it back and that's actually going to be handled by this close button right here but that's going to come in a little bit so actually just go ahead up at the top of your content view and say state private bar is showing equals false and what we're going to have to do before anything else guys is i want us to extract this view right here and uh put this and call this like home view it's gonna make things easier for us to understand so go ahead and just you could command click on the z stack and say extract sub view and this will only work these options will only come up if you have the canvas open so hit extract subview and we're just going to call this home view all right so the reason i'm doing that is because we're going to create another z stack here so what i want us to do is on this home view command click into that and say embed in z stack right so now the z stack we're going to have is going to be between the menu and the um the home view right so we're going to put the menu view the side menu view behind the home view and we're going to say hey if is showing is true then i want you to show me the menu view so we're just going to say if is showing then we're going to say side menu view and then uh what we're going to need to do is you guys will notice that we can actually take all this stuff here and put it onto our home view right there so this way you know our navigation bar button items is still part of the home view and the navigation title is still going to work and all that stuff but um because we're going to need to actually access this button action and if we didn't put it there we could have kept it here but then we would have had to introduce a binding variable and all that stuff and that's kind of annoying so we're just going to keep it here and we're going to say is showing dot toggle and let's go ahead and see what happens when we do that let me get rid of my screen flow all right so i'm going to go here and you guys are going to see that this the menu view is actually now coming up behind this view but we obviously want to like have the effect of you know moving that view over and animating it a little bit so we're going to go over how to do that now so on your home view just go right beneath it and we're going to say dot offset and you're going to select the option for x and y so basically if is showing is true we want to offset the x axis of the home view by we're going to call it 300 pixels okay so we're going to say offset is showing yes 300 no 0 and y is just going to be 0 for now so let's go ahead and run that and see how that looks so we noticed that uh you know things change up quite a bit there and that looks okay but you know there's some problems right so we notice that the navigation bar is still showing and it's showing in the menu view and we don't really want that so uh what we're going to go in and do is figure out how to hide that guy when the menu is showing so uh let's see we're gonna go back to i believe the side menu view and just on the z stack just go ahead here and say dot navigation bar hidden and say true and i think hiding it from the side menu view will solve our problem so yes so now we notice that this guy moves over and that our side menu view looks good at where it is there's no navigation bar up at the top but there's a couple more things we have to fix we actually want to animate that over right we don't want it to just like move over without any animation because that doesn't look as smooth with our ui so sorry i guess i got like a nasty knot in my back from filming too much anyway let's go back to our content view and so we have our offset right so in order to do this we're just gonna highli cut out this is showing.toggle guy and we're going to say with animation and then oops let me see exactly how to type that yeah and then just say dot spring and then do some brackets and then you're going to say showing menu or is showing toggle go ahead and build that to make sure everything succeeds right now we can run this and we're going to see that it has sort of a spring-like animation right so now it's actually animating over and it's really smooth um so next thing guys is we need to go over how to actually um like add these corner radius to our view and you know have it scaled down a little bit and all that stuff so that's what we're going to be doing right now and then we're going to go over how to actually you know implement this x button to be able to get back to our main screen so um a couple more properties we're going to add just go up at the top and say dot corner radius and say showing menu or sorry i keep saying showing menu yes is 20 no is 10. and then we are going to go after the offset guy and we're going to say dot scale effect and you're going to say showing menu damn it i keep saying showing menu 0.8 and no is 1. so what this is going to do is it's going to give it um that cool like corner radius effect to where it rounds the edges of this view and then we're also going to make it scale down a little bit and we're also going to add a y parameter to this guy here so that we can actually show our x button up there so for the y parameter on your offset right we're going to say is showing yes is going to be 44 no is going to be zero so now we're gonna see that this has that really cool sort of animation effect of like moving down like that and it's got that really nice spring animation and everything is looking pretty good right so now we just need to add our x button up at the top so that we can actually bring the menu back into view or bring the home screen back into view so we're going to be placing this guy inside of our header and we're going to go over how to do that now so go back to your header view and we are going to wrap this z v stack into a z stack so just command click on it embed in z stack and for your alignment property we're going to say top trailing so this is going to allow us to put something on the top right side of our screen so we're just going to go and create this button and select action and label leave the action blank for now and for the image we're going to say system name and it's going to be x mark and we're going to say dot frame and let's say width is 40 or let's say 32 height is 32. foreground color is dot white and we're going to say dot padding and let's just go ahead and run this right now to see if that is coming up the way we want it to so i go here and that looks okay right um so we'll adjust the size and all that stuff maybe a little bit later the most important thing is that it's showing up now what i want us to do is go over how to actually get this to make our home view animate back in so we're going to introduce something called a binding variable here is showing and it's going to be a bool and the action for this guy is going to say is showing dot toggle and now if we try to build our project you guys are going to notice that we get an error and if we go back to our side menu view um you guys are going to notice that we are missing this parameter here called is showing so we're going to go here and what we need to do in our side menu view is actually go and say um at bindingvar is showing and make that a boolean variable and then pass that guy in here with a dollar sign to show that it's a binding variable and we're going to have to you know you can actually just go down here to your preview and for the binding guide you can say constant and just say true and i believe we have to do that in the header view as well so go here just say that constant it's true we don't really need the preview anymore guys so if you wanted to you could just delete that but our final error is going to come in another place and this is where our state variable is going to come into play so go ahead and implement the fix there and pass in is showing for this state variable here and let's go ahead and run this and see if it works and then i'm going to explain exactly what's going on there so we go here and then we hit that and boom it's coming back into view but it is not animating the way we want it to so to fix that you know it's pretty simple we just go ahead and copy this and we're going to go back to our side menu header view and we are going to um delete this guy hit enter and just paste that in there so guys what is this binding property for those of you who don't know so basically we want this variable to do something back in our home screen right but this is located in the side menu header view so basically we have to bind this is showing variable from all the way from the header back to the side menu back to our actual content view where we control this is showing property so because they are now bound together like that binded that binding property is essentially bound to this state property right because when we create the side menu view we pass in this property so whenever that binding variable changes it's going to change this guy as well and then it's going to reconfigure our view and it's going to say hey is showing is now false so i want you to go ahead and go back through all of this view logic and do what you need to do based on the instructions we've given the code so like for example here with this offset guy we say if is showing is true we want it offset by 300 and if it's not we want it offset by zero same for the y parameter it's offset by 44 if it's showing and zero if it's not so when this changes to false all of this gets reconfigured and re and shows us the home view coming back into view with that really really nice animation right there so uh guys that is essentially it for the side menu feature if you guys want to stick around to figure out how to implement our data model um and then how to eventually actually you know make it so that each one can go to its own screen stick around for the rest of the video if not um that's essentially you know the bare bones of the side menu feature and now we're going to get into creating our data model and actually linking and linking an action to each one of our side menu options or cells alright guys so we can go ahead and just close out of this preview so we can say show editor only and i'm going to go to my side menu viewmodel.swift file and this is going to be an enumeration so i'm going to just call this side menu view model and it's going to be an integer type enum and it's going to conform to this case iterable protocol it says a type that provides a collection of all its values we'll see how that becomes useful in a little bit so really quickly let me just go ahead and mirror all of these options or let me just open up my code so here's how this is going to work guys we're going to create a case for each one of our options like this so case profile case lists blah blah blah i'm just going to go ahead and paste the rest of them in here and you guys can actually you know just customize this however you like here's the trick so we're going to create this description property or we could call it title if we like and it's going to be a string so basically for each one of these cases we wanted to give us back a string and that is going to represent the title of each one of these guys so i'm just going to copy and paste that in here as well basically all you do guys and let me indent this properly oops ctrl i okay i guess that's indented properly um so yeah basically when you do a switch through self it's going to iterate through all of your cases right because self represents this enum structure here so when we do a switch like i said it just goes through each one of these cases and asks us to return a string and we're going to do the same exact thing for our image name right so now each one of these cases is going to have an image name associated with it and once again i will just copy and paste this in the interest of saving time and go through the explanation with you guys so actually sorry say switch cell and then paste all them in there so right now we just have this profile title and this person image then these are all the system images that we get back um from you know the xcode like sort of repository of images now so we have list bookmark messages oops that's coming in a little bit uh notifications and logout arrow.left.square bell bubble.left all that stuff and like i said guys you should download this sf symbols app and it gives you a list of all the repos of all the images in the repository so like if you want if you go out and start typing something like you know message hit enter you know it gives you a bunch of these message icons or if you say bubble then you can see all the bubble icons and you can choose from that stuff it also has a bunch of multi-color options right so if i select uh i don't know you guys get the idea uh let's see show inspector whatever um yeah but you know there's a ton of icons highly recommend downloading that and that's where you access all these guys and now that we have our view model and i will explain this a little bit more let's go back to our side menu view and when we do this for loop we are going to say side menu view model dot all cases and here we're just gonna you know now we're gonna have access to each one of our options inside of this for each loop and how we get them to actually display the correct data is to let's see um why isn't that working oh we have to conform to identifiable so we have to say id backslash dot self here and this is just something that is required by swift ui when you're creating like a for each loop with some sort of list like that or when it contains a view each view has to have its own identifier so now if we go back to our side menu option view we are going to require that we pass in an option here um side menu viewmodel or we could say you know viewmodel actually and here instead of system name we're going to say view model dot image name and then this is going to be say viewmodel.title and here you can just go ahead and pass in our viewmodel and you could make it any one of the options that we made you know now you guys see that through this enum notation we have the access through each option through this dot notation so that's pretty cool like i can say dot profile or dot messages or dot whatever it is because all of those are now represented as cases in enumeration so now guys if we go back and actually go here we can say view model and you know just pass in your option whatever you want to call it you could call it a view model call it an option you could call it bob if you want it doesn't matter right although you should you know keep your naming pretty consistent and may have it make sense but now we can see that each one of these guys has its own data and that was all handled through our enumeration here where we created the case for each one and then gave each one a title and an image name and then back in our option view we populate each one with a viewmodel object and then say hey this is going to get created however many times for the image i want you to get the image name of the particular option that we're on and the title for that text so now really quickly guys i want to show you how to go to an individual screen with each option so go back to your side menu view and really quickly just go ahead and cut this guy out and go ahead and say navigation link open it up and then say destination and label the label we're just going to paste that guy back in there and the text we can literally just say you know option.description or sorry option.title and now let's go and run this and see if it's working and then i'll give you guys a brief explanation of that data model one more time so now i can click on these options and they are all like these navigation links and that looks really good so really quickly guys when you go back if you want your menu to show you can leave it just like this or if you want the um home screen to come back into view you can just go back to content view and you can go to the end of your z stack and say dot on up here and just delete that guy and say so it's just on appear with brackets and then you can just say is showing equals false so now if i go and click on an option go to profile and i go back we can see that my home screen comes back into view so um if you guys wanted it the same way it was before just don't add that code or delete it if you did and it will make it so that every time you go back to the home screen the side menu is showing or you can have it show the home screen so that's going to be it for this video guys once again don't forget about my latest course release which is uh this twitter swift ui clone where it's a full scale application built with nothing but swift ui and done fully in the mbvm framework and you know you have a direct messaging feature and a bunch of awesome things in there so go and check the course out it's available at this price for the next four days at the time this video was made and you can click the link in the description to go and uh get yourself that discount also the source code for this is going to be located on my website at stefancodes.com shop once again it will include the ui kit version of this as well as the swift ui version of this and it's going to be 50 off right now at a low price of 20 bucks so um thank you guys for watching this video um really quickly uh if you guys want to stick around for some more explanation go ahead um so the last thing i need to explain is this case iterable protocol and basically what this does is make it so that we can iterate through each one of our cases and sort of treat this whole thing like an array so when we go to our side menu view and we say dot all cases so we're doing a for each loop on all of the cases inside of our enumeration and that's because we are conforming to that case iterable protocol and get access to that and then for each one we're creating a navigation link here's the destination for that navigation link and here is the label which ultimately gives us this awesome side menu feature so that's the only thing left that i really had to explain guys i hope you guys enjoyed this video and you know i hope you guys subscribe to my channel like this video comment on it with what else you want to see from me and thanks for watching guys peace out until next time

Channel: AppStuff

Views: 18,416

Keywords:

Id: jYamf9EHksg

Length: 42min 19sec (2539 seconds)

Published: Tue Dec 08 2020