Hi, Alex here from rebeloper.com and welcome back to ASD App Store domination
and today we are going to talk about UI collection views and how to set up a
basic UI collection view. So without further ado let's get to work.
Okay, I'm sure you have already seen collection views and UI collection
views are the ones that you can see everywhere basically everywhere in the
Instagram app in the Twitter app in the Facebook app where feeds are provided
UI collection view is the perfect answer for that.
So today we are going to talk about how you can create a simple UI collection
view. So let's open up Xcode here and let's create well let's let me just drag
this down and let's create a new project. Okay and it will be a single view
application and let's click on next and I will name this ... let's click on next and
I will drop it onto the desktop. Yeah it is live. Okay back to work. I want to
create a new UI collection view with a double L and I have misspelled that I
just noticed it but okay the main idea is the same. So let's create a new file
and let's play the cocoa touch class because that will add the most basic
well the necessary things that a UI collection view needs and I will name
this let's say Home Collection view controller. Let's click on next and
create. Okay, here we are in our home collection view controller and as you
can see there are couple of things that are already set up. Now the main idea is
that you have some sections and for this tutorial we will always the only one
sections so I will just add return here one so there will be only one section
and inside those sections we have our items and here we can give the number of
items in that section and because we have only one section
we add in here one. If you are interested in more advanced UI
collection you controllers go ahead and take a look at my LDTA components
tutorial on YouTube. It is a whole playlist so go ahead and check that out
for more details. Okay, now once we do have these numbers and one
let's say 15 not maybe just 5 for now then we can configure our sell and this
is where we deque our reusable cell with our reuse identifier and as I have
didn't tell you but you most probably know that we are not going to use
storyboards at all we are going to do this all in code. So that is why this is
in use identifier is our cell. Okay and one last thing we need to register it
inside our viewdidload so we registered our UI collection view cell for this
reuse identifier and we are getting back a default UI collection view cell. So that
is of course we may add a new cell here but that is out of scope of this
tutorial so we will not dive in deep go in and take a look at a LBTA
components tutorial. But stick around because now you will understand what UI
collection view is all about. Okay, now that we do have this and I will just
delete these UI collection view delegates because we are not going to
talk about then and this navigation too. Let's call upon this UI collection view
controller because we are not presenting it. So let's go and first of all let's
delete this ugly storyboard let's delete it the first thing that I always do
I delete the main.storyboard back to our project and delete the main
interface there and step away from it and we are done. Let's go back to
appdelegate and here let us create our window as a UI window
and let's make our window make key and visible, okay. Now our home collection
view controller needs a UI collection flow, correction view flow layout. So first of all
let us just create that layout it will be a simple basic UI collection view flow
layout, okay. Now let us instantiate our collection view. So let collection view
controller CVC and it will be a UI collection view controller and let us
just add here our collection view layout and that is our layout that we have just
created and finally we add this CVC controller to our windows root view
controller. So that's that pretty simple and just to test this out let's have a
background color. So here you might want to call upon view but
this collection view controller has something called collection view and
that has this background color property on it, so we will call this red, okay.
And I see that there are some indentation problems because I already set up
indentations to be two spaces so I'll just simply collect and cut all of this out and
paste it again and the indentation is already set to two spaces, pretty good
stuff and what else do I want to do well I want to launch it finally after all of
this talk and work let's launch it, okay. Let's see.
and let me just make this a little smaller, okay. And now let's wait for our
iPhones X simulator to launch and here we go we should have a red background.
It seems that we don't have it and what seems to be the problem yes of course
and you might have yelled at me okay it is not a UI collection view controller
it is our Home Collection view controller, Alex come on...
So let's hit command R again and we now should see our red background.
Congratulations if you are, if you have made it here then you are most probably
smarter than me because I have added the default UI collection view controller.
I don't know what I was doing there, okay. So now what else do we want to do
when we want to add some cells in there and as you can see we already kind of
told the UI collection view controller that we want five cells and
even if we add here our cells background color to be let's say ... even this way we
are not going to see those five cells and that is because we have a well we do
have that oh good stuff but we need to well create our layout and for that we
are going to import here let's see let's conform to our UI collection view flow
layout delegate and I believe it's not flow it is layout delegate flow layout.
It is pretty mouthful but that it's what it is.
So now what we want to do here is maybe let's add our let's say, let me
just make this easier for you to read, okay.
Here we have our collection view and just type in item size, size for item at.
So this is a collection view size for item at and we are going to return a
CG size and we will choose this one with a CG float and we want let's say the
whole width of our viewed. So ... and the height should be the same, okay.
Let's build and run again and see what has changed and maybe in the meantime I will
make this background to be white because the default background of a collection
view is set to black. So let's just scroll here and as you can see here we
have our five cells ,pretty good stuff, but I still want to eliminate this lines
here and for that let me just go back and well let's have your half and the
height should be the same. And let's see how that looks.
Okay, not as good as one might expect and that is because first we need to set the
line height well these, let me just show you in code because it's much easier. So collection
view collection of view and minimum align spacing for sectional and let's
return here, return here one and the other one is collection view and that is
live it is interitem, yeah that's it. Minimum
interitem spacing for section pretty mouthful but
that's what it is so I will choose this one and now that I
want to have two cells and I want to
grab minus one and then divided by two. So that should be the width of our cell
and the same goes to our height here, okay. Let's build and run again and see
the difference, okay. There we go two cells pretty good. Now, if we want
free cells then of course we want to grab two pixels out of our width, okay.
And let's add let's say 15 or maybe 17 and let's build and run again and that
is how you can create that Instagramish effect, okay. Now one last thing I
want to that here and I will wrap all of this up is what you, well when you tap on all
of these cells. So for that it's pretty simple collection view and did select
yes that it is did select item at and for now I will just print out...
Maybe grab and adhere our index paths a row and of course our current index path
section will always be 0 because we have only in one section available in this UI
collection view controller, okay. Let's tap the first one here we go zero and
zero. And the next one, next one, next one, next one, pretty easy and
straight forward. So there you go. Now you know how you can easily create a UI
collection view controller. Hope you enjoyed this lesson and as usual I will
see you tomorrow in the next one. Good stuff. Now if you want to see more of
this video and want to boost your app business go ahead and take a look at my
30 days challenge AppStore domination go ahead and click the link down below and
I will see you inside a ASD, AppStore domination. Let's get to work.