How to get started with UITableView

So my friend and I was developing our iPhone application and I decided that I should keep track of how to do things or get things started so that in case I come back later I won’t have to google everything again. Anw, the 1st thing iPhone SDK presents to you is the UITableView which turns out to be much more useful than it looks like.

UITableView has 2 different default style: Grouped and Plain. It is is separated into sections, and each section is separated into rows. You might think that Interface Builder will allow you to customize each row and section but it doesn’t. When I first started I was fiddling around with it for a while until I figure out you either have to give it a model or do it in the source file itself.

So let’s get it started. Once you create a UIViewController subclass through XCode, it’ll give you 2 classes (or 3 if you click the checkbox “With XIB for user interface”. But anw, you’ll get:

  1. Header class with .h extension
  2. Implementation class with .m extension
  3. (Optional) User interface class with .xib extension

If you have experience with C/C++ you know what header class do and for this particular tutorial we don’t really need to touch it. Let’s dig into implementation class.

The implementation class has a lot of methods. But the main operations are:

How do I start putting rows to the table? First of all you need to specify how many sections you want in this method:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;  //change 1 to any number of sections you want
}

After specifying that, you can move on to specify the number of rows:

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 5;
}

So now I have 5 row in each section. If you want different number of rows in each section, you can put a switch statement in there like:


// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
switch (section) {
case 0: return 5;
case 1: return 4;
default: return 3;
}
}

So now the 1st section will have 5 rows and such. So there you are that’s how you put rows into your blank table.

How do I put data into each row? You can do that in this method:


// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}
// Set up the cell...
cell.textLabel.text = @"Test"; //now all row with have "Test" text

return cell;
}

Now what happens if I clicked on a row? You can do it in this method:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

// Navigation logic may go here -- for example, create and push another view controller.
AnotherViewController *anotherViewController = [[AnotherViewController alloc] initWithNibName:@"AnotherView" bundle:nil];
[self.navigationController pushViewController:anotherViewController animated:YES];
[anotherViewController release];
}

So when you select any row, it’ll navigate to another view if you implement Navigation Controller.

How do I know which row I selected/clicked on? You can get that info in indexPath, which is a pointer to NSIndexPath class. The section can be accessed with indexPath.section and the row can be accessed with indexPath.row.

There you go it should be enough to get you started.

Advertisements
Tagged , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: