In this tutorial you will learn how to create a simple index for the table view. This index view shows up on the right side, just like the contacts application. Click on “Read more…” to learn more
Introduction
Displaying an index for the table view is another way for the users to get the data faster. This tutorial will show you how to do that. This is the fifth tutorial in the UITableView tutorial series and borrows its code from the previous one. This is how the app will look like
Creating an Index
The first thing we need to do is create an array, which will contain the index values to display. The values in the array has to be of type NSString. The Apple documentation says that the style of the table view should be set to UITableViewStylePlain. However, it does not throw an error when the style is set to UITableViewStyleGrouped. The array is returned in sectionIndexTitlesForTableView method and this is how the code looks like
//RootViewController.m
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {
if(searching)
return nil;
NSMutableArray *tempArray = [[NSMutableArray alloc] init];
[tempArray addObject:@"1"];
[tempArray addObject:@"2"];
[tempArray addObject:@"3"];
[tempArray addObject:@"4"];
[tempArray addObject:@"5"];
[tempArray addObject:@"6"];
[tempArray addObject:@"7"];
[tempArray addObject:@"8"];
[tempArray addObject:@"9"];
[tempArray addObject:@"10"];
[tempArray addObject:@"11"];
[tempArray addObject:@"12"];
[tempArray addObject:@"13"];
[tempArray addObject:@"14"];
[tempArray addObject:@"15"];
[tempArray addObject:@"16"];
[tempArray addObject:@"17"];
[tempArray addObject:@"18"];
[tempArray addObject:@"19"];
[tempArray addObject:@"20"];
[tempArray addObject:@"21"];
[tempArray addObject:@"22"];
[tempArray addObject:@"23"];
[tempArray addObject:@"24"];
[tempArray addObject:@"25"];
[tempArray addObject:@"26"];
return tempArray;
}
The above code creates an array and returns it. You can populate this array with alphabets from ‘A’ to ‘Z’. If the user is searching the table view, then the array is not returned. This way the index view is not shown.
Handling Events
When an item in the index is clicked, the section starting with the selected index item is displayed. The event that gets called is tableView:sectionForSectionIndexTitle:atIndex, which returns an index of the section to display. Since our data source only has two sections and 26 index values, the code looks like this
//RootViewController.m
- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index {
if(searching)
return -1;
return index % 2;
}
If the user is searching the table view, then we do not return the index of the section. The data source is changed a little to include some test objects, so the section selection is obvious. Since the index shows up very close to the accessory view, the accessory view is set to UITableViewCellAccessoryNone.
Conclusion
Just by implementing two methods, we have created an index for the table view. However, I think Apple has kept some methods private. Since we cannot display the magnifying glass like the contacts application. If you have an idea on how to get it working, please let us know.
Happy Programming,
iPhone SDK Articles
Attachments
Suggested Readings
- UITableView – Creating a simple table view
- UITableView – Sectioned table view
- UITableView – Searching table view
- UITableView – Adding subviews to a cell’s content view
