Build a simple Table View

With XCode is available the “Navigation-based Application” in which the basic element is a Table View. If you are a beginner iPhone developer and you just need to understand the basic usage of a Table View this template could be a bit overwhelming.

In this article I’ll show the steps required to create a simple iPhone application to show an array of strings on a table.

Let’s start in XCode with the “View-based Application” template. This template shows a simple view. Let’s call the app SimpleTable. On the template there is a View (UIView class) and it will be substituted with a TableView (UITableView class).

In the SimpleTableViewController.h file change UIViewController with UITableViewController and add the definition of the array containing elements that has to be shown on the table.

@interface SimpleTableViewController : UITableViewController {
 NSArray *colors;
}

In the SimpleTableViewController.m file implement the (void)viewDidLoad and (void)viewDidUnLoad methods to alloc and release the array. The array is initialized with a few sample strings.

- (void)viewDidLoad {
    [super viewDidLoad];
    
    colors = [[NSArray alloc] initWithObjects:@"Red", @"Blue", @"Green", @"Yellow", @"White", @"Black", nil]; 
}

- (void)viewDidUnload {
 [colors release];
}

In the SimpleTableViewController.m file add now the code responsible of actually displaying the table data.
The (NSInteger)numberOfSectionsInTableView: methods should return the number of section of the table. In this simple example we have just one section.
The (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection: should return the number of rows for each section. In our example we have just one section and the number of row on this section are the number of elements of the array.
The (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath: is called when a give row has to be display. This is the most important thing should be understood: you don’t call a method in order to display something but the framework calls your code when something should be displayed. This is part of the “lazy” philosophy of the iPhone framework in order to get the best performances: only the actually displayed cells are requested to your code. The use of the dequeueReusableCellWithIdentifier method is highly suggested in oder to get good scroll performances: only the strictly required cells are allocated in memory and when possible the same cells are reused without being allocated. The indexPath tells your code which section (if more than one) and with row is currently requested.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 return [colors count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView 
        dequeueReusableCellWithIdentifier:CellIdentifier];
 if(nil == cell) {
  cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
            reuseIdentifier:CellIdentifier] autorelease];
 }

        cell.textLabel.text = [colors objectAtIndex:indexPath.row];
 
 return cell;
}

The last part is done graphically with Interface Builder. Just remember that everything can be don with Interface Builder can be done with code.

Double click on SimpleTableViewController.xib file to open it on Interface Builder.

Delete the View (UIView) item and drag a TableView (UITableView) from the library as shown in the following picture.

Right click on File’s Owner and connect the View item with the TableView you just added as shown in the following picture.

At last right click on the TableView item and connect both dataSource and delegate to File’s Owner as shown in the following picture.