 So you probably use view controllers quite a bit in your iOS development, but there's a special type of view controller called the UI Collection View Controller, and it's basically a collection view that's a little bit easier to use in the confines of a view controller. And in this lesson, we are going to learn how to use the UI Collection View Controller to make a very basic grid user interface. Let's open up Xcode and get started. A lot of user interfaces call for a grid-like structure that a table view cannot accomplish. And the Collection View Controller is perfect for setting up a grid. And in this lesson, we're going to build a grid or a collection view that looks like this. It's pretty basic, which it's just going to list the name of different countries that we load into it. And when we tap on each cell, we'll go ahead and print out the name of the selected country. And this is a great way to get started about learning how to use the Collection View Controller. Get started by creating a new single view application. And go ahead and hit Next. And you can go ahead and create and save your project in your particular location. We're not going to be using SwiftUI for this, so we'll go ahead and make sure that Storyboard is selected for the user interface. Now that your project is created, you'll have just an empty view controller in it. And we're going to go ahead and actually delete this view controller so we can replace it with the Collection View Controller instead. And what we can do is go to our source files here. And we can just go ahead and delete ViewController.swift. And we can then go back into main.storyboard here. And we'll make sure we select our ViewController scene. And with it selected, just hit Delete to get rid of it. And we will have nothing in our Storyboard for the moment. Now to add a Collection View Controller, what we can do is go over to the little plus icon here. I'm on Xcode 11.3. And we'll go ahead and look for UI Collection. And you'll see that Collection View Controller pops up. Go ahead and select it and drag it onto your Storyboard like this. And we need to create the corresponding source code file for this UI Collection View Controller. So what we'll do is go back into our source code. We can just go ahead and right click on our folder, New File. And we'll select Cocoa Touch Class from here. And we'll just call this, what we'll do is we'll make sure it's a subclass of UI Collection View Controller. And that's going to go ahead and just give it a default name of Collection View Controller, which is fine for us. And we can go ahead and hit Next and create the CollectionViewController.swift file. Xcode automatically inserts some templated code for us in the CollectionViewController. You can see here that you'll have some commented out stuff in the CollectionViewDelegate as well as some stuff in the CollectionViewDataSource. What we're going to do is actually clear this out. We're going to start from an empty slate so that we can work and understand what we're doing piece by piece. So all this commented code under the CollectionViewDelegate, we can just go ahead and remove that. All of the code under the CollectionViewDataSource, we can remove that. We can delete the section on navigation. And we can empty out ViewDidLoad so that it is empty here. And we can also go ahead and clear this reuse identifier. And we will come back and implement this piece by piece. One unique property about the CollectionViewController is that if you commands click on it to read the documentation and API, you'll notice a couple of things. For one, the CollectionViewController contains an implicit CollectionView. So we don't have to create a CollectionView or drag one onto our ViewController like we would if we were just doing this in a standard ViewController. The other thing is that the CollectionViewController automatically conforms to the CollectionViewDelegate and CollectionViewDataSource protocols. Now if you were just implementing this in a UIViewController, you'd have to drag the CollectionView onto your storyboard and then you'd have to do something like CollectionView.datasource equals self. Now because the CollectionViewController automatically conforms to that for us, we don't even need to do that. So that's one of the benefits of using the CollectionViewController. And the TableViewController also does the same thing for TableViews. Now in order to display our list of countries, we need to provide our country data source. And what I'm going to do here is just paste in the list of countries you saw at the start. And you can pause this to copy along or just add your own list of countries. And this is going to be the data source that gets displayed in our CollectionView. Now after we have this set up, we need to go ahead and start implementing some of the CollectionViewDataSource methods. In particular, we'll start with the number of items in section. And so that's going to be number of items in section and it looks like this. And all this is going to do is return the amount of basically countries in a section of a CollectionView. And so all I'm going to do for this is return the data source dot count. And we're only going to have one section here. So we're just going to use all of the items in our data source. Now we need to go ahead and continue forward to implement to make sure that we have our data source protocol satisfied. And so what we'll do here is do the cell for item at index path method. And that's going to look like this. And this is going to return a CollectionView cell for each section. And what we can just do to get started here so that this will actually compile for us is just do a return UI CollectionView cell because we're not actually going to use this cell. Subclass this with a custom CollectionView cell in just a moment. So take a look back in the main storyboard and we are going to select our CollectionView controller and select the CollectionView cell in the hierarchy. And you'll see here that there's just an empty CollectionView cell class. And like I said, we're going to subclass this so that we can add our customization to the cell and have that apply for every cell that we load into the CollectionView. And the way to subclass this is we will go back to our source code here and we're going to create another Swift file. And we'll go ahead and right click New File. We'll select Cocoa Touch Class. And we can just call this a subclass of UI CollectionView cell like that. And we'll just give it the name of CollectionView cell for now. Go ahead and hit Next and create the Swift class. Now that we have our CollectionView cell, we need to do a couple of things. We need to tell our storyboard's CollectionView to always use our custom CollectionView cell. And we need to add a label to it so that we can display the name of the country for every cell that gets loaded. And to do that, we're going to start by opening up the Assistant Editor here by clicking the Add Editor on Right button. And we want to get the main storyboard on the other side so that it's side by side with our cell. And when we have that ready, we can make sure that we have the CollectionView cell selected in the View Hierarchy here. We can then go over to the class inspector or the identity inspector here. And you'll see that it has just UI CollectionView cell as the default class. And what we want to do is change that so that it points towards our CollectionView cell like this. And so that associates the link from the cell and every cell that we load on our CollectionView here with our custom subclass over here. And so we're almost done. We want to go ahead and add a label to the cell so that we can display the name of the country. So we'll go to the library, look for a label, which is the first one that loads for me. Drag that right onto the cell's content view. I'm going to zoom in a little bit here so you can see it better. And what we want to do is create an outlet or a connection for this label back to the cell here. To do that, we can hold down the Control key. Once we have the label selected, we can click and drag over to CollectionView cell. And we can create that link because we've gone ahead and set that subclass to the cell. I'll go ahead and just call this country name label like this. I'm going to go ahead and just make it private. And finally, I'm going to create a method in here called funk configure with country name of type string. And inside of this method here, all I'm going to do is country name label dot text equals country name. Now let's go back to our CollectionView controller. And we're going to finish implementing cell for item at index path to use our custom CollectionView cell. To do that, what we'll do is instead of returning the cell here, we're just going to do var cell equals CollectionView cell here. Give it some space and we'll actually return the cell from here. And what we're going to do next is use the CollectionView parameter that's passed in here and say collectionView dot dq reusable cell with reuse identifier for index path. And what I'm going to do here is I'm going to hard code the value of cell for the reuse identifier and pass in the index path. And what we're going to do is try to cast this as an instance of our custom CollectionView cell like this. So if let custom cell or actually if let country cell equals CollectionView dot dq reusable cell as a CollectionView cell, go ahead and provide the cell, the country title. And we'll do that like this. Country cell dot configure with the country name. And the name of the country is just going to match up with the index for each country passed in. So to quickly access that I can do data source at index path dot row. So each row will correspond to one country name that gets passed into our configure method here. Now we have to make sure that we return this cell back. So what we can do is take our generic CollectionView cell and say this cell is going to be assigned to the country cell which is also a CollectionView cell subclass. So this works out just fine and we can return it that way. Go back into main storyboard and we need to do a couple of things. Similarly to how we subclassed our CollectionView cell, we need to make sure that our CollectionView controller is being properly subclassed in the storyboard in a similar fashion. So we can select our actual CollectionView controller scene here and we'll start off by first going to the attribute inspector. And you'll remember since we deleted the other view controller, we need to make sure that this one is the initial view controller in the storyboard. So you want to make sure initial view controller is selected. Once you've done that, we can go back to the identity inspector here and you'll see that the class is just the generic CollectionView controller and we can tell it to point to the custom CollectionView controller that we created and we can go ahead and set the storyboard ID to CollectionView controller here and the same for restoration ID as well. If you try to run the app right now, your app will crash and the reason it will crash is because we have to make sure that we set a cell reuse identifier on our cell inside of InterfaceBuilder. And so if you go back and select your cell in InterfaceBuilder and you go to the attribute inspector here, there is a field for identifier, for the reuse identifier. And I'm just going to give it the name cell as a general name here and you'll see that this identifier maps up with the string cell that I used here. Alternatively, you could set this to a constant but all that matters is the value here should match what is an InterfaceBuilder over here. And so another thing is that you don't have to explicitly register your cell from a class or from a nib like you would have had to if you were loading from a nib or loading programmatically. If you're using your cell on a storyboard like we're using here, then Xcode can automatically find your cell and reuse identifier and load it for you automatically. So having to manually load it like was done in Vuted Load at the templated code from the beginning is not necessary if you're using a storyboard. If we run the app now, you'll see that it doesn't look too good visually. You can see that the country names are getting cut off, the cells are small and really indistinguishable from the collection view controller's view. And we can go ahead and make a couple of adjustments to give the cell a color so that it stands out as well as increase the size of the cell itself. So we can go back into the storyboard and we can start off with the collection view cell itself. And with that selected, we can go over to the ruler icon here and you'll see that there is a size dropdown set to automatic. Now, there is a custom size you can change it to as well. I'm just gonna change this to 130 by 130 and you'll see here that our cell starts to take shape over here. Now, I don't want anything fancy. I want really every cell to be the same size, roughly speaking. And I can go ahead and just throw some constraints on our label here and I can just go to the attribute inspector. I can go ahead and give it center alignment and I'm just gonna pin our label to leading, trailing, top and bottom. And what I'm gonna also do is change the content views color. That's pretty easy. We can go and select the content view of the cell. We can go to the attribute inspector and there's the background dropdown here and I can just go ahead and pick a custom color to make it stand out in some way. Now, there's also the collection view flow layout here. And if we go and select it under the attribute inspector, you'll see the scroll direction is set to vertical. I can change this to horizontal if I want the list to scroll horizontally but I wanted to scroll up and down vertically. So I'm gonna leave that selected. Now over here on the ruler icon, there is the size inspector for the flow layout. Now again, these are custom attributes for the collection view such as the spacing between them, the header size, the footer size, the amount for the insets and the cell size. And I'm also going to update this to be 130 by 130 here. And let's go ahead and go back to our collection view and take a look at something here. Now under the attribute inspector, you'll see that the items are set to one. I can go ahead and increase that to see what this layout is gonna look like as well. And also if I go back to one and we run it from here, we'll take a look at what this looks like. You'll see that it's trying to use the automatic size of the content in the collection view to determine the width of the cell. And that's fine if you want your cell to be somewhat self sizing based on the intrinsic content size. If you want something basic, like a fixed size, we can make an adjustment for that so that all the cells are the same size. To make all of our cells a fixed size, we need to go back to our collection view flow layout here. We need to go back to the size inspector and we need to take a look at estimate size. Now by default, it's set to automatic. So it's gonna attempt to use the intrinsic content size as we saw where the cell was stretched to fit the contents of the label. Now, if we wanna fix this to just 130 by 130 as in the example above, I can just set this to none. And if I go back into the collection view and I start to go to the attribute inspector and start loading cells in like this, you can visually see what it's gonna start to look like. And so that's just a rough idea of what it's gonna look like on this selected simulator here. Now let's go back into collection view controller and just make sure we implement cell selection. To do that, we'll implement the did select item and index path, which is part of the collection view delegate protocol. And so what we can do here is anytime a cell is tapped, we can print out what was selected. So we can print selected country data source at the index path dot row for this selected row that we tapped. So now we have everything ready. Let's go ahead and run this in the simulator one final time to verify how everything is operating. So I can select countries, Brazil, China, Japan. You can see that it's being printed out here below. So our selection is working correctly and we have implemented a very basic collection view controller. So I hope you found this lesson helpful. Obviously it's not that much work to get a collection view controller up and running. If you found this lesson helpful, go ahead and smash that like button and consider subscribing to Code Pro to stay updated for all the latest tutorials and lessons. Make sure to follow Code Pro and social media and make sure to check out my courses on Skillshare and Udemy. I have a full length iOS development course for beginners as well as an intro to core data course as well. Thanks for stopping by, catch you in the next one.