Hey Hey welcome back Anjani be here with slopes dot com.
And in this lesson we are going to get our slide when you working with S-W reveal so you know it'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 smacker project.
I'm just going to drag that right here.
OK here we go.
So I'm going to.
First thing let's jump into may not storyboard but we are going to do is we are going to change the
type of our controller right here to a 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
our chat ABC 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 with 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 view 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
the position left side most removed.
You know all this kind of stuff if you jump into the file and it'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 properties 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 the main storyboard.
So we have set our first initial view controller as the S-W reveal controller.
So now we need to add our front and back and you can.
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 new view controllers so that one and that one.
So this one up top is going to be higher.
Channel Visi and or the menu.
And this one's 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 back and this one is going to be different.
So how do we how do we tell our review of you 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 hold
them 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.
Ken.
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 view controller 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 slip 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 we're OK.
So that lets the rest of the review of 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 segue here
in the attributes 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.
We're not going to use this one so I'm just going to delete it so this the default view controller file.
I'm going to delete and say move to trash and just 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 re organize things
so controller and then newgroup you.
And then another group model.
So we're going to need two new controller files so we're going to click on the control group and put
a new file and we're going to create two new Cocco touch class subclasses of a controller.
So I'm going to say Make sure you got Iowas and cocoa touch class elected and say next.
And the subclass is 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
the storyboard right here.
So when would 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 menacing next hand 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 ABC.
So now this is a view controller in the storyboard view file is hooked up with this channel beside us
with File.
We're going to do the same thing here with the chat.
So this looked to make sure that 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 some 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 pinnate 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.
So there we go.
And next up we need a button and a label type in button here and pull this over right here and a label
as well.
I'm 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 assett that we put in and that's called
SMAC burger.
OK.
It's right there and it 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 width is going to be 24 and the height is going to be 18.
It's going to add those four constraints.
And then for this guy who has change the color to what I want to change the color to white.
And let's go ahead and constrain him we're going to center it horizontally horizontal and container.
So that gives 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 we're going to just go ahead and say
we're going to center this label with the buttons when I say center vertically we go.
So it's good.
And I'm just going to call this Mac for now.
All right.
So it looks good.
So now the next thing we need to do is give this button 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 the option and click on our chat
Visi dots with 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 outlet's as I like to do just personal preference and then
I'm going to select our button over here and storyboard.
I'm going to control drag.
You can control drag from here or here.
Sometimes I like to control drag 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 an action but we're going to actually add the action manually here
in 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 jump back here into our chat.
These see us with file.
Ok I'm going to delete this comment
and we're going to do is we're going to say menu button and we're going to add a target and an action
for this.
If you say add target you'll see here it 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 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 never 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 view 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 dot 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 or you'll not reveal puggle 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 are usually added to the 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 were 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 I'm thinking 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 loser.
That's really easy to do with this so all we got to do is say self dot view and we're going to add a
gesture recognizers it's helped that dot add gesture recognizer and all we got to do is hey self-taught.
Self-taught reveal a view controller thought Pan gesture recognizes this is the end of the slide to
to open it up.
And then the tap one may go ahead just close that's right here.
So that looks better.
I say self-taught you can add gesture recognizer and self-taught reveal you control or tap gesture recognize
her.
OK.
So all we're doing is we're just adding gesture recognizes that are already built into the S-W reveal
files.
If you go ahead and command click you can say jump to definition and you can see here the polling method
will provide a pan 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 you're 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.
That's 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 you check out our designs see here.
And see here it looks like that there is a lot less here.
So let's go ahead and fix that.
The big reveal controller is actually quite customizable so it can jump over here into the channel.
See you 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 reveal
with OK so we're going to say self not 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 a 20 here and we'll run this again.
Encasement I click this and we should only see a tiny bit of the back rear view.
You know 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 dot with her dot sized dot with minus 16.
So are saying the rear view should take up all of it except 60 points.
OK.
And that'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 tap 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 to here in the slide menu.
Just a couple of things that I wanted to show you if we jump back over to our review of your controller
File here in the new 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 to just to kind of show you click on this and it should open pretty
slow.
So pretty slow.
All right so I'm 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 we 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 a pretty powerful way.
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.
You guys are 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 to
say get commit so get status.
All right so here we have our everything that we've changed since our last lesson.
So when I say get ad get commit dash em and they say end of lesson two.
All right.
So I will see you all in the next one.