Have you ever wondered how the Slack slide in menu animation works?
Well in this tutorial I am going to show you just that.
Alex here from rebeloper.com and in this tutorial we are going to build out
a slide in animation. So I want you to hit that SUBSCRIBE button, open up Xcode
and let's dive in. So let's take a look at the beautiful side menu that we are
going to build out today. So I'm just going to build and run this
demo project that I have created and yeah this is it. Now this
view controller that you can see here this will just slide over.
Now it's not going to slide, the menu is not going to slide over the
main view controller, it's just going to push
it to the right and of course this grayish view
you can may add anything that you want a list, a UITableViewController whatever
you want, okay. So let's build this out. So we are going to start from scratch as
usual and I'm going to create a new project here
and let's go app. Let's create next, oh by the way let me just resize this so I
just selected app just so you know. Let's just remove this out of the way.
Awesome! So let's have this as side menu, okay.
And make sure that you select storyboard and UIKit App Delegate and of course Swift.
Let's click on next here and let's just go over it here and
let's select some other place here, okay and let's click
on code create. And I will create a GitHub repository on
my mac so you can take a look at it later on. Go ahead and click the link in
the description so you can see where the GitHub repository lives, okay.
So first thing first as usual let's remove the main.storyboard because
I don't like to work with storyboards. So let's take a look at this, let's
remove the main interface also in the info let's just remove
the application scene manifest. Go ahead and move all the way down here
till you see storyboard name and remove that with the minus button here.
So what we need to do here is just go ahead and initialize it in
the scene delegate. Let's do that real quick
because if you are an avid follower of my channel
you already know this and if you don't make sure
that you hit that SUBSCRIBE button and just
make sure that you subscribe. So windows scene. I just got a little mumbler there
but yeah we want to create the windows scene
and our window should be initialized as
a UIWindow with our windows scene. So there we go.
Window scene. Awesome and now we want to make this window scene key and visible.
So window scene dot make invisible and now we want to set the root view
controller and as you already saw in the example we
need the UINavigationController, so we are going
to instantiate it right over here it's really convenient
and with a root view controller and our view controller will be our
root view controller, okay. So let's go back here
and let's see. View controller let's just add in here our view.
Let's see dot background color equals, I don't know maybe system teal, okay.
So let's build and run, not on my phone but
on a simulator and let's see how this looks like.
And finally we are going to add in some menus, there we go. System teal.
How awesome is that. So let's take care of some stuff here
like setting the title and setting the left
bar bottom item. So yeah this should be, now let's just
change this to system background, why not
and let's set the title to be side menu, okay.
And now we want to create a left bar bottom item.
So to do that we are going to create it inside a lazy variable.
So lazy var and menu bar button item.
Okay! Let's just have here some more space so we can see that.
And that will be of type UI or let's just instantiate this.
So UIBar,
come on UIBarButtonItem. There we go and we are going
to use the one with the image style and target and action.
Okay! So let's go with the image and we are going to use a system
image, so UIImage and system named and I'm going to use
something called sidebar dot leading.
This is in SFSymbols 2.0 and because I don't want that
bluish tint color, I'm just going to render
as original. So with rendering mode dot original, always original and the
style that could be done, why not and the
target itself and the action pound
selector and let's name this menu bar bottom item tapped.
So menu bar, there we go. So we need to create
this objective C function and let's do that.
So in a new line let's create this at objective C function.
Func...
There it is. Really, really nice. Now all we have to do is grab this
menu bar bottom item and add it, set it as a left bar button item.
So right over here, navigation item, set left
bar button and we are just going to, let me just copy and paste this it's a
really bit quicker. Animated false. We don't
really care about the animation. So let's build and run and see
how it looks at the moment. So really, really nice, okay. We can tap this
and whatever. So what we are going to do here
is that we are going to set, so add a sub view for the menu
and then we are going to add another sub view on top of that
for our container. So, yeah basically that is what we are going to do.
And whenever we tap on this we are going to kind of
slide the top away and slide it back when we want to
hide the menu bar. So it will look like some sort of okay
we're going to slide in the menu but actually what we are doing is sliding
the top container layer. So, yeah let's just
create two views here and I'm just going to
copy this out from my notes here because yeah it's a
pretty self-explanatory. So I'm just going to add those right
over here and we have a many view and a container view.
Now what we want to do with these two is
just add them and align them to our view.
For those I'm just going to add in here some extensions on the UIView where we
can edge those views to its container view.
So I'm just copy and paste that here and I will just go through them.
So what we have here in this is an edge to view, what we are doing
is adding the sub view, adding the view the self to our view that we added here
as a sub view. we are settings translates auto resizing mask into constraint
to false and then we are constraining it to all
of those anchors. So top top left right and bottom.
Now here is the pin menu to view with a constant. Now what this does
and you just go through it you will see that here the trailing
anchor is not equal to the trailing anchor.
It has a constant value and it's minus that constant that we
added here. So it will pin it with a constant and
we are going to use 40 here but you will see that in action.
Okay! So what we want to do now is just simply add the container view
and the menu view. So first of all we want to add the menu view
because that will be on the bottom of the stack here.
So let's see menu view dot and I'm just going to use pin menu 2
and the view is the view, the view controllers view
and the width let's have a new constant here
and I will name this constant slide in menu padding.
So all the way up here let's just create that lazy var
and I'm just going to tell you in a second why that lazy
would be a lazy variable. Slide in menu
padding, there it is. It needs to be a CGFloat
and now we are going to use the widths 30%.
So self dot view dot frame dot width and multiplied by 0.30, okay.
So that would be 30. Of course you could use a constant like
40 or whatever, but yeah this is really, really handy.
So what we're going to do is copy this out and
because we need to access self that is why it needs to be a lazy variable by
the way. Let's copy this out and paste it in
and there. So let's see how this looks like, .okay
Yeah and it won't be, you won't really see
too much but yeah that that's how it is.
It's the system background is here and the system grey
five is here. So really, really nice. Now we want to add the container view.
So container view, pin and I think it's edge.
Yes! Edge to view and that is our view and
of course you already know this will take care of everything.
Now we should see just a simple white background.
So it's on top of our menu view. So next up we want to set up the logic on
the menu bar bottom item tapped and yeah this
is where the magic comes in and we are
going to animate it. And let's just start typing in and you
will understand how this looks. But before we do that let's just create
a variable on top of this. Is slide in menu pressed.
So let's create a var and is sliding menu pressed and that will be
false because presented, sorry because the
sliding menu isn't presented just like or a side menu
whatever. So let's just go over to our menu bar
bottom item tapped and let's create our UIView.
So UIView dot animate and just use the one
with the longest one basically, with duration delay, using spring with damping,
initial velocity and so on. So with the duration
0.5, I found it really good delay 0,
using spring with damping 0.5. This is kind of the dam,
the kind of bouncing effect on the view when it's
completing. Initial spring velocity. That should be zero.
Options. Now ease in and out, so ease
in out it's really nice option for the animation
and now here we have our code and our completion.
Now let's take a look at the completion first.
So finished.
So finished. So whenever this animation is finished let's just
print out
animation finished and let's add in here our
finished and once the animation has finished,
we want to toggle the is slide in menu pressed. So self
is presented, is slide in menu presented dot toggle, okay.
So what do we want to do here? Well basically we want to
set the origin of our container view. Well the X origin of our container view.
So let's just type this out and you will understand.
So self dot container view. Container view dot
frame dot origin dot X. So it will grab the X value of
our container views frame and this should be either zero when it's in place
or just pushed away. So how do we do that? First of all we want to
check if is sliding menu is presented. So go ahead and type in self dot
is sliding many presented question mark. If it's presented then we
want to move back and set the origin X to zero,
otherwise we want to go ahead and self
on the container view dot frame, grab the width of our
container view and remove the padding that we just set up in the
lazy variable dot slide in menu padding and
basically that's it. Let's just build and run and see how this looks like.
And there it is and there it is and as you can see
we have our animation with, animation finished to true. Let's show
that again. Slide in, slide out how awesome is that!
Go ahead and add any labels or whatever
into the container view or the menu view. Now it's your turn to add this
awesome slide in menu navigation into your apps.
Now if you did like this video and you do like my teaching style
go ahead and check out rebeloper.com/mentoring
where I can coach you one on one. Now if you did like this video
then go ahead and hit that notification bell because in the next video
we are going to talk about UIPage View Controller, that's right
we are going to swipe through those pages.
While you wait for that make sure to check out these videos as well too
I talk a lot about SwiftUI, Swift in general and UIKit and as usual
I will see you in the next one.