iPhone App Tuts - Free iPhone App Tutorials & Resources

UITableView is the most needed control in iPhone Applications. It is used to show a list of items. In this tutorial it is shown that how you can create a simple table view and show text in each row.

I have attached the source code and it can be downloaded here.

Create a simple view based project. Drag UITableView and place it on your view in interface builder. Declare an instance variable in the controller as follows:

IBOutletUITableView* tblTest;

Map this variable to the actual table in interface builder. As shown in the following picture.

Now you have to add data in this table. For that you have to implement two protocols.
1) UITableViewDelegate and 2) UITableViewDataSource. Add the code for these in your controller as follows:

@interfaceTableViewViewController : UIViewController<UITableViewDelegate, UITableViewDataSource> {

Now you have to implement 2 needed methods of these protocols.

1) To tell how many rows this table has as follows:

- (NSInteger)tableView:(UITableView *)tableViewnumberOfRowsInSection:(NSInteger)section {
return4;
}

This shows that this table contains 4 rows of data. Each row is called table cell and is presented by UITableViewCell.

2) To tell what data will be shown in each cell following method is needed to be implemented in the controller:

- (UITableViewCell *)tableView:(UITableView *)ttableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath {
       staticNSString *MyIdentifier = @"MyIdentifier";
 
//If a cell with this identifier already created then it will be reused
       UITableViewCell *cell = [ttableViewdequeueReusableCellWithIdentifier:MyIdentifier];
if (!cell) {
       //If a cell with this identifier doesn't already created then it will be created and assigned an identofier
cell = [[[UITableViewCellalloc] initWithFrame:CGRectZeroreuseIdentifier:MyIdentifier] autorelease];
}
 
// Index of the cell to be processed
int index = indexPath.row;
// Text is going to be set of the cell
cell.text = [NSStringstringWithFormat:@"%i", index];
 
// Cell is returned which will be shown on table
return cell;
}

Comments are written to explain each step. Now you have to assign delegate and data source to the table. In viewDidLoad of your controller write the following code to set the data source and delegate to self:

tblTest.delegate = self;
tblTest.dataSource = self;

Now you have done all. Now Build and Run the project. This is tested in SDK 2.0. You will get the following output:

Hope this tutorial will help you in showing the data in table view. In next part I’ll let you know how to interact these rows.  Stay tuned!

Related Posts