How To Add Index List on Table View In iOS App....
Hello friends, I hope you all are enjoying your iOS programming learning here. In my previous post, I have provided tutorial for how to reorder table view cell by drag and drop on iOS by putting the table view in editing mode. In case you don’t know how to reorder table view cell by drag and drop, I will suggest you to read my previous post here.
Today in this tutorial, I will show you, how to add index list on tableview. This is a very useful feature which you may need to implement in most of your iOS app.
At the end of this tutorial, your app will look something like the following image.
First create a Xcode project. Select "Single view application" and tap the next button (Please follow the screen shots).
Give a name to your project .....
Tap next button and then tap the create button in next page to create your new Xcode project. Now go to Storyboard in your project and find UITableView object. Drag drop a UITableView object on your ViewController scene and let it cover the entire UIViewController Scene.
Now create an reference outlet for your UITableView object in your ViewController.h file and name it as mTableView. (Please follow the screen shots).
Now select your ViewController.h file and Append “<UITableViewDelegate, UITableViewDataSource>” after “UIViewController”. Declare two NSArray. One is for showing the section title and another is for populating the tableView.
@interface ViewController : UIViewController<UITableViewDelegate,UITableViewDataSource>
{
NSArray *sectionDataArray;
NSArray *tableDataArray;
}
@property (weak, nonatomic) IBOutlet UITableView *mTableView;
@end
Now your ViewController.h file should look something like the following image.
select your ViewController.m file and under -(void)viewDidLoad method, write the following code to populate our tableDataArray and sectionDataArray and set the delegate and datasource of our UITableView object.
- - (void)viewDidLoad {
- [super viewDidLoad];
- tableDataArray = [[NSArray alloc]initWithObjects:
- @"Ant",
- @"African lion",
- @"Bear",
- @"Black Swan",
- @"Buffalo",
- @"Camel",
- @"Cockatoo",
- @"Dog",
- @"Donkey",
- @"Emu",
- @"Giraffe",
- @"Greater Rhea",
- @"Hippopotamus",
- @"Horse",
- @"Koala",
- @"Lion",
- @"Llama",
- @"Manatus",
- @"Meerkat",
- @"Panda",
- @"Peacock",
- @"Pig",
- @"Platypus",
- @"Polar Bear",
- @"Rhinoceros",
- @"Seagull",
- @"Tasmania Devil",
- @"Whale",
- @"Whale Shark",
- @"Wombat",
- nil];
- sectionDataArray=[[NSArray alloc] initWithObjects:@"A",@"B",@"C",@"D",@"E",@"F",@"G",@"H",@"K",@"L",@"M",@"P",@"R",@"S",@"T",@"W", nil];
- self.mTableView.delegate=(id)self;
- self.mTableView.dataSource=(id)self;
- }
Now its time to implement our UITableView Delegate and DataSource methods to populate data in tableView. We will use NSPredicate to find out which animal name comes under which alphabet. If you want to learn more about NSPredicate, you can read my this post.
- - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
- {
- return [sectionDataArray count];
- }
- - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
- {
- return [sectionDataArray objectAtIndex:section];
- }
- - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
- {
- NSPredicate *predicate =[NSPredicate predicateWithFormat:@"SELF beginswith[c] %@", [sectionDataArray objectAtIndex:section]];
- NSArray *tempArray = [tableDataArray filteredArrayUsingPredicate:predicate];
- return [tempArray count];
- }
- - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
- {
- static NSString *cellIdentifier = @"cell";
- UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
- if (cell == nil) {
- cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
- }
- NSPredicate *predicate =[NSPredicate predicateWithFormat:@"SELF beginswith[c] %@", [sectionDataArray objectAtIndex:indexPath.section]];
- NSArray *tempArray = [tableDataArray filteredArrayUsingPredicate:predicate];
- cell.textLabel.text = [tempArray objectAtIndex:indexPath.row];
- return cell;
- }
Now run the project and see the data listing of your tableView. But you will not see any index list functionality on table view.
Now Its time implement the index list part of our project. Implement the following method in your project.
- - (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
- {
- return sectionDataArray;
- }