Circular Transitions! (Swift in Xcode) Video Lecture | Swift in Xcode: The Complete iOS Development Guide - App Development

hey what's going on everybody today I'm
going to show you how to do circular
transitions with Swift and Xcode now we
are actually going to use a thing that's
already done on github but you can
always program yourself just by looking
at those files and sorry if I sound a
bit boring at my video it's because my
throat really hurts right now and it's
kind of hard for me to talk anyway
without any further ado let's get
started alright so first thing we need
to do is actually check out a github
page right here so I'm going to open
this up this is a github for radio
transition under source Swift now of
course you can program this whole radio
transition and get to your liking
yourself but I don't want to do that in
this tutorial it's just going to be way
too long so I'm gonna take these files
that right here and this is going to
make it a lot easier for me to implement
inside of my app so I'm going to
download the zip file open it up head
over to the radio transition underscore
swift master and inside of this we want
the radio transition source as you can
see here so we're gonna go down here to
Xcode create a new Xcode project and
this will be a single view application
and click Next in our product name I am
just going to call mine circular trans
and then we have a language will be such
a swift and our devices will be set to
universal this transition is a universal
transition click Next and create and now
let's go down here and I'm just going to
implement these files that I have for my
radial transition source so I'm going to
take these three files right here new
folder with selection and I'm just going
to call this our transition files and
now we can take these transition files
just click and drag them into our
project like so you can say copy items
if needed finish and then this will copy
the items inside of your project like so
and now implementing these files into a
project is very easy as well you can
actually read through his thing right
here and it shows you how to for push
simple simply use this for pop you
simply use that to enable swipe to back
or to disable whatnot but one thing
you'll notice is that in his examples
here he says self-taught navigation
radio push controller and it's a second
view controller nib name so if you don't
know where how to work with nibs that
I'm going to show you how to use the
normal storyboard you can of course go
to this project and you would know how
to
implement nibs if you wanted to but I'm
gonna use a storyboard because that's
what I'm most familiar with so let's
head back over to our project make this
a bit bigger and let's head over to our
main dot storyboard so right inside of
our view controller right here I'm just
going to keep that but I'm going to add
a navigation controller like so this
will allow us to navigate through our
controller is easier then we can go
ahead delete this root view controller
then right-click or ctrl click and drag
from our navigation controller right
here to our view controller and we're
gonna say root view controller and this
will make this navigation controller
control the other controllers that we
link with that now we can also take this
arrow and make the navigation controller
the initial view controller now we also
want to add one more view controller so
I'm just going to click and drag that
right into my scene right here this is
going to be the view controller that we
move to and let's I will get to the
naming of things in just a minute now on
this main view controller we also want
to add a button so this is going to
allow us to transition to the other view
controller so you have this button here
I'm just going to add a few constraints
Center vertically Center horizontally
like so then I can also open up my
assistant editor and I'm gonna right
click or click and drag from this button
over to my view controller this is going
to be an outlet and our name of this
will just be BTN main you can of course
name this whatever you want and connect
then we also need to add a function to
this view controller so I'm going to
right click or control click and drag
from our view controller over to our
view controller dot Swift so right click
or control click and drag over to our
view controller dot Swift and this will
be an action now this action will just
be our BTN action like so and then we
have the act make sure the connection is
in action and then connect now instead
of this action this is where we're going
to handle this transition so let's go
ahead go down here and we're gonna save
our second view controller will be equal
to and this is going to be our self dot
storyboard dot instantiate view
controller with identifier and then the
identifier of this view controller we
actually need to head back over to our
main dot storyboard and right inside of
this view controller right here if you
head over to the identity inspector
right here we can
to the identity and this will be the
storyboard ID right here so I'm going to
call the idea of this called second VC
like so so now if we were to access this
we need to head back over to our view
controller right here and we're going to
make the identifier second VC like so
and then right now it doesn't really
know if that's going to be of
uiviewcontroller so we need to say as
exclamation point a UI view controller
we are casting this as a UI view
controller we're telling it this is a
view controller II don't worry now we're
gonna go down here and we're gonna say
self navigation controller dot radial
and for some reason this is not popping
up with the rest of the function so we
need to actually go up here to our
transition files right here I'm going to
take all three of these and just move
them right out and say finish and for
some reason this will work perfectly but
the way we implemented it before doesn't
work perfectly so now we should be able
to access what's inside of these files
so let's head back over to our view
controller dot Swift and inside of here
we're gonna say self dot navigation
controller not radial push view
controller like so and reach wanting us
to push a view controller or a view
controller that we want to move to in
this case we want to move to our second
view controller so we can say second
view controller like so we can set the
duration I'm going to set this for one
second right now that way we can see
everything that's going on our start
frame is going to be where do we want
this to start I want this to start from
our BTN main dot frame so I'm going to
make it start from that frame so I'm
going to go over here and say transition
completion and say nil so now if we were
to actually build and run this right now
we should get that circular effect going
on but we wouldn't actually really see
it if we head over to our main dot
storyboard you can see that these are
both white so we've been really see an
effect but let's click on the second
view controller right here click on the
right side right here and we can click
on this view controller go over to our
attributes inspector change the
background color and I'm gonna change
this to just a teal color and then we
can build and run and now if I were to
click this button as you could see it
grows out in the circular motion over to
the second view controller now it does
have this back button right here now if
we click on that it's just any normal
thing but we're gonna change that right
now so let's head back over here and
we're
go up here to our file new file and this
is going to be a swift file click Next
create and now this file will be our
second view controller file so I'm going
to actually change the name of this so
I'm going to say second VC that'll be my
second view controller dot swift and
inside of this we're gonna say class and
then we want this one that it has the
name and the superclass the name of this
is going to be a second VC the
superclass of this will be a
uiviewcontroller but the first thing we
need to do is say import UI kit like so
and now we can say the super class will
be UI view controller now inside of
these properties and methods we want to
set up a few things so let's say
viewdidload so as soon as the view does
load we want to say we want to create a
function for this back button so if I
click this button you will see that
there's this back button so we want to
create a function for that we can click
back right now but we want it to be that
circular motion backwards so let's head
back over here and I'm going to go into
my viewdidload and say self navigation
item dot left bar button item so we're
going to change the function of this
back button right here so let's go back
and we're gonna say will be equal to and
this is going to be UI bar button item
and then open parenthesis and this will
be our title style like so our title of
this is going to be whatever you want it
to be it's going to be either upper case
back or lower case back or whatever you
want to put in there the style this will
be a UI bar button item style dot plain
our target will be equal to self at this
means that we're going to edit the view
controller itself now for this last
action we actually need to create a new
function so I'm going to save func
simple pop open parenthesis and inside
of this we want to create a sender and
then colon and this will be a UI button
like so and then close off the
parentheses open curly bracket enter
close curly bracket and inside of this
this is going to be our action that when
we click that back button it's going to
do a circular transition back to the
original view controller so we can say
self dot navigation controller dot
radial pop view controller and then we
can actually delete everything and here
if you want you can edit the duration or
in the start frame but you can also do
that in the file
itself but I'll explain that in just a
second so let's delete everything inside
of that and now we were actually just
calling that function now inside of this
action up here we can just say open
quotes into my closed quotation Market
simple pop colon like so and I now the
second view controller dot Swift is
actually not hooked up to our main dot
storyboard so let's head back over to
our main dot storyboard click on the
second view controller right here and we
need a head over to the identity
inspector and we're just gonna do the
class and set this equal to second VC so
now this file everything that we put in
here is going to edit this so now if we
were to build and run this we can click
on this button it transitions over and
if we click back it transitions over
like that and also in a normal view
controller you would actually be able to
swipe to the other view controller so
let's head back over to our project head
over to second VC Swift and inside of
our view did load we can say is self dot
- navigation controller dot to enable
radial swipe like so now if we were to
build and run this you can click on this
button here it moves over and we can
swipe to the other side so we can swipe
over to the other view controller so
click on that button swipe back now if
you want to edit any of these attributes
that are in such as the radial pop view
controller you can head over to the
actual files themselves and just change
whatever you want so we can add the
radial push for your controller and
change the duration of this and the
start frame of it and other things like
that if you want now if we head back
over to our view controller dot Swift
let's say I want the start frame of my
button to be actually a cg rekt and then
open parenthesis and right here is your
x and y values and our x value I can set
this equal to so our self dot view dot
frame dot width like so and then this
will put it in the top right corner I
can set my Y to zero my width to zero
and my height to zero like so and if I
were to build and run this you can see I
Agana click this button here and now
it's growing from the top-right corner
so you can really pick anywhere you want
for this the circle to grow out of when
a button is clicked thank you all 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 from you in the
future be sure to subscribe thanks again
and I will see you in the next one