[MUSIC] Okay now what we're going to do is we're going to create a prototype cell. And we're going to connect our table view to our view controller so that we know that the view controller's the place where the delegate and the data source is going to be drawn from. So let's switch back to our project and let's put our prototype cell and to open up our hierarchy here so we can see what we're working with. And let's take our table view cell and let's drop it into our table view here and this becomes our prototype cell. And into our prototype cell let's take a label. And let's put a label into our cell. And lets give it constraints within the cell to make sure that it fills up the whole space. We want it to be at zero, at zero, zero, and zero to add those constraints. Let's Option+Cmd+Equals, lay it out, see how it looks. Additionally, I think I might want to be, I'm going to control drag it to the thing at its end to the element that it's in and want to center it vertically in the container and I'm going to Option+Cmd+Equals to make that layout right. And then just to demonstrate the functionality of this cell. What I'm gonna do is I'm gonna select my cell and over here you can, I want this label to be italics so that we can just kind of see what's happening here. So let's see. Okay, there we go. I still want it left aligned. Okay. Okay, that's good. Now our table view cell, so what we've done is we put a label into our table view cell. That cell is going to be something that we create, and we've going to create multiple copies of that when we create our label. And, yeah, so we're gonna go ahead and call and give that cell a name so that we can access it. And call it our cell. [SOUND] All right. So far so good. And now we want to assign the delegate and the data source of our table cell to the code in view controller. We saw this before when we did our scroll view. We're gonna click on table view and we're gonna control drag it to the view controller and we're gonna set it as the data source, and then we're gonna do it again and we're gonna set it as the delegate. What that means is that we're gonna need to go and write code that implements methods in our view controller because we've just assigned it to be the delegate and the data source. When we do that we need to give our view controller a couple interfaces and we are going to give it have it be two interfaces we want it to have the UITableViewDataSource and UITableViewDelegate. There we go. Super. And the first thing that I think we wanna do is we're going to have to answer the iOS request to say how many rows should iOS put in our table. And for starters, let's just hardcode this as three. And so in order to do that we have to implement a couple of functions. The first one is going to be. Here we'll put a, Just a marker in here to indicate that we are doing UITableViewDataSource, functions here. And the first thing that we want to do is we want to see how many sections are in our data, and this is a function that is described as part of our interfaces and it is number of sections in table view, great. And we're just going to return one because we're not going to have multiple sections we're just going to have one section. So that's super. All right, the next thing that we want to do is we want to say, okay how many rows are going to be in a given section? So the way that this happened is iOS says asks us, hey, here is a section, how many rows should be in it? So we have to have a function that can answer that question. So this is gonna be also return NSInteger object and it is going to be the number, NSInteger is gonna be tableView, numberOfRowsInSection. Great, and we're just going to hard code back the answer three for the time being, just so that we can see the result and see how this works. Then the last thing that we need to implement is we need to respond with what the data should be in each of those cells. And so iOS is gonna ask us to create the appropriate cell for a given row. And so we're just gonna repeat the same thing and we're going to write a function that returns a UITableView cell. And it is, did I do that right? Pointer, not. Tableview. Something, I didn't type something right here let's see. UITableView solve pointer. Tableview. Good. UITable, there we go, UI table view, not cell, just UITableView. Okay, so this function is responsible for replying with which cell, should be placed into a table in a given row. So iOS will say hey here's the index path and the index path is a combination of the section and the row and we're responsible for returning the cell that's appropriate there. So what we're gonna do is we're gonna grab that cell and we're going to return it. And so, what we're gonna do is, we're going to need to have access to our prototype cell. So let's see, how are we gonna do that? We're going to, Need to have access to our TableView. Where is our TableView? All right, so let's Ctrl-drag that over to our interface. So we have access to our table view. All right. And what else are we gonna want? We're eventually gonna want to add our button, and we're gonna have our text field, but we're not gonna work with that quite yet. And what we're going to do is we're going to grab from the table view the TQ reusable cell with identifier and the identifier is going to be our cell. And for index path, index path. Great. All right, so let me describe what I just did here. Return that. All right, and it's complaining about something. Let's see. Strange cluster base. There we go. Okay so this is a function that is called cell, tableView, and then cellForRowAtIndexPath. And we're gonna be pass the indexPath that we're interested in. But for the time being, we're not using that information. We don't care what it's going to be right now. Instead what we're gonna do is, we're gonna ask our table view, which we've defined up here, to give us a cell from our prototype cell list, whose name is label. Here's our cell, and we see over here we gave the cell an identifier cell. And so that prototype cell is what we're asking for and we're going to return that. We're going to return three of them when we're asked and there's only going to be one section. So if all goes well, when we run this we will see a table with three elements in it. Let's see if that works. Great, so, wow, that worked really well. Except my sort button disappeared. We have to see what happened to our sort button. You can see that these labels are in a table, that they bounce and you can scroll them, and that's not very interesting but we've multiplied three different prototype cells there. Let's see what happened to our sort here. Table view seems to have subsumed it. [SOUND] All right, well let's see, let's take all of the constraints off of our table view. Makes me nervous. And let's run it again, see if we get our sort button back. Nope, still don't have our sort button. Let's get our table view and lower it a little bit. Let's see if we can give it some spacing here, vertical spacing. And Option+Cmd+Equals, like that, cuz we took all of them off. Okay, so we need to add constraints back to our table view so we can get the desired effect, which is that the table is visible. All right, so we've given it vertical spacing from sort and now we wanna place it 0, 0, 20 from the sides and the bottom. Add those constraints and then Option+Ctrl+Equals, see if it lays out, good. Now we'll play it. We've got a table view, and our sort button has still disappeared. Why has our sort button disappeared? I'm not sure. Let's try relaying out our sort button. We'll clear all the constraints on our sort button. Let's lower it a little bit. Hm, let's align it horizontally in the container. Let's add that constraint. All right, let's bring it down again. Oops. Let's give it constraints on the top and the bottom for now. Option+Ctrl+Equals, you see that lays out okay. Let's run it. See if we can get our sort button back. There we go. Our sort button is back. Constraint somehow got overridden or something. I don't know what was going on. That's not a great user interface but I don't want to spend too much more time on that. I just wanna have the sort button there for he future. All right. All right so we established that our view controller is the delegate for our table view and we've written these three functions that are going to provide the number of sections in the table view, which is one. The number of rows in the section which is gonna be three regardless of which section we get. And we're going to return a cell, which is a copy of each of the elements. Okay, so the next thing that would interesting is if we would change the content of the label to be equal to the value of, The row that we got. So, that would be kind of an interesting thing to do. So let's see if we can do that. So, the first thing that we're gonna wanna do is, let's create a subclass that is going to represent our cell object, all right? So that's what we're gonna do next. We're going to create a class that enables us to capture all of the data associated with the cell. So that's what we'll do next. [MUSIC]
