Sliding menus are everywhere. In this video I'm going to show you how to slide in a menu from
the right, from the left from, bottom even from the top. You can swipe to dismiss or tap to dismiss.
Also the menu can be as wide as you want it to and can contain anything that you think of.
Alex here from rebeloper.com, smash that SUBSCRIBE button and let's find out how you can add a
sliding menu to your SwiftUI app. Now if you want to have a 60 minute Zoom call with me where we
can talk about your SwiftUI project or I can teach you SwiftUI or Swift or you just want to
hang out with me and take a look at your code maybe I will fix some bugs in them.
Take a look at rebeloper.com/mentoring and if you want a free 60 minute Zoom call with me
go ahead and comment on this video like this video because in the next one I will be drawing out a
winner. One winner for a free mentoring session and today also we are going to draw a winner for the
previous video. So go ahead and make sure to stay to that inside the video. So today we are going to
talk about Slide in View. I have prepared kind of a starter project here and I will just go
through it really, really fast. Here we have a tab view. We have a home and profile view inside them,
inside navigation views of course and also we have the home right over here. It's a scroll view
with some cells and the profile is kind of the same with some different
cells like the cells are the same but the data is different and here is the actual data, okay.
So basically that's it. Let me just build and run this so you can take a look at how this looks
like currently. It's a really straightforward. A tab bar, a tab view with some navigation
and a scroll view right inside of there, okay. So as you can see here we have a button if I tap
on this button it says did tab menu button and this is where we are going to implement
our slide in menu. Of course for that you will need to take a look at the resources where you can
download the slide in view file which I will add right now. So if you download the resources from
the link you will see that we have a slide in view. So let's just drag and drop that right over here.
Let's click on finish and yeah you can take a look at the slide in view file when you download it but
let's just use it and let's just go into the home view and I already did prepare this
did tap menu button. So actually this is where I want to trigger this. So let's just start off by
creating some sort of a menu for ourselves. So what I will do is just create here a new file and
I will just call this, it will be a simple SwiftUI view. Let's click on next and let's add a menu.
So menu view maybe. So that would be our menu view and I would just say here hello
many view, okay. And that's it for now. We will just add in here some more so it will be actually a
real menu like view but for now let's just use this and how would we set all of this up?
Well there is some documentation in the sliding view but of course you are watching this video
so I will show it to you. First of all we need to create some sort of state for
the menu. Is it shown or not? Is it presented or not? So we are going to create a simple
observable object. That we are going to initiate right over here. So again let's just
create a new file and I will just create a simple Swift file and let's call this slide in view.
Let's just call it service. Let's just call it sliding menu, why not? So slide in menu service.
There we go. Let's create that, let me just have some more room right over here. Let's just import
SwiftUI because this will be an Observable Object. Let's create our class, slide in menu service
and that will be Observable Object. Let's create our is presented published variable.
So @Published var is presented, there we go. And by default that would be false, okay.
Let's hit Command + B. Let's see if everything observable, sorry right over here not observed but observable.
Auto completion, it's really, really you just want to hit something and you hit another.
So Observable Object has this is presented, so now what we want to do is make this available
throughout our app. Now why would we want to make this available throughout the app? Well first of
all there are some stages where you can add this slide in menu according to what you
actually want this to menu to look like. So I just prepared this example to a-compass all of those
scenarios. So let's start off by having a private state object right over here called slide in
menu, slideInMenuService, okay. And that would be a slide in menu service, okay.
All you have to do is just add that slide in menu service as an Environment Object. So what I will do
I grab the tab view, add a group to it. So a group and then move the tab view right over
here, basically what I want to achieve is have this sliding menu set as an environment object on all
of our views. So I just go Environment Object and slide in menu service. So not the slide in
view sorry. The slide in menu services should be an Environment Object. So now on the home
view right over here I can access it and I will access it as an Environment Object and yeah let's
just copy out some stuff right over your slide in the menu and that is sliding menu of type slide,
sorry sliding menu service. Slide in menu service. So now I have access to that is presented
and yeah let's just go and have that the on did tap menu just stop and toggle it.
So sliding many service dot is presented dot toggle. Why not, okay and I will just remove
this print statement. So now we are kind of having that trigger already. So where do we actually
put our slide in view because it's called the slide view either it's a menu or whatever you'd
like because you will see how flexible that is. So let's just go back right over here and maybe let's
just do this on the group. So we just have, well actually to make it even more readable let's add
the slide in view right over here and you can see there are two initializers for this view modifier.
One is active and content and the other one with some more stuff. So let's just take a look at
the one that is active, edge, padding, percentage options and content because otherwise you would
just use the default values. So is active, well we just go slide in menu service $ and
sorry is presented and I think we have to end the dollar sign right over here. Now there is
edges, so as you can see we have leading, bottom, top, trailing. So for now let's just use
trailing, the default one is leading by the way. Padding percentage it's from zero till
one but I would just go and remove this right now, what this means is how far should the padding be,
well between the edge of our screen and the edge of our menu. So actually what you can see
beneath the menu. What is underneath the menu and that type of percentage, okay.
And then we have some options here and there's quite a lot. Padding color, padding color opacity,
should dismiss upon swipe or should dismiss upon external tab. Now padding color you see when
you are having this sliding on top of your view that will have a color on the view itself
and also you have a color positive for that color and should dimiss upon swipe. Do you want
this to be dismissed on the swipe, so the menu if you swipe on the menu, let say yes true or false right over
here or should dismiss upon external tab meaning if you tap on this padding where
you can actually see the underlying view. If you set this to true then if you tap right over there
you will be having the menu dismissed by the way both of them are set to true and I
really like the padding color and the padding opacity it's actually some sort of a gray, okay.
And then I have this content. Well the content is our menu view.
Really nice and that's it. What did you know that's all it takes of course we need to set up our menu
view like the UI of our menu view, a little bit more because yeah you will see in just a second.
Let's just tap over here and there it is. As you can see it's not that pretty but if I tap on
it again it just goes away. Really, really nice, okay. So now let's make our menu view really better.
So first thing first what I want to do is make this experiment and have a background. So first
of all let's create a VStack right over here and then maybe let's create a Horizontal Stack
and let's just have this right in here and just add a spacer right over there and then also
a spacer right over here and finally we are going to have also some spacers
for our Vertical Stack also. So spacer. So let's build and run and see how this looks like
already. So it's the same thing, yes because we forgot to add a background color. So we
want to add a background and the background will be a color of let's say UIColor of
system background. Let's just have this system background, let's see how this looks like.
Okay! So now there we go. Much, much better. Of course it is covering all of our tab bar up which is the
case in our case because we have added to the group so everything. So it's a good thing that
we left the tab outside of our menu to dismiss it. So if I tap right over there, it's dismissing it.
As you can see really nice. Also if I swipe it's going to dismiss it. Let's do that again swiping,
dismissing it. Really, really nice. Of course you can tweak this. So let's say I don't
really want to, I would rather have this bottom on top. So how would we do that?
Well if you just go right over here and let's move our sliding view. I'm just going to hit Command + X to
copy all of that out and let us just put it on the home. So right over here we are having the toolbar
so kind of like here. So yeah we do have the side with menu service all of that stuff. This is why
it's so important that we created that Observable Object. So there we go. Now we have actually access
to this tab bar because and let me just have this right over here so we can see that actually
we have that navigation bar right. So this is how it is. So now it's not covering the tab bar or the
navigation bar and yeah it depends on your choice, you can add this as as you wish to. of course
I would prefer the other way around so let me just move this back and put it right over here, build
and run one final time. There we go, hello many view. Okay that is this is really, really nice but
what if I want to set this to the leading part. So yeah let's take a look at that. Nw if I tap right
over here it's coming from the leading part. Really, really nice. What about the top?
Yeah this is so so powerful as you can see if I tap right over here it's dismissing
also if I slide, slide up it will be better. So also we can have it as a button like a slide up
button right over there, hello menu view, really, really nice. Of course you can set the height of
it with the modifiers that you already saw when you are creating the slide in view with that
percentage of the padding. Again let me just remind you what the padding is. This part is the padding.
So how much it should be padded. Really, really nice, okay. So let's take this back to trailing.
Trailing, there we go and now let's check out our winner for the previous video. Make sure
that you LIKE and SUBSCRIBE to the channel and comment on this video to have a chance on the
next video for a draw. Now I'm going to draw a lucky winner for a 60 minute Zoom call with me
from the previous video. So I will grab this URL and put it right over here and let's just fetch,
okay and let's continue and there we go. Let's pick a winner and the winner is w0mbles.
Well most probably I didn't spell it out right what you want to do is just
contact me at support@rebeloper.com with your email that you made your comment with
and yeah I'm looking forward for your free 60-minute Zoom call and if you do want to learn
more while 95% of self-taught developers fail go ahead and check out this video right over here.