Table views require a data source to display content. That content must come from somewhere outside of Interface Builder. This movie shows how to create a simple table view data source in Xcode.
- View Offline
- [Todd] In order to put data inside of our table view, we actually need to do two things. We need to connect the table view to a data source object which is going to be a code object and then we need to have that code object give data to the table view by handling the data source methods. Now that may sound a little bit complicated but it's actually quite simple, inside of the connections inspector, which is the circle with the arrow in it in the inspector bar, you're going to see data source under outlets and of course you'll need the table view selected in order to see that so make sure it's selected and then you should see data source and just drag from that circle there onto the view controller object which is the yellow circle with the white square inside.
Make the connection and then you can see in the connections inspector the data source is set to be the view controller and that tells the table view it's getting it's data from the view controller class. So let's head over to the view controller class, in order to provide data to the table view, we need to say that this class is a Table View data source. So after where it says UIViewController on line 11, I'm going to type a comma and a space and then type UITableViewDataSource, that says that this class is going to be a data source for a table view and we're getting an error now because when you declare a class as implementing the UITableViewDataSource protocol, there are required methods because we haven't handled those methods yet, to be a data source, we're getting an error.
If you want to know all of the methods that you can optionally or are required to define as a UITableViewDataSource. I recommend highlighting UITableViewDataSource and then going over to the Quick Help inspector in the utility area and then using the links to see what methods are available. For now we only have two required methods, we need to provide how many items are in the table view. Now those are list items. In iOS those are called rows, so let's provide the number of rows that are going to be inside of our table view.
I'll do this right under viewDidLoad. I'm going to start typing numberOfRows and as you type that out, you're going to see this method highlighted, tableView, numberOfRowsInSection. So table views have rows and sections, rows are the individual lists items, sections are the groups of rows. By default, table views have one section, so we don't need to handle number of sections until we have more sections than one in our table view.
So here I'm handling numberOfRowsInSection, and I just need to return a number that represents how many rows are going to be in my table view. So for now I'm just going to return five, so now we've said there are going to be five rows in the table view, if we were to test the app, A: we'd get an error, B: if it ran, nothing would change. We haven't put anything inside the table view, we've said it's just going to have five rows in it. So now we actually have to define what is going to be in those five rows.
We go down a few lines below that method and then I'm going to handle cellForRowAt indexPath, now you can start typing tableView and you can pick out that method among all the table view methods or you can start typing cell to get to this method more quickly in the code hinting window, so this is what we want, tableView cellForRowAt. So in addition to having to having rows, there are also table view cells, table view cells are the visual end of the table view, these have the icons and the lists and the switches or the custom UI optics that you may add to your table views.
So what we need to do with this method is actually return a UITableViewCell, so we're going to define a cell right here and I'm going to just call the UITableViewCell constructor, that's going to create a new cell and then I'm going to put some text in it. A UITableViewCell object has a label built in, so you don't need to make your custom cells to have that label that you have access to and if you want to know more information about table view cells and what you have access to without having to create any custom UI objects, you can always click where it says UITableViewCell and then head over to Quick Help to look more into the documentation.
So to modify the label that's in that side the cell, we're going to call cell and then it's called textLabel, that's the property of the label that's inside of the table cell, so we can set it's text property equal to a string to put some kind of value inside of our table view cell. Alright, some text inside of here and then all we need to do is return the cell and now we've successfully provided a data source to our table view.
Let's run the application in the Simulator and see what we get. And we get "It's a CELL!" and it's repeated five times, the reason we're getting that is because numberOfRowsInSection defines that we are having five rows in our table view so we can see that there are five rows right here and then in cellForRowIndexPath we've created a table view cell, we've changed the label of every one of these cells, remember this is going to be called once for each row inside of our table view.
So five times this method is called where we created UITableViewCell, we said it's text to "It's a CELL"! And we return it, that's why we're seeing the same thing every time. So to review, you need to connect your table view to a data source to get objects to appear inside of the table view then as the data source in your class you need to handle at least these two methods, tableView numberOfRowsInSection and tableView cellForRowAt indexPath.
- Creating table views and data sources
- Loading an array
- Grouping sections
- Adding titles and images to table cells
- Responding to table row selection events
- Adding tabs to a tabbed application
- Transitioning between views
- Sending data between views