Snapchat-Like Menu! (Swift in Xcode) Video Lecture | Swift in Xcode: The Complete iOS Development Guide - App Development

[Music]
hey what's going on everybody today I'm
going to show you how to do a snapchat
like menu with Swift and Xcode so let's
get started
alright so first thing we need to do is
head over to our Xcode project create a
new Xcode project and this will be a
single View application click Next and
our product name I'm just going to set
this equal to menu although you can
really call this whatever you want our
language will be set to Swift and our
devices will be set to universal now
this is a universal concepts if you do
it properly so this will work on all
devices as long as you've set things up
properly click Next and create now let's
make this a bit bigger and first thing
we're gonna do is head over to our main
dot storable and we just want to add a
scrollview onto our scene so just go
right down here and we want to click and
drag a scrollview click and drag that
onto our view controller like so and
then we want to set up constraints so
we're gonna right click ok to click and
drag from a UI scroll view over to our
view and our hierarchy right over there
and we want to hold shift and say Center
horizontally Center vertically equal
widths and equal Heights click enter and
that'll set up all that constraints for
this UI school view that's all you need
now let's go ahead and create the views
that we're going to put inside of this
us go view so let's go up here we're
gonna save file new file and under iOS
source you will see cocoa touch class
right there so click Next and this will
be the class of a view controller in the
subclass of a UI view controller now
this concept does work with the UI
tableview controllers and UI collection
view controllers but to keep things
simple I'm just going to use a UI view
controller now say also create nib file
and then our devices will be set to
iPhone although this does not mean that
it's only going to be for iPhone we are
basically going to set it to the size of
our UI scroll view so this doesn't
really matter our language will be such
as Swift and then click Next and create
and also make sure the name of it is not
view controller dot Swift or you might
replace your old file so we're gonna say
the class name is equal to view 1 sorry
click Next
and create so now as you can see we have
our view 1 dot Swift and our view 1 nib
file
now this nib file essentially is just
like a view a UI view that we can edit
with a view 1 dot Swift so you can think
of this as like a view
controller inside of here but we're
going to actually take that view that we
created and put that inside of a view
controller now there is a way that you
can just use the storyboard itself but
that is a longer process and this nip
file way is a lot easier now inside of
our nib file right here I'm going to
just change the background color of this
to just some random color and this will
just allow us to see that we have added
this view onto our view controller dot
Swift so let's head right over to our
view controller dot Swift now first
thing we're actually going to do inside
of this view controller dot Swift is
head right over to our main dot
storyboard even that's a sounded
contradictory let's open up our
assistant editor and we want to
right-click or control click and drag
from our UI scroll view right here and
add that into our view controller dot
Swift now this will be an outlet so now
we can actually add things onto this UI
view scroll view from our view
controller dot Swift the name of the
scope view I'm just gonna give it the
name scroll view although this is not a
recommended name as it gets confusing
click Next and creat now inside of the
viewdidload here we want to create our
first view so I'm gonna save our v1 make
sure it's not the same as view 1 and our
view 1 dots this is just a quick get
around to naming your v1 view 1 will be
equal to view 1 and then open
parentheses and as you can see there's
nothing that actually goes inside of
this UI view controller but there is
something that we're supposed to put in
there so you can just type in UI view
controller open parentheses and this is
what we're wanting we want the nib name
and the bundle so the nib name is going
to be open quotation mark close
quotation mark and this will be view 1
and the bundle will be equal to nil now
this is going to give me an error
because it's saying that view 1 is not
equal to our UI view controller so we
need to just replace this UI view
controller with view 1 now down here we
actually want to add this first view
into our view controller itself we're
gonna say self dot add child view
controller and this will be our v1 like
so so this is just going to add our v1
into the hierarchy of our view right
here so now we can access this and put
it inside of our scroll view so we can
say self dot scroll view dot add sub
view like so and this will be our v1 dot
view
so we're adding this view into our
scroll view and then we just need to say
v1 dot did move to parent to be a
controller and we're gonna say self
inside of that so it's so we're just
saying it moved to the parent view
controller so everything's good now if
we already build and run this right now
we should actually see our view on to
our scene right now so as you can see
our school was loaded on here but as you
can see I can't scroll between another
view so let's go ahead create a new view
so I'm going to save file new file and
this will be a cocoa touch class click
Next and again their class will be equal
to our view to this time a subclass of a
UI view controller also creates a nib
file right there
for iPhone language swift click Next
create and right now there is our second
view so let's click on view to nib right
now and click on that and we're gonna
just change the background color of this
to be a different color like so now
let's add this on to our scene so let's
head over to our view controller at
Swift and right in here we want to
create our view so we're gonna save our
v2 : and then this will be view 2 will
be equal to a UI view controller open
parenthesis nib name open quotation mark
close quotation mark of view to bundle
no and then replace UI view controller
with view and now we're pretty much
gonna do the same thing with our view
too as we did down here with our view 1
so we're gonna copy and paste that and
replace anything that has V 1 with view
V 2 and now if we were to actually build
and run this our V 2 would actually be
on the scene but it we need to actually
scroll over to it so first thing when
you do is actually set the frame of our
view so we're going to save VAR v to
frame : cg rekt will be equal to and
this is going to be equal to our v2 dot
view dot frame and then down here we
want to change the X origin of meaning
we want to make it off the screen to the
right so we're gonna save v2 frame dot
origin dot X will be equal to self dot
view dot frame dot width so we're gonna
make it equal to right off the side of
our seam in the
actually going to add this on to our
view itself first so we're gonna say v2
dot view dot frame will be equal to and
this is going to be equal to v2 frame
like so so now if we were to build and
run this right now the v2 frame would be
off to the right but we could not scroll
over to it so let's go ahead and do that
so we're going to go down here and say
self dot scroll view dot content size
will be equal to and it's going to be a
CG size make and the width of this will
be equal to our self dot view dot frame
dot width and right now we only have two
views so Serena's eight times two and
the height of this will be our self dot
view dot frame dot size dot height like
so now if we were to build and run this
now for some reason it was showing up as
a white color so I went back to my view
to nib and I've just changed the
background color to something else and
that seemed to fix it so let's build and
run this again and we should be able to
see our views so as you can see I have
my to the right I have this view to the
left I have this video but right now as
you can see it's just like a normal
scroll we don't want that so let's head
back over to our project go to our main
dot storyboard click on our UI scroll
view right here and in the attributes
inspector right up here here in the top
right corner we want to say paging and
abled now build and run this now and as
you can see we'll get that more fluid
look to it that it's just going to stop
as soon as it gets to its position now
of course if we wanted to add a third
view let's go here file new file and
this will be a cocoa touch class click
next and this will be our view 3io
subclass of a UI view controller also
create nib file iphone swift click next
create and now we have our viewed three
so we let's click on our view three go
over here to the background color change
it up to something else like so and
let's head over to our view controller
dot swift and we need to create this
view so we're gonna save our v3 : this
will be view 3 will be equal to UI view
controller open parenthesis nib name and
then open partition might close
quotation mark this will be view 3 like
so bundle nil and then we can switch out
UI view controller with view 3 like so
now let's go down here and we're gonna
take
these three section is again copy-paste
like so change all the v2s for VIII's
we're also gonna copy and paste these
three statements right here copy and
paste those we're gonna change this to
v3 frame the three frame v3 13 + v3 3
m-- and then right down here we're gonna
say v3 view frame will be equal to our
v3 faint frame right there and then down
here in our self dot scroll w content
size we can say self dot view dot framed
out width times 3 now that basically you
just multiply it by how many views you
have now if we were to build it on this
and also right up here in our v3 frame
to origin X we want to say two times
ourself W dot frame dot with now let's
build a run
they give us so much for watching if you
enjoyed this tutorial 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 thanks again and I will see you
in the next one
[Music]