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

hey everybody today I'm going course of
course I hit the tripod today I'm going
to show you how to use UI collection
views with Swift and Xcode so let's go
ahead and get started so this is what we
want to accomplish in this tutorial I
just have a collection view filled with
a bunch of labels and items that I
programmed programatically and it just
Scrolls through and it will update
according to how many labels you have or
how many items you have and you can
click on a button and it will take you
over to a scene and then you can move
back to so let's go ahead and get
started
alrighty everybody to get started let's
open up Xcode and create a new Xcode
project this is going to be a single
view application click Next and our
product name I am just going to call
mine collection although you can call
this whatever you want our language will
be set to swift and our devices will be
set to iPhone click Next and create now
let's make this a bit bigger and let's
head on over to our main dot storyboard
now inside of our main dot storyboard I
would later show you how to add a
collection view controller inside of
this application inside of an existing
project but right now we're just going
to delete this view controller and we're
going to work straight from our
collection view controller so now just
click and drag your collection view
controller right down here over to your
scene click on the top white bar right
up here and we want to go to our
attributes inspector and say is initial
view controller so now this bit
controller is going to be the first
thing that loads up now let's head on
over to our assistant editor and as you
can see there's no file attached so
let's make a file attached by just
closing up our assistant editor and go
over to our view controller dot Swift
now inside of this you have a class and
now this class will control a certain
view according to what it is so we can
go class and we'll call this collection
view controller this will just be the
name that it's referenced by and then
it'll be of the superclass of a UI
collection view controller like so so
now we can go back to our main dot
storyboard and we can go click on our
collection view controller for some
reason that did not change let's go back
click on the top white bar is the
initial view controller let's click on
this right here and we're going to click
on it looks like a little page right
here it is our identity inspector and go
over to your class and we're going to
change this to whatever we named our
class in our view controller dot spiffed
now go ahead on back to your main dot
storyboard and as you can see we have
the class perfectly aligned now one
thing we want to edit is this cell right
here so I'm just going to click and drag
make this cell the size I want you can
also click on the cell go over to your
size inspector right over here and you
can make it the width and height and
just see if that's the way you wanted so
I'll make my width 140 by 140 random
numbers you can make this however you
want now let's go ahead and click and
drag a label on to our view so right
there and as you can see you're not
going to be able to see to see that so
click on your collection view cell head
on over to your attributes inspector and
we're just going to change the
background color of our of our cell
chest to a nice blue color now let's
head on back over to our assistant
editor and that did not load properly so
if you want to switch this up click on
our manual and okay that didn't load up
properly okay let's head on over to our
view controller dot Swift and we're
going to edit things over here
so in order to do this let's just say a
collection view controller and it'll be
self or item at index path this will
sound very familiar to how you would
work with table views so you want to say
self or item at index path and we want
to put how many index how many rows of
cells that are going to be so in order
to do this I like you can go right in
here and say return 3 now that will work
actually this is different than what I
was thinking of ok so right up here you
want to say collection view and this is
number of items in section ok this is
what I was looking for so number of
items in section is going to put how
many items or how many cells do you want
inside of your collection view so now
just tab all that in and now we have
this function and inside of this you can
just say return
three so now we're going to have three
of these collection views that you have
right here with the labels and
everything and then down here we want to
edit those tape those cells that we have
in order to do this we just say var and
we'll call this cell equals collection
view dot deck reusable cell with in debt
with reuse identifier and we're going to
make this reuse identifier and we'll
just call this cell so this is what
we're going to reference whatever cells
we want to edit inside of our collection
view controller and for index path and
we're just going to call this index path
and where I'm getting this from is the
index path is right up here and we're
also getting the collection view right
up here where it's being called on the
UI collection view and then we're going
to right after this just say as UI
collection view cell so we're returning
that as a cell and then go down here and
say return the cell so what this means
is anything inside of the heap between
here where it's created and between here
it's going to return this cell over to
the UI collection view so for the index
path so now if we were to build and run
this right now we would actually have
three three collection views and we're
getting an error so oh yeah we need to
go back over to our main dot storyboard
and we need to actually call this with
our reuse identifier that we called it
so inside of this this would just be
cell as you can remember that was in our
view controller dot Swift and it this is
the Dec reusable cell with identifier
cell and also be sure to that it's it's
case sensitive so be sure that it's
capitalized properly now let's make this
let's go ahead build and run and as you
can see now we have three cells with
three labels now you might be wondering
well I want to edit those labels or I
also want to build how many cells
depending on an array so in order to do
this you would just save our array
equals and then you go Open bracket
close bracket and inside
these brackets you just want strings
we'll say then outside of these brackets
you add your parentheses just so you can
instantiate it now let's go down here
and we want to say cell dot R actually
this will be yeah cell dot this is going
to be view with tag and then we need to
go back over to our main dot storyboard
click on our label right here and right
down here you will see this specific
thing called tag now this tag will be a
specific specific tag for whatever label
we want to reference so we'll call this
we'll just put the tag as one now go
down here to your go over here to your
viewcontroller.swift
and we'll make the tag one and then we
say as UI button so again I forgot to do
one more thing this is going to be the
VAR button is equal to cell view with
tag as UI button so basically we're
creating a button referenced off of the
tag that we created in our main dot
storyboard and then we're setting it as
a UI button so now we can edit this
button just by simply saying button dot
add text or sorry this was a UI label so
we need to say UI label and then we go
down here to our button and say UI
button dot text will now be equal to our
array for our index path row open
bracket close bracket index path dog row
so now let's go ahead and add stuff to
our array and you can say array is equal
to open bracket close bracket and we're
going to add some strings so open
quotation mark close quotation mark
comma open quotation mark close
quotation mark we'll just add four of
these so now we have this one we'll just
put in some random letters and there you
have it now let's head on over to our
main dot storyboard and one thing that's
cool you can actually right click or
control click and drag from our label
and we can Center this horizontally
Center vertically and then
just going to make this a bit bigger so
it fits the whole scene and we don't
want the label label to be out like that
so now if we were to build and run this
actually not yet actually yeah if we
built in ran this right now we can see
that it's going to build three three
cells with their specific names
according to each cell now again I said
return three earlier and we need to
actually count this array so in order to
do this it just easily array dot count
so now we're counting how many objects
are inside of this array that we created
and we're building like so and now you
can see we have four cells referencing
four different items so now if we were
if you wanted to add more we could
easily just add more by copying and
pasting like so and you can build and
run that and now we will count how many
items are in this array and it'll add a
scroll view as well so now we can scroll
through all these items now let's say
you wanted a label and you also wanted
another label oh actually we'll add a
button and you wanted this button as
well so now if you wanted this button
you could take this button and if you
wanted to move over to a view controller
like so anytime this button was pressed
you can just right-click or control
click and drag from that button and
we'll say show let's add another button
over here so we can go back and forth
actually not let's not add a button
let's go up here and we're going to add
a navigation controller and as you can
see we have two linked controllers and
we'll just click on this second
controller that it's linked with grab
our navigation controller and now we're
going to right-click or control-click
and drugs from our navigation controller
and right over here you'll see a
relationship segue and we want a root
view controller now we can add this
arrow which is the arrow that says this
will be our starting position and we're
just going to reference that right over
there and as you can also see that our
UI control table views so are you
our tableview cell is being pushed down
and then we are also adding items on
like so so now if we were to build and
run this right now actually we wouldn't
get a button on everything let's let's
add another array so we can actually
change the text of the button so we save
our button array will it be equal to our
string like so and we'll just say button
array dot our button array is equal to
and we'll just take whatever we have
right here and paste that in so now we
have this array and then go down here
and we'll actually take this button that
we created and will will change this
impart variable that we created right up
here we're going to change this to label
and now we're going to just say label
text and now let's go down here and save
our button is equal to cell dot view
with tag so I didn't create a tag so
let's go back to our main dot storyboard
click on our button and now you will see
that we have our tags right down here as
well so we can just change the tag of
this to two now if we head back over to
our viewcontroller.swift we can save our
button cell view with tag and our tag
will be equal to two and this time we
say as UI button as this is a button now
and we're calling it again as a button
and you can say buttoned button dot
title title title label dot text will
now be equal to our button array for the
index path row so now we're taking out
our out of our button array according to
what we have now I forgot to add a
question mark dot so this should be
title label
question mark dot text is equal to
button array for the index path 0 which
is counted right up here now let's go
ahead build and run and we should get
our button also created with the names
that we created up there and now
I'm not too sure why then it happen okay
now let's go back down here sorry this
was the wrong way to actually change the
button title you actually need to say
button dot set dot set title and our
title will be our button button array
for the index path row and this is going
to be the for control state UI control
state state dot normal so when it's just
built in RAM it's going to set the Tate
the title of each of these buttons to a
specific or button array or the specific
name of the part of the array that we
have were created at the specific part
so now we have all these buttons named
alongside these names and we can click
on our button go back and forth between
view controllers like so that's it for
this tutorial if you enjoyed it be sure
to hit the 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 so much for
watching and I will see you in the next
one
everybody today I'm going to show you
how to use UI control what are they
collection views alright