Making a Slide Out Menu (Swift in Xcode : SWRevealViewController) Video Lecture | Swift in Xcode: The Complete iOS Development Guide - App Development

everybody today I'm going to show you
how to use SW reveal view controller
otherwise known as how to create your
own slide-out menu with Swift and Xcode
so let's go ahead and get started
alright first thing we need to do is
open up Xcode and create a new Xcode
project this is going to be a single
View application click Next in our
product name I am just going to call
mine slide slide out menu that works ok
our language will be set to Swift and
her vices will be set to iPhone click
Next and create now let's make this a
bit bigger and let's hop on over to our
main dot storyboard now in our main dot
storyboard we have our view controller
that's already here it's programmed with
the class of our view controller as you
can see here so it's going to be edited
by the view controller dot Swift we do
not want this view controller anymore so
just go ahead delete that or no no no we
don't want to fill it may not storyboard
first delete our view controller and we
want to import another view controller
this one is just going to be pretty
blank and then we want a table view
controller up here and this table view
controller is acting is going to act as
the back view controller or the rear
view controller which is going to hold
all of our items so we can switch
between different views now down here we
also want another this will be a
navigation controller so just go ahead
add that navigation controller as you
can see and then as this navigation that
controller is being used go to our root
view controller right here and we want
to delete that root view controller and
replace it with just a normal view
controller you can of course use the
original root view controller which is
just a table view but I'm not going to
be showing you how to edit that table
view so now that we added that view
controller as you can see let's go ahead
and link that up with our navigation
controller so right-click or control
click and drag from our navigation
controller over to our view controller
and we are going to root view controller
and now that that is rooted we want to
go over to our Safari or Google Chrome
or whatever you use and go to SD
you reveal and just search SW reveal
viewcontroller now as soon as you search
this you will see John much John - Lodge
SW reveal controller on github this also
be linked down in the description down
below now let's go ahead click on that
and say download zip now inside of the
zip file you will see SW reveal
controller master 5 we want to actually
just take these two files from it that
just say SW reveal controller H + SW
reveal view controller dot M now of
course these are updated pretty
regularly so if you want to test these
files and this tutorial that goes along
with these files you can also download
the beginning project files on my
website so again just click and drag
this SW reveal controller H and M files
over to our supporting files in our
slide out menu it's going to say copy
items if needed we want to check mark
that and that's just if these items get
misplaced it won't ruin our our program
completely if because these items are
going to be copied now go finish and
it's going to ask you would you like to
configure an objective-c bridging header
we want to say yes to this this is going
to allow us to use these objective-c
files in Swift say yes and of course
these are written and Objective C but
that is the exact point to this tutorial
to show you how to use these files with
Swift now let's head on over to our main
dot storyboard go to our first view
controller that we created right over
here and change the class to SW reveal
view controller enter and now this is
going to be set to the view controller
that we have right over here now I also
forgot to add something into this
bridging header file which is actually
going to allow us to use the SW rebuked
view controller H and M files so inside
of this inside of our bridging header
files it says use this file to import
targets public headers that you would
like to expose to Swift so we want to
expose our SW reveal view controller dot
H file so in order to do this you just
say hashtag or pound import open
parentheses close parentheses and inside
of these you just want to type in SW
reveal
reveal view controller dot H so now we
are bridging these files so we are going
to be allowed to use these files inside
of our view controller now head back
over to our main dot storyboard and we
want to right-click or control click and
drag from our reveal view controller
there's this little dot right here or if
you want to do it from the hierarchy you
can click and drag from this hierarchy a
little done that you can see I'm going
to just click and drag from this yellow
dot right here and just right click and
drag from that reveal view controller
over to our top view controller which is
actually our table view and we want to
say reveal view controller set
controller now inside of this you will
see this is now a custom segue so this
will actually be our rear view
controller which will be hidden and you
can swipe to open up this view
controller in order to do this you just
click on this custom segue that we
created over go ahead on over to our
attributes inspector and inside of this
go to your identifiers and we want to
identify this as SW underscore rear this
is referenced inside of your SW reveal
view controller if you can find that SW
underscore rear it is referenced into
inside of here as your SW rear
identifier so that's what this is all
about let's head back over to our main
dot storyboard and we want to do the
exact same thing for our navigation
controller right down here so again
right click or control click and drag
from this review of your controller and
say reveal view controller set
controller now click on this and we want
to set the identifier equal to SW
underscore front so now that we have all
those set up let's head over to this
view controller right over here and we
want to hook this view controller up
with our view controller dot Swift file
so go over here to your identity
inspector and go to your class and is
going to be called your view controller
so we are editing this via the view
controller dot Swift files that we have
head back over to our main dot
storyboard and we want to add a bar
button item and this is going to allow
us to open up the our sidebar so right
down here click and drag a bar button
item onto your scene
double-click on your bar button item and
we're going to change the name of this
to open now open up your assistant
editor and right-click or control click
and drag from open over to your view
controller and we want to insert this
connection as an outlet and open is
going to be called open as the name
connect and our viewdidload and inside
of our viewdidload we want to add a
target so we actually want our Open
button to do things so in order to do
this you just say open dot target target
will be equal to and this is going to be
self dot to reveal view controller like
so so it should automatically fill that
in for you I'm not sure why I didn't for
me but open tart up and out target
equals self dot reveal view controller
and then down here we want to say open
dot action will be equal to selector
capital S selector open for deceased
close parenthesis and inside of these
you want to say open quotation mark
close quotation mark and inside of these
we want to say reveal toggle like so
with a colon at the end so now we are
going to add call a selector which is
inside of our SW review view controller
dot M files and now if we were to build
and run this we should actually have our
Open button opening up our sidebar or
actually not yet so there it down here
we had a thing that said failed to
instantiate because the default view for
view i main dot storyboard perhaps the
designated entry point was not set of
course it wants it so we need to go over
to our view reveal view controller go to
our attributes inspector and down here
we want to say is initial view
controller so now that that's done we
can build and run and now this will
actually work pretty pretty good so
click open and we have our sidebar
opening up now we don't have anything
inside of our sidebar nor do we have
anything happening when we click on this
sidebar so in order to actually make
things happen we need to right-click or
control click and drag from this table
view cell that we have over here so just
click on the table view and then click
on our table view cell
and then right-click or control click
and drag from that table view cell over
to our other table view that we over to
our view controller that we created and
say reveal view controller push
controller so now it should be hooked up
in this way that we have this custom
segue saying reveal view controller push
controller so now this has got this cell
is actually going to open things up but
there's nothing inside of the cell and
there's nothing populating this table
view so in order for this to happen we
need to go over to our cell and inside
of this you will see identifier our I
reuse identifier will just be cell we
will use this in just a minute head on
over to our file save file new file and
this is going to be a swift file click
Next and the name of this file we will
just call this back table VC for view
controller create click on our back
table view controller and we're going to
create a class so say class right here
you say the class and this is going to
be the name of it we'll just call this
back table source code just crashed on
me so it should actually be back table
VC and the superclass of a UI table UI
tableview controller not so controller
there we are and inside of this UI
tableview controller we want a
viewdidload
so our viewdidload will just be like
that and we want an array so just save
our table array will be equal to open
print open bracket close bracket and
inside of these you just want to say
string so we're going to have an array
of strings
so let's equal let's take this array of
strings and add stuff to it so we can
say table table array is equal to open
bracket close bracket open parentheses
close parentheses comma we'll just have
three of these so now we have three
objects inside of our table array and
inside of our table array if we want to
make the first one hello you can make
the second one second and world as our
third one now we want to populate the
table array with all of these arrays
that we just created so we can say table
view
going to be self or row at index path
then they also need a disco I'll just
put this right above here we need to say
table view this is going to be number of
rows in section so in order to get the
number of rows in section we need to
return we're returning a value for the
integer that we have right up here so
we're returning how many rows are inside
of our section by just saying return and
this will be table table array dot count
so we're counting the amount of objects
that are inside of our array and then
down here we want to create a cell so
it's a var cell is equal to table view
dot deck de queu you probably didn't
spell that right just then but Dec
reusable with cell with identifier and
the identifier we are going to call this
cell now if you don't remember where I
got this from you can go back to your
main dot storyboard click on your cell
and as you will see that we have a reuse
identifier called cell also make sure
it's capitalized properly or nothing
will work properly go over to our view
controller dot Swift I mean sorry our
back table VEC dot Swift and down here
we will see Dec reusable cell with
identifier for index path and this will
be index path if you're wondering where
I'm getting this from index path is
created right up here for an index path
and then we also want to add one last
thing that says as a UI table table view
cell and then go down here and we want
to return our cell so we created a cell
and this is going to be as a UI
tableview cell and with the identifier
of cell and then we're returning this
value of the cell back to our UI
tableview cell that is inside of this
function that we have up here now we
want to take the cell and we're going to
add some text so we can say cell dot
text label dot text will be equal to
text will be equal to of table array for
open square bracket close curly bracket
index path row so we are grabbing via
the index path dot Rho so when it equals
zero when the cell
zero we are going to grab hello when the
cell equals one we are going to grab
second and when the cell equals two
where you're going to grab world so now
if we were to build and run this we
should actually have our whole system
populating with this so let's open up
our sidebar now nothing happened because
if we go back to our main dot storyboard
we need to go back to our table view
that is actually our back table view
controller and set it up with the class
name so the class name we again will be
back table VC so we assigned our class
to this view controller actually here it
is our class should be back table VC and
make sure it's highlighted blue or else
it's not going to be right because
you're probably editing something else
so now let's go ahead build and run and
now we should get to our table
populating so there we have it we click
open it opens up with the side and
another thing I want to do is add a
gesture so this gesture is going to open
this from the side now so if we go back
to our back our view controller dot
Swift we want to say self dot view dot
add gesture recognizer and this gesture
recognizer will be equal to you self dot
reveal view controller dot pan gesture
recognizer so when we pan across the
screen we are going to actually make our
sidebar open so we can open it up by
clicking and dragging across our screen
like so and when you click on second
you'll see that it actually opens up our
view controller as well now let's
actually change values when we actually
click on a certain cell in order to do
this let's open up let's click and drag
a label onto our scene like so we'll
just put it right over here and we can
take this label and we're going to have
connected up in our assistant editor
over to our view controller dot Swift
file right-click or control click and
drag from this label and we're going to
set this as an outlet and we'll just
call this label connect that and now we
also want to create another variable and
we'll call this label var so var and
then we'll call this var view as our
name and this will be equal to an
integer exclamation point or actually
open parentheses close parentheses
so now that we have that done we have
our view and it's going to be equal to
an integer now what do we want to do
with this bar view we can easily just go
down here inside of our viewdidload and
we could say if our VAR view is equal
equal to zero then we want things to
happen or it's say else else then we
want other things to happen such as the
label dot text will be equal to others
and up here we can say if the bar view
is equal to equal to zero we can say
label dot text will be equal to strings
that's that's the best thing I could
come up with let's go over to our back
table view controller and now we want to
pass this data along so in order to do
this we say prepare for segue and inside
of this prepare for segue we want to
create a destination view controller so
we could save our dust BC will be equal
to our segue dot destination view
controller this will be as our view
controller so we're creating this
destination view controller and we're
setting it as our segue destination view
controller and this is going to be our
view controller now we want to edit
things on our view controller dot Swift
file so it's head back over to our view
controller dot Swift file and as you can
see the file is a bit blacker than
everything else that means it is not
saved so go back to our view controller
dot Swift and hit command s to save our
file and that should lighten things up
now go back to our back table VC and we
want to say desk VC dot and we should be
able to actually take our value from our
view controller dot Swift file and
change it so we can say desk VC var view
will be equal to our index path we don't
have an index path chest yet so let's
also create an index path so in order to
add our own index path we just save our
index path this will be the name of it
of course :
NS index path and this is going this is
basically naming it so we're giving it
the name of index path and it's going to
be an NS
Dex path we say is equal to our self dot
table view dot index path for selected
row so we are going to index the path
for selected row and we're going to
return that as our index path now it's
saying I need something else it is an
exclamation point to instantiate it so
inside of here we see desk view
controller dub our view and we will make
this equal to our index path row so
we're grabbing what specific row it's
going to be and we're going to change
the label dot text accordingly as we
just did in our view controller dot
Swift so now let's build and run and we
should see that our string is just
string right now and we can click on
second and it's going to turn into other
we can go into world and do the exact
same thing and when we click on hello
again it's back to string so that is how
you would edit one view controller now
I'm going to show you actually how to
take multiple view controllers and edit
them likewise so go over to our main dot
storyboard and we're just going to
delete this view controller that we have
right here let's go ahead and add
another view controller and this view
controller will basically used exactly
like the original one but we're also
going to have several different items at
several different view controllers so
let's click and drag three view
controllers in here and you can edit
them however you want so now we have
three view controllers like so I'm not
saying this is the best way to do things
just because it's better to not have so
many view controllers because that takes
up a lot of space I did that in one of
my apps and it took up a lot of space
but so you want to actually use as few
view controllers as you can let's so
let's close up our assistant editor so
you can please see things a bit better
right-click or control click and drag
from our navigation controller and we're
going to say reveal view controller set
controller like so now we have that set
we want to also go back to our table
view and inside of our table view you
will see when we click on this cell we
want the identifier to be set to nothing
click on our table view as you will see
and we're going to set the number of
prototype cells equal to three or equal
to the amount of view controllers we
have so now that we have these three
down
we can right-click or control click and
drag from the first cell and we're going
to say reveal view controller push
controller for our first one do the same
with this one for our second view
controller and lastly for this one right
click or control click and drag and
we're going to say reveal view
controller set push controller so now we
have these three and let's click and
drag a switch onto our scene and
activity indicator just so we can tell
the difference for every scene that we
have so that makes it a lot easier so
now let's head back to our back table VC
dot Swift and inside of this we just
want to take out this prepare for segue
that we did in the last one as we are
not going to be using it this time
our table array you want to keep this
the same and inside of our VAR cell
equals table view Dec reusable cell with
identifier we want to replace the R text
with our table array open square bracket
close bracket bracket and we're going to
put this as our index path dot row so
now we have our index path dot row so it
will either be hello second or world and
now let's go back to our main dot
storyboard click on our back table view
controller and on our first cell we want
to set the identifier equal to what was
it hello and you also make sure you want
to make sure that it's capitalized
properly let's open this up
hello second and world so again our
identifier will be second and our last
identifier will be world so now that we
have all three of these set let's build
and run and we should get our populate
our populating View controller oh I
accidentally hooked this up prop
improperly this should not be set push
set view controller this should actually
just be a root view controller so right
click or control click and drag from
your navigation controller over to our
view controller and say root view
controller now let's build and run and
we shouldn't get this black screen that
we were getting before now we have this
and again we don't have gestures so in
order to do this we just need to say
file new file and this is going to be we
need to create a swift file for every
viewcontroller that we are using which
is another reason why not to do this
process although if you're wanting to
use several different view controllers
you can use this process so we're going
to save this swift file as just our
hello yeah we'll call it hello dot Swift
and inside of our hello dot Swift we can
say class and our class name will be
equal to hello of the superclass of a
uiviewcontroller like so and in our
products name we can say viewdidload we
don't want anything to happen really
when the view loads except we want our
duet except we want to add a gesture so
we can say self dot view dot add gesture
recognizer and again this is going to be
what we did before self dot to reveal
view controller dot japan gesture
recognizer so we're adding a gesture
recognizer onto our scene and now we
need a hook this hello dot swift over to
our main dot storyboard so click on our
view controller that you see right here
and go down to our identity inspector
click on the class and we want to set
the class equal to hello and now that
will be our first view controller so if
we were to build and run this we can
just swipe from the left and now we have
these popping up now we can click on
second and it opens up our second view
controller now the problem with this is
you don't have the add gesture
recognizer again so if you want to add
that you need to go file new file Swift
file this is going to be our second we
can create that go inside of our second
dot Swift and do exactly the same thing
that we did for hello except with a
different class name so I'm just going
to copy and paste what's in hello to
second and instead of the class being
Hello we should call this second now
let's go back to our main dot storyboard
and go to our second view controller
close up our assistant editor and we're
going to call the class of this equal to
second so now if we were to build and
run this we will have our second view
controller having our gesture recognizer
as well
so second world there you have it that's
it for this tutorial if you enjoyed it
be sure to hit that like button down
below and if you want to see more
tutorials like this for me in the future
be sure to subscribe anyway thank you
all so much for watching and I will see
you in the next one