Hey Hey welcome back Anjani be here with dot com.
And in this lesson we are going to get our slide when you're working with S-W reveal.
And so that's going to be pretty cool.
Let's jump right into it.
First thing that we are going to do is open let's see open looks like I accidentally created the supporting
files folder outside of our project.
I'm just going to drag that right here.
OK here we go.
So I'm going to.
First thing let's jump in to main storyboard and what we are going to do is we're going to change the
type of our view controller right here to a new class of s w reveal a view controller.
So what the SMB reveal controller does for us is it gives us a whole bunch of already built in functionality.
So if you come over here to the DOT H and Dot m files and you kind of look through here you'll be able
to see some of the stuff that you're able to do.
So basically what we have is how it's going to work is we're going to have two main view controllers
are chat Visi and our channel controller and the chapt controller is on top of the channel of control
or the menu view controller OK.
And so when we look at what has to be real control it does for us as it does all the work behind the
scenes to kind of maintain those two controllers.
And when we do a click or a drag it pulls out the bottom of your controller so that we're able to see
it and when it's done it just slides back in.
And so it does all that kind of work for us under the hood here.
So you can kind of see some of the the the the properties and methods that we're going to be using from
view position left side most removed.
You know all this kind of stuff if you jump into the DOT m file and that's here what do we have.
If you come down here to the net See here
do a search for.
Here we go black.
Color in default property so you can see some of the default properties that the reveal that the slide
menu will have.
Right off the bat and I'll show you how how to adjust some of these as as you need here.
Here in a little bit.
But first off let's go ahead and jump back into may not storyboard.
So we have set our first initial view controller as the S-W reveal View Controller.
So now we need to add our front and back and you control it.
And I just I just zoomed out here in the storyboard holding down option and moving my scroll wheel.
OK.
So just a heads up and then going to pull in to view to new view controllers.
So that one and that one.
So this one up top is going to be Haar a channel Visi and or the menu.
And this one is going to be our Chad b c.
So opening up our mockups just to kind of show you this bottom line here is this guy right here the
chat visi.
And then this top one here is going to be our menu with our channels and the options.
OK.
So this one is going to be the back and this one is going to be different.
So how do we how do we tell our review of view controller.
Which one is which.
Well all we got to do is right here we're going to create segues to each of these controllers and when
to hold down control and drag right here.
And instead of like a show or a detail or motile we're actually going to use one of these custom segues
that we get as part of the S-W reveal files and we're going to do reveal a view controller set controller.
OK.
And then we're going to do the same thing for our front controller.
And so as just control dragged.
And I'm going to select reveal a controllers set to controller as well.
So how do we know which one is which.
Well if you look at the Segway right here you can either look that here in storyboard or right here
in the view hierarchy and come over to its attributes.
Inspector we're going to do is we're going to say right here in identifier we're going to say S.W. we're
going to say rear.
OK.
So that lets the rest of the review over your controller here know that this is going to be our rear
view controller.
OK.
And then for the bottom one on our front we're going to say here in the slutting the custom Segway here
in the attribution inspector in the identifier we're going to say S-W underscore front.
All right so now as the reveal controller knows which one is the front and rear view controllers.
But first we need a couple of controller files for these.
I'm not going to use this one so I'm just going to delete it so this is the default view controller
file.
I'm going to delete and say move to trash.
And let's go ahead and create some some folders here to organize our project.
So we're going be following the MVC paradigm.
Looks like we got a little bit mixed up here.
Model view controller.
And so I'm going to create three groups for each of those.
So to start with a controller because if you do it backwards then you don't have to worry organize things
so controller and then newgroup you.
And then another group model.
OK.
So we're going to need two new controller files.
So we're going to click on the controller group and put a new file and we're going to create two new
Ko-Ko touch class subclasses of a controller.
So I'm going to say actually got Iowas and cocoa touch class looked at it and say next.
And these subclasses are already set for us you have your controller.
So the first one we're going to say chat the C we do not need to create a zip file because we're using
this story board right here.
So I say next and create and then we're going to create another one that's going to say new file Cocco
touch class.
What's next.
And I'm going to say channel Visi kidding when I say next can create.
All right so let's go back into Moondust or board and hook hook these up.
So here we're going to select here in with a view controller selected We're going to change it's custom
class to our channel visi.
So now this is a view controller in the storyboard view file is hooked up with this channel beside us
what file We're going to the same thing here with the chat.
So this looked to make sure that view controller here is selected and here in the class I'm going to
say chapt BBC.
OK.
So now these are hooked up so let's go and look at our designs again.
So the bottom one looks like we have a blue view up here that contains our menu button and a label right
here.
So let's go ahead and do that.
So here in the Phil terminal type in your view.
And I'm going to just pull this in right here and resize this a little bit and just go ahead and ask
what constraints I'm going to zoom in using Option and the scroll wheel again and right down here.
We're going to add new constraints and I'm going to pin it zero from the left top and her right hand
give it a height of 77.
So now with those four constraints it is fully constrained and it knows where it needs to be at all
times.
OK.
So now you see that we have all of the lines blue.
So that means we're good.
Let's go ahead and give it a background color.
OK so this background color here I'm going to use the hex.
Let me just grab it right here.
All right so the hex is for a 4 DD 8 and this is actually just a placeholder for now because here in
a little bit we're actually going to make some cool gradient files so you can actually pick whatever
you want for now right here.
Whoops I forgot to say return.
Right so there we go.
And next up we need a button and a label to type in here and pull this over right here and a label as
well.
Kids are going to zoom in kind of hard to see this blue here so I'm just going to delete the text and
this is going to be an image.
So right here under image and that's going to be our hamburger asset that we put in.
And that's called SMAC burger.
OK.
It's all right there and looks a little too big for us so is going resizes to add some constraints.
I'm going to say 12 from the left 12 from the bottom the with is going to be twenty four and the height
is going to be 18.
It's going to add those four constraints.
And then for this guy here is change the color too.
That's not what I want.
Change the color to white and let's go ahead and constrain him we're going to center it horizontally
horizontal in container.
So that gives it that gives its position in the horizontal direction but it also needs to know where
vertically it needs to be.
So I'm going to control and drag to our button and so we're going to just go ahead and say we're going
to center this label with the bands on the space center vertically.
There we go.
So it looks good and I'm just going to call this Mac for now.
All right.
So looks good.
So now the next thing we need to do is give this button an action because when we click on this button
that's what's going to make S-W reveal slide the top one over and reveal what's underneath it.
All right.
So I'm going to say we need an outlet for that so I'm going to hold option and click on our chat Visi
toss of the file open up our assistant editor and I'm just going to delete some of this unnecessary
stuff that we don't really need.
I'm going to create a little header for my outlets has I like to do just personal preference and then
I'm going to select our button over here and storyboard and I'm going to control drag.
You can control drag from here or here.
Sometimes I like to control direct from the hierarchy because it can be more accurate.
And this is going to be just an outlet you might be surprised because thinking that this you know this
is something that we want to have in action.
But we're going to actually add the action manually here and the view did load function.
Ok so I'm going to say menu button.
Right so that's an outlet not an action it's an outlet.
And there we go.
All right so that's that's all the connections we need for right now.
So I'm going to close the assistant editor and come back here into our chat.
These see us with file.
Ok I'm going to delete this comment whoops and we're going to do.
We're going to say menu button and we're going to add a target and an action for this so if you say
add target you'll see here says Associates a target object an action method with the control and you'll
see here some of the parameters is a target an action and a control event.
All right so if we had done the action drag over one of the things that you'd have been asked is what
the control event is which you're probably familiar with we usually pick a touch up inside.
So that's what this UI control event is.
The selector is the method that is inside S-W reveal controller files.
We're going to get.
And the target is also going to be the reveal controller.
OK so we're going to select that and the target is self dobbed the Viele the controller action.
We're going to create a selector here so you say hash tag selector and that is going to be S-W review
view controller that reveal toggle.
OK.
So what we've done here is we've created a selector which is just kind of a way of saying this is a
method that we are going to invoke.
OK.
And then the method that we're invoking is from the S to be review of your controller file and reveal
toggle.
And if you actually command click on revealed that reveal toggle you can say jump to definition and
you'll see here we've got some comments kind of telling what this does a little bit says the following
methods are meant to be directly connected to the action method of a button to perform user triggered
position change of the controller views.
This is usually added to a button on top left or right of the front view controller and that's exactly
what we've done.
We've created a button put in the top left and we are adding the the selector method to it.
OK.
And then for you I control the events we can just do dot and touch up inside.
All right perfect.
So I'm going to save that and I'm going to run this on an iPhone 6.
Yes.
And we're going to see if this works.
All right so here we go.
I'm going to click here and.
Oh wow.
Could it be that easy.
Yes it is.
So you know this is a pretty powerful library that we that we're using.
And yeah I mean that's that's all you have to do to get this working we can do a little bit of customisations
make things look a little bit easier.
I think that we want to be able to drag right here.
You know you do a drag test drag and it opens it and then once it's open if you like tap over here then
it just slides shut.
All right.
So let's go ahead and do that.
Those are really easy to do with this so all we got to do is say self-taught view and we're going to
add a gesture recognizers help that you dot add gesture recognizer and all we got to do is say self-taught.
Self-taught revealed a view controller thought Pan gesture recognized.
So this is the slide to to open it up.
And then the tap one may go and just close this right here.
So that looks better.
I say self-taught.
You can add gesture recognizer and self-taught reveal the controller or tap gesture recognizer.
OK.
So all we're doing is we're just adding gesture recognizes that are already built into the still be
revealed files so if you go ahead and command click you can say jump to definition and you can see here
the polling method will provide a pen gesture recognizers suitable to be added to any view in order
to perform usual drag and swipe gestures to reveal the rear views.
So yeah same thing here with the tap gesture recognizer.
So you can tap to to close it out.
All right so let's go and see if that's working.
Going to go back here.
Save this and run it.
All right so I'm just clicking and dragging and hey check that out.
Pretty awesome.
All right and then I'm just going to tap here and boom closes.
So easy to implement.
All right.
So that's awesome.
The only thing here though is see there's quite a bit of space here that is being covered up for the
rear view control and if we check out our designs see here see here it looks like that.
There was a lot less here.
So let's go ahead and fix that.
The big reveal of new controllers is actually quite customizable so it can jump over here to the channel.
You see we've got some stuff we don't need here.
Delete that.
Delete this comment.
And what we're going to customize here is we're going to customize what's called the rear view you with
OK I'm going to say self reveal your controller.
Rear View reveal with OK so this is a measure of how much the rear view controller is shown.
OK so we can just kind of show you my seat 20 here and will run this again.
Encasement I click this and we should only see a tiny bit of the back rear view.
It's just a tiny bit.
We want most of it to show so we're going to say we're going to say self-taught.
You framed it with her dot sized dot with minus 16.
So we're saying the review should take up all of it except 60 points.
OK.
And let's going to then run and see how that looks.
All right so let's go ahead and see how that looks and then click and there we go.
That looks about right.
So we're going to be showing most of the back rear view controller.
So that looks pretty good.
We've implemented the slide menu.
We have some gestures to pull it out.
And to top it we've set the back distance that we want.
So yeah I mean it's looking pretty good.
This is about as much functionality as we want here in the slide menu.
And just a couple of things that I wanted to show you if we jump back over to our review of your controller
m file here in the default properties you have a whole bunch of properties that you could modify if
you want something.
Things like the toggle animation duration.
So for instance if you change this to two just to kind of show you click on this and it should open
pretty slow.
Yes.
Pretty slow.
All right so going to change that back or if you wanted to change something like The Shadow radius offset
the color.
We could do something like red color.
So when we open the shadow now there's a red or we open the menu there's a red shadow now looks pretty
bad.
It's going to change that back to black color.
All right so you just kind of wanted to show you how customizable it is there's a whole bunch of methods
that we're not going to be needing to use.
But if you want to dig into this there's you know there's a lot of stuff it's pretty powerful.
I mean it's pretty cool so I hope you guys are digging it so far and in the next lessons we're going
to start adding all of the UI elements like the table views and and the the other images that we're
going to be using.
So yeah because we're enjoying it so far.
Let's go ahead and add our progress so far.
So let's see here.
Because I never committed last time I say get commit so get status.
All right so here we have everything that we've changed since our last lesson.
When I say get add stopped get commit dash em and they say end of lesson too.
All right.
So I will see you all in the next one.