iPhone SDK Articles
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
- UITableView – Creating a simple table view
- UITableView – Loading a detail view
- UITableView – Sectioned table view
- UITableView – Searching table view
- UITableView – Indexed table view
- UITableView – Adding subviews to a cell’s content view
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
If you enjoyed this article, please consider sharing it!
Actually I have got it Indexed but not linked. There I need some help.
Thanks
How can I get an ‘Indexed’ table if I am running a DataBase? I have tried many ways and am having problems. Can anyone help me?
Thanks
NSArray *searchArray = [NSArray arrayWithObjects:
@"{search}", @"A", @"B", @"C", @"D", @"E", @"F", @"G", @"H", @"I", @"J", @"K", @"L",
@"M", @"N", @"O", @"P", @"Q", @"R", @"S", @"T", @"U", @"V", @"W", @"X", @"Y", @"Z", @"#", nil];
You forgot Y
>Apple has provided an NSString constant for the magnifier in iPhone OS 3.0: UITableViewIndexSearch. This constant works the same as @”{search}” but will keep your application robust if Apple decides to suddenly change the value of the string.
>- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index {
NSLog([NSString stringWithFormat:@"clicked index : %i",index]);
if (index == 0) {
[tableView scrollRectToVisible:[[tableView tableHeaderView] bounds] animated:NO];
return -1;
}
return index;
}
>Using @”{search}” how can I get the view to scroll to the search bar when the magnifier is pressed? Thanks
>”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.”
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {
NSArray *searchArray = [NSArray arrayWithObjects:
@"{search}", @"A", @"B", @"C", @"D", @"E", @"F", @"G", @"H", @"I", @"J", @"K", @"L",
@"M", @"N", @"O", @"P", @"Q", @"R", @"S", @"T", @"U", @"V", @"W", @"X", @"Z", @"#", nil];
return searchArray;
}
>Set the style in Interface Builder. Sorry about the confusion.
Please let me know if I can be of any more help.
Happy Programming,
iPhone SDK Articles
>UITableViewStyleGrouped -> where can i put this in the rootviewcontroller.m file, to change the view?
>I’ve completed the tutorial of UITableView. It’s very great and absolutely useful!! thanks a lot!!
>@Anonymous Thanks for that information.
everyone: To display the search magnifying-glass-character use @”{search}”
This is NOT supported by Apple.
Happy Programming,
iPhone SDK Articles
>http://stackoverflow.com/questions/235120/whats-the-uitableview-index-magnifying-glass-character
NOTE: this seems to be an undocumented feature, so it may have the same risks as using the private APIs.