Create Collection View for Beginners (Swift 5, Xcode 12, iOS) - 2020 iOS Development

[Music] what is going on you guys welcome back to another swift video today's video is going to be covering how to put together a basic collection view so we're going to be building what you see here i've gotten a lot of comments and requests to do a more updated video on this so here i am so if you're not familiar with the collection view it's basically a view and a collection of items and you can apply layouts to it to organize said items in different ways so here we just have a fairly basic grid and we're going to take a look at some basic layout customization as well as well as how to do all of this in code so no storyboard no nibs none of that so basically the more so what i would call professional way that it's done and some of these large-scale apps that everyone uses and youtube is actually one of them so that said make sure you hit the like button before we get started i'm going to be annoying and wait one second to make sure everybody hits that like button helps me make more videos and keeps uh you know the channel engaged and growing hit subscribe if you're a returning viewer and have been sticking around for these daily swift videos that said i think i've annoyed everyone enough so let me stop spilling on open up xcode get excited and let's dig into the tom collection views quick pause before we get into the video if you haven't seen it already i am hard at work putting together ios academy dot io a community where all of us ios engineers can come together learn how to build some of the top apps like facebook youtube and instagram in addition to interview prep to land some of these ios roles at top tech companies so if you're interested in the free and premium content to come head on over to ios academy dot io and enter your email address in the waitlist form and you will be notified as content becomes available that said let's get into the video all right let's get started by opening up xcode and creating a new project we'll stick with the app template here and i'm going to go ahead and call this collection views make sure your language is swift your life cycle is ui kit and your interface is storyboard go ahead and continue and save it to your desktop i'm going to close up this right panel we're going to expand the window to give ourselves a little more room to work and i'm going to pick a simulator i'll stick with the 11 pro max since i've got it open already let me expand this side as well we're going to jump into our view controller and before we get into the code let's go ahead and hit that run button to make sure this is building and it loads up in our simulator which it does awesome so i actually went ahead and grabbed some images from google images before the videos so let's go into your dot xe assets file here and we're just gonna drag this in and this just has a few different images in it for the sake of uh you know us seeing things in our actual cells so all i did was right click create a new image set and you know drag in images one by one so feel free to go ahead and do that but for the sake of time i did it beforehand so cool how do we create a collection view so we're going to be doing this in code like i mentioned earlier no storyboard none of that so we're going to basically create a collection view on here as a private constant in this view controller and it's going to be a ui collection view with a frame and a layout the frame will be dot zero to start off with and the layout is going to be a ui collection view flow layout just like that now there are different types of layouts but a basic collection view you can you know get away with using a flow layout it's fairly straightforward it has some customization that we're going to look at in just a moment but then we can go ahead and add it as a sub view and before we do that we're going to assign the collection views delegate as well as its data source just like that now there's going to be errors that pop up because we don't conform to those protocols so up here we're going to say ui collection view delegate and ui collection view data source and with those two conformances there are two required functions that we need to bring in the first one is going to be number of items uh in our collection view section and we're going to go ahead and return 30 then we're going to want sell for item and in here we're going to want to do a dequeuing of a cell but before we actually write out this code go ahead and ignore that error that's giving there let's talk about creating a custom cell so every single collection view basically shows one or more different types of cells with different data and that requires us to have a cell so we're simply going to right click this and create a new file it's going to be a coco touch subclass and it's going to be a subclass of a ui collection view cell just like that and i'm going to go ahead and call this a photo collection view cell you don't need to check this box make sure your language is swift of course and go ahead and create it and it will create this empty class for you and we need to do some setup in here so the first thing we're going to do is create a static property called identifier you can make this in theory whatever you want i like to make it the same thing as the name of the class for consistency's sake we also want to override the initializer with a frame and it's called super in it with a frame as well that should be a dot not a comma just like that we are going to want to bring in the required initializer because it's going to complain if we don't and we're also going to want to do layout sub views and call super layout sub views and lastly we can do prepare for reuse and again super prepare for reuse so all we're going to do in this custom cell is just show an image view and we're going to randomly assign one of those images that we brought in in the xe assets so if you recall in here we have image 1 to image 6. so let's create that imagery first and foremost in the cell it's gonna be a standard image view just like that and we're gonna create it in this anonymous closure fashion just like that we're going to say image view whoops image view dot content mode is going to be scale aspect fill and that's just going to make sure the aspect ratio of the image our image view remains intact and it fills up the entirety of the view we also are going to say clips to bounds which is true so the image doesn't overflow the bounds then in the initializer we're going to say on the content view add a sub view for our image view and then in layout sub views we're going to say the image views frame and i really can't type today image views frame is going to be equivalent to the content views bounds which is the entirety of the cell and then prepare for reuse we're simply going to nil out the image views image so every time the cells reuse it starts off with a clean clean image view with no image so what we're also going to do the last thing in here is we're going to assign a random image to our image view so we're going to say images is going to be a collection of ui image objects and they're just going to be image one image one and we just copy and paste this a total of six times i believe so we got two three four five and six just like that and we can go ahead and now say imageview.image is images dot random element and let's see looks like this is complaining cannot assign value of type to an image because ui image optional optional the reason this is optional optional is the constructor for a ui image returns optional so what we want to do here is say compact map and just do dollar zero and that will basically make sure any any of these in here that are nil it'll get rid of them but we know that these images exist in xc assets so they should not be no so that's how we create a custom cell not a lot of code but a bit of concept involved there now we can go back to our view controller and use the cell so how do we use it so the first thing we want to do is register the cell to our collection view so we're going to register the cell class name dot self for a reuse identifier of the class name dot identifier then in this function we can go ahead and say let cell is collection view and we want to dequeue a reusable cell with an identifier which is that identifier right there that we created on the cell so if you actually hold command and click in to it you'll see that's the identifier property we made right there four is simply index path and then we can go ahead and return the cell just like that and before we go ahead and run it we probably want to give the collection view a frame so go ahead and override you did layout sub views call super viewed layout sub views and say collection view dot frame is view dot bounds so that said we should be able to see our collection view now in our simulator we're going to look at some styling of the sizing and all that good stuff but there's our collection view so i believe by default it picks the size of the cells but we're going to make it a three column collection view so let's take a look at how to do that so to do that we simply want to customize the layout so we're gonna override either conform to ui collection view delegate flow layout and this gives us access to a couple functions that allow us to customize what it looks like so the first one is size for item and as you can probably guess this function basically returns the size that we want every item to be so we're going to say this is viewed.frame.size.width over 3 as well as the height over three and i'm actually going to go ahead and subtract i'm going to wrap this in parentheses and subtract three from each of these because we're going to have some padding between the cells and we want to make sure that there's enough room for said padding and for that padding the first one we're going to do is enter item spacing we're going to return one there's going to be enter think it's called line spacing yep we're going to return one as well and this should give us the appropriate size that we're looking for so go ahead and hit command r and now you can see we have three columns we've got some spacing between our cells so things are not flush you can see things are flush on the edge of the screen so you can actually add some insets there as well and the function for that is section in sets and then here we can return ui edge and sets with a top uh left bottom and right we're just going to pass in one all the way around and if we run that one more time you can see now we have a nice uh spacing on the left spacing between each of the columns as well and it's a pretty even looking uh collection view here so what's actually going on as we're scrolling and they're going out of view we're actually milling out on the cell the the image so if we actually get rid of this line we just comment this out you'll see the images won't disappear as we scroll now so cool that's definitely how to put together the basics of a collection view the last thing i'll mention before we wrap up is how do you actually get a touch interaction of what the user tapped on so we do that through the delegate here so all you want to do is implement another function called did select item let me make sure i get the right one here we want to select item at index path which is this one right here first we're going to call the deselect function on the collection view for that item animated true and let me just go print out at this point uh which index path was selected so an index path has a section in a row so i'm going to say selected section is index path dot section and row is going to be index path dot row so we only have one section so that that'll always be zero since it's enumerated from zero we open up the console you can open this up with a command shift y uh quick action on your keyboard and let's go back to the simulator let me scroll down and pick one of these random ones so if we hit that we see it's section 0 and it's row 22 i guess in theory you could imply that it's item 22 since it's not really a table view but the row refers to the item within the section so there you have it that's how you can put together a bare bones collection view now i'll mention that collection views can get very advanced and you can do really really cool layouts with them uh for example apple's own app store is built with a single collection view for each tab with a pretty pretty crazy layout going on in there so i've got other videos to take a look at that those are called compositional layouts but hopefully this is a good primer into collection views if you haven't done so already make sure you destroy the like button for the youtube algorithm and video engagement comment down below if you found it helpful if you have any questions feedback suggestions i upload daily swift content ios related things so subscribe if you enjoyed the video want to stick around thanks for watching i'll catch you guys you

Channel: iOS Academy

Views: 12,003

Keywords: swift 5 tutorial, swift 2020, swift, swift 5, swift tutorial, swift for beginners, swiftUI 2020, swift programming, swift basics, swift apps, make iPhone app, swift make first app, swift collection view, collection view beginners, swift 5 collection view, collection view beginners 2020, create collection view, swift 5 collection View 2020, collection View 2020, create custom collection View, custom collection view cell, custom cell collection view, iOS swift app, iOS, app

Id: _OkriRP8Vx8

Length: 15min 2sec (902 seconds)

Published: Sun Oct 25 2020