Saturday, April 23, 2011

UITableView

The UITableView is a very common design pattern used in iOS apps. They help in presenting a lot of data in limited screen real estate.



Setting up a UITableView requires a delegate and a data source to be implemented. In case you're not familiar with the delegation and data source concepts, think of it like this, the delegate is a class which tells the OS, how to present the table view, for ex its size, the modes in which the table view should be like editing, normal etc. The data source, as the name suggests provides data to the table view to present it on the screen.

This was about the concept of delegation and data source, to actually implement it, you should declare one of your classes (view controller, preferably with a nib file as well) as the UITableViewDelegate and the UITableViewDataSource. This is done by adding <UITableViewDelegate>, <UITableViewDataSource> after the class declaration in the header (.h) file, like this :

@interface MainViewMulti : UIViewController <UITableViewDelegate,UITableViewDataSource> {
//class members
}

To actually add the table view you can either do it through code or interface builder. Interface builder is preferred if you have relatively simple tasks. So click on the nib file linked with your view controller, it will open interface builder. Now in the library search for tableview and drag it to your nib.



After doing that right click on the table view you just dragged, there will be delegate and datasource outlets, drag it to the files owner. This tells the table view that the class you've declared is its delegate and data source.


Now that you have declared your class as the delegate and the data source it is time to implement mandatory methods which will provide data and set up the the tableviewcells.

The apple documentation says that the following methods are mandatory


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section


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

The first method tells the device, how many rows do you want, that value is specified by the return value of that method.

The second method tells the device what contents to put in each row of the table view. This method is called for each row.

Right now you have the basic framework required for setting up a table view. You can use this as a template for all of you tableviews.

Now to actually put data in your table view let us declare an array in the header file, and populate it with nsstrings. Let us name the array tableDataSource, to populate it insert the following code in your viewDidLoad method


tableDataSource = [[NSArray alloc] initWithObjects:@"Monday", @"Tuesday", @"Wednesday", @"Thursday", @"Friday", @"Saturday", @"Sunday",nil];

In case you aren't familiar with arrays, this is one of the convenience methods to directly assign an array with objects.

Now the table view will contain as many rows as the number of objects in the array, so to tell this to the os add the following line to your -  numberOfRowsInSection method
return tableDataSource.count

The only thing left now is to populate each row of the tableview with the items in the array, to do this add the following code to your cellForRowAtIndexPath method


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

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

Now save everything (including the nib files) build your project and you should see the table view with the items you set in the simulator.

Next we will discuss how to put the table view in edit mode and how to add and delete items from the tableview.

No comments: