Mastering UITableVIew – UITableViewController and UITableViewSource

In this lesson

  • Extend UITableViewSource class
  • Implement abstract methods
  • Create UIViewCell instance
06:16 C# 100

Transcript

Tap on time to skip ahead

00:00

In this video series we are going to try to demystify how you can use UITableView with your Xamarin.iOS applications. So before I kicked off this video, I did some initial set up with Xamarin Studio. I created a single view app and then I edited the main storyboard to have the following. We have a UINavigationController as the root of our application and then its first child is what’s known as a UITableViewController. And our UITableViewController also has a class of MyTableViewController which you can see here in our solution, like so. If I run the application, we will get a very plain vanilla experience. In that, all we should see is our navigation bar from our UINavigationController and this empty TableView here.

01:12

To kind of make sure everything is wired up correctly, I’m going to go ahead and implement the ViewDidLoad method in the MyTableViewController and I’m gonna set the title of this to “Demo.” And if I run the application we should go from “Title” to “Demo” and then we know our code is wired up correctly. Viola.

01:41

So how do we go about populating this UITableView? Well, all UITableViewControllers have a property called “TableView.” And if we hover over TableView you will see it’s of type UITableView. And if you were in a regular UIViewController you could create a TableView and then add it to your sub view and change its height and width and what not. But in iOS more often than not applications follow a master/detail pattern and you will have multiple screens that consist of like a feed or like a series of options or items in a list view that takes up the entire screen, or I should say table view, and we select one these items takes you to the detail. So UITableViewController can be a very handy UIViewController to work with in that you don’t have to bother with creating the table view, adding it to the sub view, and laying it out, etcetera.

02:40

Well, back to our original question of how do I get it to list anything? Well. All table views in Xamarin.iOS have this “Source” property. And if we hover over Source. We’ll see it’s of type UITableViewSource. And this UITableViewSource could also can be thought of as like a delegate, or helper, or in some ways a puppet master that is going to tell our UITableView what it should do not only when it comes to populating data but how it should populate that data as well as handle, you know, if a row is selected and whatnot.

03:15

So I’m going to say our source equals “new DemoTableSource()” I want to use our handy dandy Xamarin Studio helpers here and I’m going to create a class DemoTableSource in our project. Or in our class, here. And it looks like it’s missing a curly bracket there.

03:44

And so if we try to compile our application will get this error here. That says “Table source does not implement inherited abstract member.” And that is because UITableViewSource is actually abstract class not a partial class or a full standalone class. So I’m gonna put my cursor here in the middle of the squiggly line and say implement abstract class. And this is kind of cool in that it’s kind of telling us what is the bare minimum of methods that we have to implement to display something.

04:15

So if we take a look at “RowsInSection.” This is basically how many rows of data do we actually have. So I’m gonna just wily nilly throw out three. And then we have this “GetCell” method that we also have to implement. And for now what I’m gonna do is “var cell = new UITableViewCell.” And if we take a look at the constructor options we’ll see that we have a UITableViewCellStyle. So I’m going to say “UITableViewCellStyle.Value1”. There’s about three different default values and we’ll get into that later and then we need to know what is going to be used as our reuse identifier and this will be something else that we get into later where I must say “aPlainCell” And then return the cell.

05:12

But if we run our application. We still really won’t see anything. And the reason we won’t see anything is we’re just returning empty cells right now. So let’s say “cell.TextLabel = ‘Hello World’.” You can’t kick off the series without having the word “Hello World.” And so as you can see we’re now displaying three items in our TableView. And so this is the bare minimum of code that we have to write with a UITableView to get it to display rows. In future lessons, we’ll explore how we can pass data, actually display data that might reflect what we really want, as well as how we can change how the UITableView works as well as how to handle row taps.