The following steps show how to create
UITableView in a iPhone application, it is very similar to the
UIPickerView implementation:
1. Create the
UITableView in interface builder.
2. Add the IBOutlet for UITableView in the interface (.h) file. (optional, if the UITableView is needed to reference in the code)
3. Link the IBOutlet for UITableView to the UITableView in interface builder. (optional, only if the IBOutlet is created in step2)
4. Implement the following datasource and delegate methods for basic browsing function:
a. numberOfRowsInSection datasource method should return the number of row in the table.
eg.
- (NSInteger)tableView:(UITableView *) tableView numberOfRowsInSection: (NSInteger)section {
return [array count];
}
b. cellForRowAtIndexPath datasource method should return a table cell for the row at the indexPath for the table.
eg.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:
(NSIndexPath *)indexPath {
UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"]; }
if (cell==NULL) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:@"Cell"]
autorelease];
}
cell.text= [array objectAtIndex:indexPath.row]; // cell.text is deprecated
return cell;
}
c. numberOfSectionsInTableView datasource method should return the number of sections in the UItableView.
(Optional, only for multiple section UITableView)
eg.
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return numberOfSections;
}
d. titleForHeaderInSection datasource method should return the header of the section.
(Optional, only needed for multiple sections UITableView)
eg.
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
if (section == 0) return @"section 1";
else if (section ==1) return @"section 2";
// more code to return header ......
}
e. didSelectRowAtIndexPath delegate method would be called if the user selected a row in the UITableView.
(Optional, only needed if there are actions to be performed when user selected a row)
eg.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
// actions to be performed...
// indexPath.section will give the selected section
// indexPath.row will give the selected row
// can implement show detail view....
} f. accessoryTypeForRow delegate method should return the type of accessory (like button, arrow...).
(Optional, only needed if button or arrow accessory is needed to display at the side)
eg.
- (UITableViewCellAccessoryType)tableView:(UITableView *)tableView
accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath {
//return UITableViewCellAccessoryDetailDisclosureButton; 
//return UITableViewCellAccessoryDisclosureIndicator; 
//return UITableViewCellAccessoryNone;
//return UITableViewCellAccessoryCheckmark; 
}
g.
accessoryButtonTappedForRowWithIndexPath delegate method would be invoked when the user clicked on the accessoryButton.
(Optional, only needed if button in step f is setted)
eg.
- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:
(NSIndexPath *)indexPath {
// invoke a method here
// eg. [self tableView:tableView didSelectRowAtIndexPath:indexPath];
}
5. The following steps describe how to implement delete function for
UITableView:
a. Set the tableView into editing mode. There are two ways to set a tableView into editing mode:
i.
tableView.editing property set to
YES
eg.
tableView.editing = YES;
// or [tableView setEditing:YES animated:YES]
ii. If the
tableView has implmented with
UINavigationController, set the
navigationBarButton (left or right) to
editButtonItem. This will allow toggle the
tableView into editing mode.
eg.
self.navigationItem.rightBarButtonItem = self.editButtonItem;
b. Implement the
commitEditingStyle datasource method. This method will be invoked, when a tableView item is deleted.
eg.
- (void)tableView:(UITableView *)tableView commitEditingStyle:
(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
if (editingStyle == UITableViewCellEditingStyleDelete) {
// ... delete code here ....
}
}
6. Link the UITableView's datasource and delegate to the code that implement the above datasource and
delegate methods.
7. The tableView can be set with different background color using the setBackgroundColor method.
Eg.
[self.tableView setBackgroundColor:[UIColor groupTableViewBackgroundColor]];
