Collection View Animations! (Swift in Xcode) Video Lecture | Swift in Xcode: The Complete iOS Development Guide - App Development

everybody today I'm going to show you
how to add animation to your UI
collection view controller using Swift
with Xcode so let's go ahead and get
started alright so the first thing we
need to do is open up Xcode and create a
new Xcode project this will be a single
View application and I'm just going to
call this app stories as I hope to
actually turn this application into
something where you actually browse
through stories but anyway let's go over
to language swift devices iPhone click
Next and create now let's make this a
bit bigger and let's head over into may
our main storyboard delete the view
controller that we have right over here
go over to your view controller dot
Swift file and then inside of here we
want to change the class of this to be a
UI collection view controller and then
now we can go back to our main dot
storyboard click on our collection view
controller right over here click and
drag that right into our scene click on
the view controller that we just created
and head over to our inside in the
inspector right over here and we want to
set the class equal to view controller
or basically what the class is over here
in our view controller dot Swift file
right as you can see right there now
let's head back over to our main dot
storyboard and now let's click on our UI
collection view controller and head down
into our attributes inspector click on
the view right here and you will see
that you can change the background color
I don't want it to be this ugly black
color so let's go ahead and add some
green blue and then we're just going to
make it a nice light blue background
color and then just close out of that
and then we can make this cell a bit
bigger and now let's click over here on
our UI collection view controller cell
and what you need to go over to our size
inspector as you can see right over here
and click on the size and change that to
custom we want to make the width of this
to be equal to 300 and the height of it
to just be 200 you can of course play
with these numbers but it makes it
easier to have a divisible number or an
easily divisible number say if I had 301
it's not exactly easily divisible so we
have 300 and half of that will be 150
very easy so now let's go over to our
image view and we're just going to click
and drag an image view onto our scene
click and drag this image view so that
we have a height again this is another
good reason to have easily divisible
this will make it so it's automatically
half of the scene so now we have our
uiimageview with a height of 100 and the
width of 300 now we also need to add a
textview into our scene so it's just
going to add that right in the bottom
there and stretch it out to the width
now the size of our scroll view should
be 300 by 100 as our width and height
now let's right-click or control click
and drag from our UI image view over to
our collection view controller and we
want to set some constraints so we need
the leading space basically meaning from
over here how spaced out is it between
the edge of this container view
controller as you can see it's right
next to each other so it's going to try
staying next to each other all the time
now we also need hold shift and click on
the trailing space the top space skip
the bottom space as we will be
connecting this with our textview and
then Center horizontally and Center
vertically click enter and now we need a
right-click or control-click and direct
from our textview and we basically want
to do the same exact thing leading space
trailing space basically the spaces here
and here and not the top space this time
as we will be connecting now to our UI
image view the bottom space and center
vertically and horizontally click enter
and now we're going to right-click or
control-click indirect from our textview
over to our UI image view and we're
going to give it vertical spacing and
this will allow it so the UI image view
always stays the exact same way that we
want it to be
now let's right-click or control click
and drag on the image view and drag it
right to the image view that we already
have selected and we want to keep the
aspect ratio that we have and this is
going to make it easier to keep the
image view the same exact way you want
every time now let's get into some
programming so let's go ahead over to
our assistant editor and over here on
our assistant editor we also need to add
a few more super classes to our scene so
we need to say UI clutch and view
controller comma UI collection view
datasource this is where the data for
the view controller will come from and
then we also need the UI collection view
delegate so this is going to delegate or
basically control our collection view
that we have Korea
now just go down here and we want to
just start typing in collection view and
as you can see there are a lot of
choices that you can pick from right now
we wanted to deal with self row at index
path and this will allow us to populate
all of these cells that we have created
so first thing we need to write in this
code is we need to it's looking for what
our UI collection view so will be called
so we need to save our so will be equal
to a collection view dot DQ reusable
cell with identifier so basically this
cell right over here is going to have an
identifier so if we click on our cell
right over here we can go over to our
identifier and this will be the reuse
identifier that we want to do this will
make it so as we can create as many of
these cells as we want just if we have
this identifier so we can say cell as
the identifier it'll be very easy if
that just for tutorial purposes of
course you can change it to whatever you
want now head over back over to our DQ
reusable cell with identifier and we
want to change this identify your string
with an open quotation mark close
quotation mark and it cited that we are
just going to type in cell or whatever
you called it in your attributes
inspector on your cell now let's head
back over to our VAR cells so on and so
forth we wanted to make this equal to
index path now if I don't know where I'm
getting that from that's actually from
right up here where it says cell for
item at index path index path it creates
this index path for the collection view
that you have created and we're going to
be referencing that quite a bit so I
just wanted to make that clear now let's
go down here and we're going to return
cell now as you can remember it was
saying it wanted a UI collection view
cell to be populating so we just wanted
to say review return cell and right now
it's giving us an error so right up here
we need to save our cell after this is
all done we need to go up here say as
exclamation mark and this will be as a
you I can election view cell knows and
now we have no more errors now next
thing we need to do is actually take
this image view that we have created
right here and populate it with some
images so in order to do this we just
need to click
on this image view and we need to go
over to our tag right over here inside
of our attributes inspector and right
over here it says tag so we want to
change this to one now this basically
means if I go cell dot view with tag
it's going to be able to reference this
UI image view via the tag that we just
created so this will be tag one now we
want to take this cell W with tag and
apply it to a variable or basically our
UI image view that we need to create and
populate so we say var and we'll just
call this image view will be equal to a
cell view with tag one as our UI image
view exclamation mark right after the
ads so now we just created this image
view and it's going to be able to
reference this image view on every cell
that we create so now we can say image
view dot image will be equal to and
we'll say UI image open parenthesis and
this will be named open quotation mark
close quotation mark and now let's go
populate this with some images so right
over here I have some images of me
showing off a shirt so let's shrink this
down real quick and let's add these
images over into our image XC assets so
right in here we're just going to click
and drag our images over here into the
left view right here and this will allow
us to reference these images into our
app so we can go over to our view
controller dot Swift let's make this a
bit bigger and let's close off our
assistant editor as we can we don't need
that anymore
and let's say the image view image
equals UI image and this will be named
and we can take all these names that we
have right here they're all very simply
named image underscore 5 - 2 - JPEG so
now we need to plug this all into an
array so it will populate according to
the collection view so right up here we
can just create a new variable this will
be our images array will be equal to an
array of strings basically we will be
referencing the names of
all the imageview controllers that we
evolved these images that we have in our
images XE assets now down here in our
image view image equals UI image named
we would actually want to replace this
with images images array Open bracket
close bracket and inside of this bracket
this will be our index path row so
basically if it's at index path 0 1 or
basically the second cell it will pick
the second image say if this is the
second image it will pick this one right
here so now let's head back over to our
view controller dot Swift and we're just
going to add this into our images array
so say images array will be equal to
open bracket close bracket open
quotation mark close quotation mark and
we'll just do this so we have all five
of our images and then we have our names
of these our IMG underscore 5 2 2 2 and
then we can basically just copy and
paste this and this will just change the
last letter or the less number of all of
these names for me so this will be image
5 2 2 3 4 5 and 6 now we need to go down
here and say collection view and this
will be actually number of items in
section how many items do we want in
there we're just going to count the
amount of images that we have so we can
say return images array dot count and
that will populate our collection view
with however many images that we have so
now if we were to build and run this we
should actually see our collection view
and right now we are actually getting a
black screen so we need a head over to
our main dot storyboard click on our
scene that we have right here and go
over to our view controller where and
head over to the attributes inspector
and we need to check mark this part
where it says is initial view controller
now if we were to build and run this you
will see that it is populating with all
of our images that we wanted
now for some reason it builds and Rand
in this weird format and the reason is
because for some reason it defaults back
to the default stage of the cell which
is not what we wanted see if ever to
rebuild and run this now that it's
default it actually shows me what I'm
looking at right now and it's just funny
that it over wrote whatever I tried
putting in there in the custom cell so
in order to fix this I went over to the
cell and I actually actually had to
click and drag this over from to a width
of 300 and a height of 200 as you can
see up here in the top left corner now
if we were to build and run this it will
actually look perfectly fine this didn't
happen on the other project I was
working on but for some reason it's
working on it happened on this project
so whatever but I now as you can see
that all the images are showing up and
there is a problem right now that this
is actually going behind the header
right here and we don't want that to
happen so in order for this to fix this
let's head over to our collection view
and we want to set the spacing or the
topics in set to 20 that way it's just
right underneath the header and then we
also want to have a left spacing of 10
and a bottom spacing of 10 and a right
spacing of 10 this way we just have even
spacing on iPads and other things so if
we read to build around this now we now
you can see it looks better now next
thing we need to get into is head over
to our view controller dot Swift and
inside of our view controller dot Swift
we want to actually animate our
collection view item to grow bigger so
that we can see all of the elements that
are inside of our collection view a bit
better
so if we say did select item at index
what we need to stew inside of here is
what item did you select and how are we
going to handle this and for some reason
Xcode has given me this error where it
says insert override even though it
should automatically do that for me but
either way there we are override and
right inside of our view it's did select
item at index path first thing we need
to do is actually create the item so we
can reference it later on
so say var so will be equal to and this
will be equal to our container view dot
sell for item at index path and this
will be index
path it will close the parentheses and
then down here we want to add some
animations to happen so we say uiview da
to animate with duration when we're
going to say animate with duration delay
using spring with damping we're going to
just fill all of that in so this one
right down here double-click or tab all
that in and we're going to set the
duration to 0.5 seconds so it's going to
be a very quick transition a delay of 0
seconds so it's going to happen
automatically use spring with damping
now spring with damping and initial
velocity happen from a range of 0 to 1
where 0 is basically nothing and 1 is
everything so we I'm just going to set
this equal to 1 and the initial spring
velocity equal to 1 so we're going to
get a really quick look to it now if we
go to options we are just going to put
this as new animation open parentheses
close parentheses and inside of those
parentheses say open curly braket close
curly bracket and completion we're going
to set this equal to nil now inside of
here what exactly do we want to animate
well we want to make our cell a bit
bigger so we're going to make it fill
the entire screen and then later on we
are going to shrink that down so we can
continue viewing our stories so we could
say so dot frame will be equal to our
collection view dot bounds or the
boundaries that surround the collection
view and then now if we were to build
and run this you will actually see that
as soon as we click on one of these
items you can click on that and it grows
but there's also a problem that you can
scroll and we don't want that to happen
so in order for us to fix this we just
need to go over here to our cell and say
collection view dot scroll enabled we
will each set this equal to false so
we're going to take off the scrolling
ability of our collection view I as soon
as this loads now another thing that
needs to be hat done is if we were to
build and run this again you will see
that our or cell that we have right here
if we click on that it's behind of all
of our other cells and we don't want
that to happen so and we will just want
to say cell that's super view so
basically the whole view we're going to
this up to the front of our whole view
so say dot after the super view say dot
bring sub view to front and we're going
to reference cell again we are going to
bring the cell all the way to the front
now if we were to build and run this and
apparently it needs an exclamation mark
afterwards so now if we were to build
around this you will see that we can
click on our view and you can see that
it fills the whole entire screen without
anything in its way now another problem
we need to fix is this photo is very
warped and we don't want that to happen
so let's click on this UI image view
right here and we are going to set this
equal to an aspect it aspect fill sorry
and now if we were to build and run this
you will see that we look a bit better
now another thing you'll find really
annoying is this is actually scrolling
right here so let's head back over to
our main dot storyboard click on our
textview and we want to make him
editable know and selectable no and
we're also going to change this
scrolling enabled equal to no now let's
head back over to our view controller
dot swift and we also want to program
eclis to save what we just did so in
here we want to create a new variable
and this will be our textview that we
created so we're going to call this our
textview u will be equal to our cell dot
view with tag and again we need to call
the tag so let's go over to our main dot
store board click on our textview and
our textview tag we will just call this
a tag of two there's a lot of T's now
let's head back over to our view
controller dot swift two and inside of
here we need to say cell dot V with tag
and this again will be the tag of two
and after that we need to say as a UI
text view now we also need to take this
text view that we created and say this
text view scroll enabled will be equal
to false so again scrolling will not be
enabled now I'm down here in our
collection view at this to did select
item at index path as it is animating
want to make our text view able to
scroll again just in case we're reading
a story so again we can just copy these
two lines of
and just place that right inside of our
enemy with duration and it says we were
getting an error so we need to add an
exclamation point right after the cell
now if we were to build and run this we
will actually get no scrolling on or so
that we created so there we have it we
have our cells all scrolling through and
we won't be able to edit scroll through
these text then we can click on one of
these cells and we can read more about
it and scroll through if it was a bigger
amount of text
now again you will notice that you can't
get out of this story that you're
reading right now so we need to add a
back button so head over to our main dot
storyboard and we're just going to add a
back button so just click and drag a
button onto our scene as soon as I can
find one here we are the button click
and drag that on to our scene we could
take this button and we're just going to
call this back we're just changing the
title to back we're going to change the
text color I'm going to make it a nice
Gragas color like so and then we can
close off the colors head back over to
our view controller dot Swift actually
go back to our main dot storyboard click
on the back button and then we want to
add a tag for this as well now I'm going
to make this tag three so so now that
that's done we need a head over to our
view controller dot Swift and again we
need to reference our back button so up
here we can say and now we need to
create this new variable so this will be
our very our back button and this will
be equal to our cell dot view with tag
and this will be three now we need to
say as a UI button again exclamation
point after as and then UI button and
right after this we need to say back
button dot hidden will be equal to true
now this is just because you don't want
it to be shown as soon as they're
looking through the app so as soon as it
makes it larger it's actually going to
be shown now we can just take this line
of code right these lines of code right
here and take our back button and move
that down to the animate with duration
you race the spaces and we're going to
say BEC bunt hidden and set this equal
to false and again it's wanting an
exclamation point right after this
so now if we were to build and run we
will actually have our back button
showing up on our seat on our stories
app so we click on this and it shows our
back button now right now the back
button it does absolutely nothing now we
need to go right underneath here and we
need to say a new function so this new
function will be equal to our back
button action so this will action will
be called as soon as we click the back
button now in this back button action we
just need to say open parentheses close
parentheses open curly braket close
curly bracket and inside of this we need
to say collection view dot scroll
enabled will be equal to true now so we
can actually start scrolling and look
through other stories then we also need
to say collection view dot reload items
at index paths as we're actually going
to dismiss the view that we are showing
and load that back to the its original
position so we need to say right after
this this will be our index path now we
can't just reference our index path so
we need to create a new index path just
by easily saying in VAR index path will
be equal to our collection view dot
index paths for selected items as our
end NS index path and do Open bracket
close bracket NS index path like so then
we can easily just put this index path
right and down here so now we are
reloading all of the items that were
selected and putting them right back
into the collection view that we wanted
it to be in now down here we also need
to just take this VAR button and we're
going to also add a new action so we're
going to say back back button dot add
target so we're going to add a new
target this basically means what are we
going to call when this button is
pressed so we're going to say the target
is equal to self it's going to affect
the view controller itself action we
will set this action equal to selector
so just type in capital S selector open
parentheses close parentheses and this
basically is going to be the name of the
function we want to
call when this button is pressed so
we're going to take this back button
action and put that right into here and
be sure it's in quotation marks or else
it will not work properly now we go need
to go in here to our view for control
events so basically this means on what
events do you want the this selector to
be called or what the function to be
called so we need to go in here to our
for control events and say UI
control events dot touch up inside so
this is basically he clicks down and
then he lets go and then we want it to
be called now if we were to build and
run this you will see that we can click
on this click on our back button and
it'll take it back to its original place
now we can also do this for all our
other stories and there you have it we
now we have our stories app completely
working we can click the back button and
we can search through others and look at
others as we go along thank you all so
much for watching I will be adding more
on to this project later on where we
will actually go through UI kit dynamics
and just adding more cool animations
onto this whole scene so be sure to
subscribe for that anyway thank you all
so much for watching and I will see you
in the next one bye