Hello and welcome to this video and in this video we are going to be taking a look at collection views so instead of table views which you will see is some of the same stuff collection views you can display multiple images multiple data in a nice and sorted collection as the name implies so that’s what we are going to be taking a look at in this video .
If that is something you want to learn how to do or want to learn how to you know much win how to use collection views then just keep watching and we will be taking a look at how to do it right now so let’s go ahead and create a new Xcode project I’m going to make this a single view application and I’m just going to name it collection this is going to be my collection and let’s click Next and just say with wherever you want to save it now what I’m going to do is I’m going to jump straight to my storyboard and I’m going to make a small adjustment here.
What I basically want the what you can picture that is making a completely normal table view it’s almost exactly the same procedure and as we’ll see it’s a lot of the same stuff so let’s search up collection view and you can use a collection view controller that like you can use a table view controller but I’m just going to go ahead and build it from scratch and you just use a collection view I’m going to place it here and I’m going to stretch it wide and I’m just going to place my old boring constraints which are very useful just like that and then as you can see instead of having table view rows we have table view cells or collection views.
Here we can give this cell here and identifier and I’m just going to name it cells simple and easy so that we can remember it easily now just like a table view we need to select it and then ctrl drag up to this yellow button and connect datasource and the delegate and when we have done that we are pretty much good to go we can then jump over to our view controller and start doing some damage here now two things that we need to add it’s our UI collection view data source and our UI collection you delegate.
Instead of tableview datasource and table view delegate we use collection view datasource and collection view delegate and now we’re going to need two functions the first one is going to define number of views in the collection view so and this function is named number of the number of items in section and this is going to define how many items we want and of course the amount of items that we want is going to be the same as the amount of data that we want to display.
Let’s create an area here where we store our data left array and it’s going to contain strings and going to be equal to a string filled with images so I’m going to use images and I’ve made a nice map I’ve been out and have taken some pictures I’m just going to drag them in and if you want to access these just click the link in the description below and you will have the project files together with all the resources that I use.
I’m just dragging it in here and as you can see I named all my images one two three four five dot jpg so just make sure that you name it like that and then what we can do is we can just paste it in right here so we’re going to do like this and actually we can remove that jpg and just right let’s see we are just going to write one two three all the way up to ten so let’s do that two three four there are easier ways of doing this but I’m just going to do it like this for now six seven let’s see eight nine and let’s see and then ten just like that.
Here we have all our images and the number of items are now going to be we’re going to return this array dot count so the amount of items that we want in our collection you it’s going to be the same as a number of images that we have and that should be pretty obvious so that we have the space to display all of our images so here we have defined the amount of views that we need and next we are going to populate these views.
Up here we are creating the views the equal amount of views as to the images that we have and now we populate them with the image and the way we do that is we use a function name cell for item at index path so almost the same as for table views and then here we create ourselves
Let L is equal to collection view dot the queue reusable cell we are going to go for let’s see we’re going to go for this one and the reuse identifier we gave it was itself and then index part we are just going to put index but we are going to use this one make sure that it’s where the capital I and then of here we have our cell now we also wanted to convert it to a custom cells right now if we head over to our storyboard we have a plain old boring cell right here but what we want what we want to do is if you want to display an image here we are going to have to also with it or make it our customs just like a table view cell we can display text in it but if you want to display something else we’re going to have to customize it.
That’s what we’re going to do now we are going to give this we are going to select this one and we’re just going to say cell size for now is going to be hundred times 100 and then we’re going to drag in our n image view and just place it within this little box adjust it so that it fits nicely and then we are going to place the constraints so that the size stays the same so 0 0 0 0 and then just add those constraints and we’re good to go but there’s one more thing that we need to create and that is a another file for this custom table not table yourself but this view.
Let’s go to a file new file and we are going to create a cocoa touch class and then we are going to make sure that it’s a subclass of UI collection view cell and then you can call whatever you want to I’m just going to call it myself and the reason we are creating another file for this is so that we can program this health so that we can give that cell some instructions and those instructions are basically going to be on adding an image view to it.
If we find my cell here then we have to drag this over to the file that we just created let’s see we just have to connect it first so let’s click here so let’s get some more space and then we’re going to select the cell and then we are going to set the Z the class to myself so the file that we just created so we’re selecting the cell in our collect collection view and we’re setting the class to be equal to my cell which is the class that we just created and now we can bring up this split view and we can control drag our image view into this file so select the image view hold down control and drag it in and then we can name this whatever we want I’m just going to name it my image view just like that connect it up and now we should be able to access that image view within our view controller and the way we do that is we end except this has to be indexed paths there we go that should work better and then we are going to convert it to the custom cell that we just created.
My cell and now we’re able to access the image view of that cell so now we can say our cell that I believe this has to be a small I my mistake earlier needs to be a small I cell that my image see if my image view dot image is equal to UI image see image and it’s named and the name of this is going to be our array at index path dot row and then we just have to add the file ending which is dot jpg just like that and now we should be good to go we just need to return the finished cell which would be like this and now we are going to run this program and see what we’ve got so far.
As you can see here we have our application with all of our images collected in our in the collection view and as you can see the images are a bit distorted to what we can do is we can head over to our storyboard we can select our image view and we can choose our instead of scale to fill we can choose aspect fill that way it will look a bit nicer so I’m just going to launch it and see how it looks now and then we’re going to do one little change to our collection view and that is going to be to adjust the spacing between each view so as you can see right now there’s a lot of space between some of them and little space here.
It looks a bit awkward and that is something that we are going to change right now and the way we do that is we go quick we access our viewdidload function up here and then we are going to adjust the size of each view to this width of the screen so they’re going to adjust to the width of the screen and fill the screen accordingly and you will see how we do that in a second so what we first want to do is we’re going to access the width of the screen.
You can say item size which is going to be the size of our item it’s going to be UI screen dot main dot bounds dot width divided by three and I’m also going to say minus three for now and you will see in a second why I’m doing that now that we have the width of the screen or the width of item and as it says right here the width of the item is going to be a third of the screen minus three pixels or points and you will see why we do that in a little while and then we’re going to create a new layer up here that’s going to overwrite our current layout and the way we do that is could we create a layout constant and we set that equal to uij collection view flow layout and now we can start customizing our layout.
You can say layout the section inset it’s going to be equal to uij edge inset and we are going to define the top left bottom and right and I’m just going to put in 20 here 0 here 10 here and 0 here so here we’re just defining the inset and now we’re also going to define the size of our of our little of each item or each image and that is going to be the item size which is going to be equal to CG size and then here we can define the width and the height and we are going to use integers.
Let’s choose this one and we’re going to say item size is going to be the width and item size is going to be the height and we probably need to convert this to an integer or is it that already it looks like it so then we can just continue on here and we can say layout dot minimum minimum internal spacing and that is going to be equal to 3 and then we can also say layout that minimum line spacing and that’s also going to be 3 and that is why the width is going to be the third of the screen width minus 3 so that we have space or enough place for the spacing between each image and now we have to add this layout to our collection view and in order to do that we jump out our storyboard and we just need to make a quick connection here with our viewcontroller.
so let’s select our collection view control drag it over and I’m just going to name it my collection collection view connect it and then we can jump over to our view controller again and we can do the final cut by just adding lay out my collection view dot collection view layout is equal to layout and that’s really it we created a layout I’m just going to go over it after we have seen that everything works brilliantly so if you understand everything here but what we’re basically doing is we’re creating a new layout and overriding the old one.
As you can see this looks much better and although you can scroll yet we can simply copy paste this and we can add it one more time and then we get are a lot more images and that way you will see that we’re able to scroll and as you can also see it looks much more nicer this way than what we previously had or the way it was previously displayed as you can see now now it’s a nice and even grid exactly as we wanted and of course you can do a lot more to a collection view.
So if that’s something you want to see make sure that you comment that in the in the comment section below and we will be taking a look at that but as you can see right now it looks very nice so what we basically did here is we did exactly like would if we were to create a table view we define how many boxes we wanted so M how many of these boxes we wanted we said that the amount of boxes that we need is going to be equal to the amount of images that we have then with this function right here we populated each one of these boxes.
Right here they were just empty boxes now we added an image to each of the boxes and then it displayed as a collection view but in order to refine it a bit more we created a new layout right here based on the width of the screen and we agreed upon that the size of each on each box or each image is going to be a third of the screen roughly so that’s what we did here then we defined our new layout here and we also define the spacing between in each image in the side and at the bottom.
How much that should be as you can see we can also say that that should be 10 but then we also have to change it to ten up here else we will get a space problem and then we added this new layout to our collection view so that this layer becomes the active one and let’s just see what happens if I make this change and it should exactly be images just with more spacing so that’s what we did here and as you can see this function or this statement right here just sets the margins really because you’re doing that there we can remove it in this clinic case in Scenario and it will look exactly the same I’m just going to launch it to make sure that that is the case but if my reasoning is correct then that shouldn’t make a difference to this program.
So let’s just see because then we it’s much simpler easier and that is indeed a case so awesome so all you need is really this in order to create our new layout.
So that it looks like this so hopefully you enjoyed this little quick video on how to create a collection you if you did make sure that you click the subscribe button and then I will be happy to see you back in the next video and as always thank you for watching.
