Resources : Blog

UITableView Tutorial : Introduction to iPhone TableView

By Prasad Tandulwadkar in iPhone - iPad

February 11, 2010

< All >

Table view is commonly used to show lists of data. A table view is the view object that displays table’s data and instance of UITableView. Each visible row in a table view is implemented by UITableViewCell. Table views are not responsible for storing your table’s data. They store only enough data to draw the rows that are currently visible. Table views get their configuration data from an object that conforms to the UITableViewDelegate protocol and their row data from an object that conforms to the UITableViewDataSource protocol.

Follow the steps below to create UITableView sample:

1.Open Xcode and create new view based project named ‘SimpleTable’

2.Modify code in the SimpleTableViewController.h file as follow:

[objc highlight="4,5,7"]#import &lt;UIKit/UIKit.h&gt;

@interface SimpleTableViewController : UIViewController
&lt;UITableViewDelegate,UITableViewDataSource&gt;{
NSArray *listData;
}
@property(nonatomic, retain) NSArray *listData;
@end
[/objc]

3.Open SimpleTableViewController.xib file and drag Table View from Library over to the View Window.

4.Connect tableview’s dataSource and delegate from connection inspector to File’s Owner.

5.Modify code in the SimpleTableViewController.m file as follow:

[objc highlight="4,7,8,9,10,15,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44"]#import &quot;SimpleTableViewController.h&quot;

@implementation SimpleTableViewController
@synthesize listData;

- (void)viewDidLoad {
NSArray *array = [[NSArray alloc] initWithObjects:@&quot;iPhone&quot;, @&quot;iPod&quot;,
@&quot;iPad&quot;,nil];
self.listData = array;
[array release];
[super viewDidLoad];

}
- (void)dealloc {
[listData dealloc];
[super dealloc];
}

#pragma mark -
#pragma mark Table View Data Source Methods

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

- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{

static NSString *SimpleTableIdentifier = @&quot;SimpleTableIdentifier&quot;;
UITableViewCell *cell = [tableView
dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:SimpleTableIdentifier] autorelease];
}

NSUInteger row = [indexPath row];
cell.textLabel.text = [listData objectAtIndex:row];
return cell;

}

@end
[/objc]

In viewDidLoad we are creating an array of data to pass to our Table View.
We have also added two more methods of data source delegate which are mandatory to implement when your implementing UITableViewDataSource delegate.

[objc]
(NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger)section
[/objc]

which specifies how many number of rows are there in one section of the Table View.
The default number of section in Table View is one.

Another method is

[objc]
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
[/objc]

Which is called by table view when it needs to draw a row. This method is called n times and value of n is equal to value returned by first method. As this method is called once for every row,

[objc]
if (cell == nil)
[/objc]

checks, if cell exits before, if not create new cell. Here ‘indexPath’ parameter gives us current Indexpath of the row from which we can get the current drawing row. Then we set the text of textLabel property of the current drawing cell and finally return the cell to the Table View.

You can download the source code used in this tutorial from here

Output will look like this:

Output For SimpleTableView