iOS Dev 11: CollectionViews | Swift 5, XCode 11

hi guys my name is Emanuel welcome to the 11th video of this tutorial series today we're going to learn about collection views and just create a new project and let's get started so now main that storyboard the first thing we're gonna need to do is to add a collection of you so just open up your library click drag a collection view to your view controller and then we're gonna add constraints so 0 0 0 0 great now if you look over here you can see suggest us so you can see that we have a cell so if you remember from our last video working with table views we can actually add a reusable cell right so this concept also applies to collection views so here we have a cell or prototype cell where we can implement a design and then use it in the view controller okay so and this is what we're gonna do first of all we're gonna design this cell so to explain this I'm just gonna try to implement a sort of like a movie app so we're gonna display an image of a movie and then the IMP and a movie title okay so we're gonna add an image view like that right here and then we're also gonna add a label which is gonna be for the title ok so again it's add a label right so let's add constraint to the label we're gonna go 8 all around and then we're also gonna add constraint to the image view as well this is gonna be 0 0 0 awesome now I want this label to accept multiple lines so I'm just gonna give this a height first of all let's just add some text just to be sure two lines like this great so I'm just gonna let's make this bold send me bold cool and we're gonna give it a height constraint wonderful and then finally center align that so this is gonna be our title and this is gonna be our image view all the image of the movie okay good so now we have our reusable collection of you cell next thing we're gonna need to do is to add our collection view cell class I remember from our last video we'll just create a new file cocoa touch class and you can just click over here and make sure you select the collection view cell okay and I'm just gonna call this movie so a movie collection view cell and you could also create a nib rather than designing in our collection view you could design with a nib and if you want me to explain this they just leave a comment and I'll you know know if I should make the video well anyways for now what I'm gonna need a nib so just click Next and finally create great so now we have our collection view cell the next thing we need to do is to connect this class to our design right in the storyboard so I'm gonna copy the name of the cell and let's head back to our main dot storyboard and make sure you select the cell itself you can confirm by making sure that this guy here is selected okay now when you do that head over to the identity inspector right and then we're gonna paste the name of the class click enter to connect and head over to the attribute inspector and under the identifier we use identifier which is gonna paste the same text okay and that's it so we have this cell connected to the class movie collection view cell the next thing we're gonna need to do is to connect these controls right so the image view and the label want to connect those to the class so I'm going to bring up our assistant editor and let's hide this cool so this is the view controller so I'm just gonna open up the movie collection of you cell awesome and we're gonna click on the image view hold down control click drag right here I'm gonna call this movie image you like that I'm gonna do the same thing for the title and I'm gonna call this movie just call a title label like that awesome so we have both of these connected and we're pretty much done with this design for now great so we can finally head over to our view controller and this is where we're gonna implement the collection so I just increased the font I'm sure it looks much better now so anyways we need to connect our collection view to this view controller class okay so let's head over to the main dot storyboard and right here let's make some room I'm just gonna hold down control click and drag it right here and I'm gonna call this collection view also now head back so um like the table view the next thing we need to do is to set our collection view collection view dot data source to be equal to self okay now this actually allows us to be able to specify our configure our collection of you to specify the number of rows and a number of items rather and the cell right so when we set data source to be self we actually need to conform to the UI collection view datasource protocol okay so I'm just gonna create an extension of the view controller class and this is gonna conform to the UI collection view datasource awesome and right here we need to implement the number of items for section right or in section and then the second one we need to implement is the cell for item I believe yes so sell for item at index path okay now um actually if you go over if you look over here I have a file called movie dot swift and what I did here was I created a destruct right of type movie okay and this has the title and image so the title is of type string and the UI images of type UI image so I just created an array right of movies that contains the title and the image okay so just to save us some time so if we head over to the assets you can see that I actually have some images I just took them off a website today TV series so anyways you can get this from the project I'm gonna leave the link in the description okay so anyways we have this array of movies so what I'm gonna do is create the collection view to display all of those images sorry all of those movies so here and the number of items in section we're gonna return and since I created this globally I'm gonna have access to this so this is not created in any class whatsoever so it's global so I'm and this view controller I can actually just say movies don't count awesome so this is gonna create and number of cells right depending on the number of movies that are available in this array awesome now the next we need to do is to create our cell okay so this is expecting us to return a UI collection view cell and remember right here that we created a movie collection view cell so I'm just gonna say let's sell be equal to our collection view dot DQ reusable cell with identifier okay and the identifier is going to be well just we're gonna cast this as a movie collection view cell I remember that's the same name as the identifier so I'm just gonna put that here and for the index path I'm gonna specify index path which is coming in from right here awesome let's make some room good now finally you need to return our cell great so now we have specified the number of items to be displayed we've also configured the cell that should be displayed now the next thing we need to do is to actually populate our cell with the information from the movie array right so let's head over to the movie collection view cell and we're gonna create a method right here called setup and this setup is gonna take in an argument that we're gonna call movie and it's gonna be of type movie like that and what we're gonna do with this value movie is we're gonna say movie image view image to be equal to our movie dot image right and finally our title label dot text is gonna be equal to our movie dots title awesome so this is our setup function and in our view controller what we can do is simply say our cell duck setup and it's gonna require an argument of the type movie right and we can simply say movies and we're gonna be getting the index from index path row also so this is gonna set up each cell using the value at the current value of the movies array I hope that makes sense so we can actually go ahead and run this and let's see what we have now okay so as you can see right here we actually have the images and the title being displayed right here and if you count it because you see that we have 10 cells okay but it's not actually looking good enough I wanted to display like two cells per row right so that's the next thing we're gonna work on now what to specify the width and height for each of the cells let's get to it so first things first you're gonna need to conform to create an extension first of the view controller we're gonna need to conform to the UI collection you delegate flow layout okay and right here we actually have access to a method size for item at index path right here and you can see that it expects us to return a value of type CG size so we're gonna do is say return CG size and we're gonna take in the width and height so for width I'm just gonna specify so actually what we need to do here is you know when you run this application on different devices you might want to display different number of columns right for a particular row so for for an iPhone 11 you might want to display two cells per row for an iPad you might want to display for five cells okay so this is where you do your logic both for the sake of this tutorial make this very simple we're gonna display just two rows sorry two cells per row I'm just going to set the width to feel like probably 200 I guess and then let's set their height to be maybe 300 I guess this should be good should be good so if we actually run this nothing is gonna happen and that's because we need to do two more things so it's they're gonna be big right like it was so we're gonna do is head over 12 view did load and we need to set the collection view delegates so collection view doc delegates and this is going to be equal to self and finally another thing we need to do is to set the collection view collection view layout I'm gonna set this to be equal to UI collection view low layouts just like that awesome and now if we run it again we should see that the collectionview cells have a width of 200 and a height of 300 awesome so this looks much better so you can see all of our movies like that and [Music] actually remember from our last video we could actually add tap gesture to our collection view cell so I'm gonna create a like this and we're gonna conform to the UI collection view delegate this time so delegates nope good I haven't already right yes so we're gonna implement a method called did select item at index path and what want to do here is we're gonna simply print out the movie title okay and we can get that from our movies array and we're gonna be getting the index path row great now let's run it again and see our movies being tapped oh anyways we need to actually get the title if not we probably will not see what is being printed like that so let's run it again great so now if I tap right here you can see right here you see that I selected penny dreadful so if I click here high town selected scroll down the hundred so yeah it works again great so there's actually a couple more things you can do with a collection view you could actually make your collection view to scroll horizontally so you scroll like this and you know you can just do a whole lot more stuff and just like I was telling you right here remember you can just add a little more logic to make this more adaptable so for now I just specify the fixed height and every rotate our device you can see that the margin between each cell is actually so much so you know just maybe if you want me to do that you can leave in the comment section I would just make this look more or make it adapt more adapt better rather so anyways this brings us to the end of this video and if you liked it please give a thumbs up if you have any questions please leave it in the comment section and please if you haven't already don't forget to subscribe see you guys in the next video

Channel: Emmanuel Okwara

Views: 9,891

Keywords: collectionview, ios, swift

Id: aU_kTzMZHQ8

Length: 15min 50sec (950 seconds)

Published: Tue Jul 07 2020