Hi. Within this lecture, we're going to see how we can create custom cells in our table views so we can display the users whatever we want in our table views. So far, we have been displaying only texts. Remember we created cells and we have said that cell.textlabel.text is this. But this time, we don't want that because we want to show users the image. We want to show users the comment, the post owner, the like button, the like label and whatever we want in the post cell.

So, let me open this panes from the left and right button and we have to go to Main.storyboard because that's where we're going to do this operation. We don't even have a table view in our FeedViewController right now. So first thing to do is, should be opening our library and bringing in a table view. So this is going to be a regular table view like we have been doing so far. So bring in, and in this View Controller we will only have our table view. So I'm going to come over here and give zero constraints as usual so it will stretch out all the way to the edges.

And then, we should find a way to create a new cell in here and design that cell rather than creating the cell in the code in the FeedViewController table view. Remember we had said that let cell is a UITableViewCell and cell.textlabel.text and everything, right? Now we don't want that. So, first let me open this assistant editor and bring in this TableViewController. I'm going to call this tableView. So this is working. That's good. And let me delete all of these commands from here and then we are good to go and do what we have to do to create a new cell. So if you come over to the attributes, you will see this prototype cell. So this is default zero. And if you make this one, there is a cell appearing in here as you can see, this is a table view cell.

So, let me drag this down a little bit to make this a little bit bigger because that's going to be our cell. That's the cell that we will be using in the table view so we can design it in the way that we want. That's what we use, we use prototype cells to create new cells and use them in our table view so that we can put anything we want in there. So, rather than just showing attacks, I'm going to go in and bring in some image views, bring in some labels, and everything. So let me drag this down a little bit and if you open your library, you can drag in whatever you want. So please choose an image view and put it over here. So, we will be displaying the post image in this image view for example. So let me make this a little bit bigger because we are building an Instagram clone and the image is the most important part.

Above the image, maybe we can have a label displaying the user name or user email. So, let me make this one big and a little bit bigger here. So that's good. Let me align this a little bit more. And for label, I'm just going to say, user name or user email. Of course we won't use it like this but for right now I'm going to give it a name just to see how it looks like on my prototype cell.

So below my UIImageView, I want to have another label in which I will show the comments, right? So let me bring in a new label here. So this is where we're going to show the comments. Of course you may want to have a bigger label or maybe text field in order to show a longer comments, but in order to keep things simple, I'm just going to call this comment, and later on, I'm going to add a new button.

So I have my user email, I have my image and comment, now I have to have a like button here as well. Remember our first app that we have seen in the first lecture of this section? We had a like button in here. So let me make this a little bit bigger and let me go to attributes. We can call this, like. So here, let me put this a little bit left so that it will align here. And we need a label to show the like count. This will only like the current post but we have to actually count the likes and we have to show them in a label in the right hand side on the bottom.

So let me bring in another label here. It's going to be our like count label. So let me make this a little bit bigger and align it to the right so it will align to the right edge of the image. So I'm going to call this 0, so we will understand this is the like count and I believe that's it. That's what our prototype cell will look like. So, this is our post cell, if we don't like it, we can always come back later and add new ones, delete existing ones and change the way it looks if we want to. And we have to give this an identifier but make sure that you select this table view cell. In the table view cell, I'm going to call this cell and we will need this identifier. So remember that we are creating a cell right here and we have to define it in the code as well.

And another new thing for you, in order to drag and drop this into a viewController, we're going to have to create a cocoa touch class only for this table view cell. So yes, we have a cocoa touch class for table view cells as well. So if you come over here and say new file and select cocoa touch class, we're not going to go for UIviewController this time, but we want UITableViewCell, not TableViewController, UITableViewCell. And you can change the name to FeedCell, for example. And after that, make sure Swift is selected and hit 'Next.' This will create a cocoa touch class only for our feed cell. We're going to assign this to our feed cell and then drag and drop everything in here as you can see this is a UITableViewCell rather than UIViewController right now. So go back to your main storyboard and we will start to drag and drop everything inside of our newly created cocoa touch class. Of course before that, you have to select the cell and make sure you go to identity inspector and in the class, find the feed cell and assign the feed cell to our cell so that this view and our View Controller is connected together. So, now we can start dragging and dropping everything inside of our feed cell. So, let me click over here and let me find the views one by one and define it here. So let me drag here as a user email, UserEmailLabel. So this is going to be my label. And let's go for a comment label. So this is comments label. Of course, we're going to have other labels and image view as well so let's bring in the image view. So this is an userImageView or postImageView, whatever you want, userImageView. And here we have a button, another button and like count label. I'm going to take the zero. I'm going to make sure I'm selecting the right thing. Yes, I want this one, so I can just drag and drop from here as well. I'm going to call this like label because later on I'm going to go for like button so make sure button is selected and bring it in as an action, so like button clicked.

So, we are done for our feed cell I believe. Now, let's give some constraints, lets say reset to suggested constraints or update constraints. Make sure you give all the constraints to here and make sure you give width and height constraints to your UIImageView as well in order to prevent anything from going wrong like we used to do before. So this is our UITableViewCell, cocoa touch class. As you can see we have this awakeFromNib so this is kind of a viewDidLoad in the UITableViewCell. In regular viewControllers, we have viewDidLoad. And in here, I believe we have to make sure that table view is properly set up. So let me just run this, for right now we're going to see an empty table view, I believe. And then later on, we're going to add the delegates and other stuff as well. So, let me see the empty table view, yep, we see the empty table view. Right now I'm going to assign my cell as my created cell by us. So, let me go over here and say UITableViewDelegate, okay? And UITableViewDataSource. It's not auto completing again. So, let me close this down and wait for it to come refresh, okay? So, let's say TableView.delegate self. TableView.dataSource self, it's not coming. And I believe we have to do Command B to build this. We are getting an error. So, let me click on this and see what error do we have. We're not getting any error actually because we haven't implemented the number of rows in section, cell for row at index part, that's why we're getting this error but it doesn't auto complete it for me. So, I believe if you come across in a situation like this, all you have to do is just close this down, okay? And open it one more time. So, let's close this down and let's refresh this. Let's go to iOS and find the InstaCloneFirebase, make sure you select the workspace rather than work project, and here you go. Let's try to write, and it doesn't show up really. So, let me clean this. And it says that it's indexing, and after indexing completes, yes, now we can see all the auto completion. Now I can go for number of rows in section, okay? And in here I'm just going to return 10, as an example. Later on we will change this, and we need cell for row at index path. And that's where we connect our newly created cell with our table view, right? We generally say cell is UITableViewCell but that's not what we want at this point. Rather we're going to say tableView, okay? We are referring to this tableView here and we're going to say .dequeueReusableCell. So, that's the way we want. DequeueReusableCell with identifier and for index path. That's how we connect our created prototype cell to this table view because we have that identifier, right? An index path is index path as given in the function. And we have to cast this at feed cell and it will work because we have the feed cell view controller file, right?

And we have to return this cell because this function expects us to return a UITableViewCell. Great, so let me do a Command B and see if this error will go away, yep. Everything seems to be working fine. So, let me show you how cool to work with UITableView Cells, because if you say cell. you can actually reach the comment label, you can actually reach the like label, the labels and image views that you have defined previously. Now I can change those values from here. Now, I can just say cell.userEmailText is going to be something like test, and you can just go for cell.likeLabel.text is going to be zero for example. And let's say cell.commentLabel.text is going to be a comment, okay? In fact, let's do this, something like user@email.com to see how it looks like. And let's say cell.imageView, userImageView, not imageView, userImageView.image is a UIImage, and open parentheses and find names and just give the select.png as a dummy variable in here because later on we're going to replace it with our post image. And that's good for testing this. So, let me create this, and if this works out we will see 10 rows of our customized cell, okay? And if I run this, it gives me some kind of error, I believe. We have a crash in here and it doesn't see the tableView. Okay, it says that tableView is nil, and it shouldn't be. And if you come across in a situation like this, all you have to do is check the connections. So, let me go to main storyboard, okay? And let me find our tableView. So, let me click on this tableView, make sure you select the tableView and if you go to these connections, if you go to these outlets, you will see that table view is not connected to our feed view controller. So, let me open the feed view controller. Even though we have done this before, for a reason, I believe this is some kind of bug. So, make sure you delete this and then we're going to define it again. So, let me drag and drop tableView and make sure you take the tableView, okay? So, I'm going to call this tableView one more time, and this time as you can see, we now see the connection. It shouldn't happen really, but I believe it's kind of a bug so maybe you can come across in a situation like this later on in your project, so you know how to solve this. So, let's try this one more time. Let's open our simulator. And again, if this works out, we're going to see 10 rows filled with our customized cell. And here we go. Now we see our custom cells, now we see the email, we see the image view, we see the comment label, like button and like label 10 times. So, that's great. Now, all we have to do is find a way to get all of this information from Firestore so that we can display them one by one in here. And after getting this information, displaying them is trivial because we already have the setup. All we want to do is just fill up the arrays and show them to the users. So, that's what we're going to do within the next lecture.