[iOS开发课程-5]Create Indexed UITableView

[iOS开发教程-5]Create Indexed UITableView

http://www.iphonedevcentral.com/indexed-uitableview-tutorial/

?

Tackling that handy index on the right side of table views is really not that complicated. In fact, it only requires that you implement two methods. In this tutorial, I’m going to take you step-by-step on how to wire it all together.

?

Prerequisites

If you were able to follow my previous@interface DataGenerator : NSObject {} + (NSArray *) wordsFromLetters; @end

Now, let’s implement this method. Open@implementation DataGenerator #define WORD_LENGTH 5 static NSString *letters = @"abcdefghijklmnopqrstuvwxyz"; + (NSArray *) wordsFromLetters { NSMutableArray *content = [NSMutableArray new]; for (int i = 0; i < [letters length]; i++ ) { NSMutableDictionary *row = [[[NSMutableDictionary alloc] init] autorelease]; char currentWord[WORD_LENGTH + 1]; NSMutableArray *words = [[[NSMutableArray alloc] init] autorelease]; for (int j = 0; j < WORD_LENGTH; j++ ) { if (j == 0) { currentWord[j] = toupper([letters characterAtIndex:i]); } else { currentWord[j] = [letters characterAtIndex:i]; } currentWord[j+1] = '\0'; [words addObject:[NSString stringWithCString:currentWord encoding:NSASCIIStringEncoding]]; } char currentLetter[2] = { toupper([letters characterAtIndex:i]), '\0'}; [row setValue:[NSString stringWithCString:currentLetter encoding:NSASCIIStringEncoding] forKey:@"headerTitle"]; [row setValue:words forKey:@"rowValues"]; [content addObject:row]; } return content;} @end

?

I’m not going to spend a whole of time explaining what’s going on here because this tutorial is really about adding an index bar to your UITableView. But let’s briefly talk what’s it all about. This method loops through an array letters one-by-one. For each letter it then generates a bunch of words to fill up our content. The final structure of the NSArray we’re returning is going to look something like this:

NSArray =>

NSDictionaryheaderTitle#import "DataGenerator.h" @interface RootViewController : UITableViewController { NSArray *content; NSArray *indices;}

content- (void)viewDidLoad { [super viewDidLoad]; content = [DataGenerator wordsFromLetters]; indices = [[content valueForKey:@"headerTitle"] retain];}

You can see that we're using// Customize the number of sections in the table view.- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return [content count];} // Customize the number of rows in the table view.- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [[[content objectAtIndex:section] objectForKey:@"rowValues"] count] ;}

The number of sections is equal to the number of letters in our list and the number of rows of each section is equal to the count of each array under its corresponding letter.

Finally, we implement?cellForRowAtIndexPath// Customize the appearance of table view cells.- (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] autorelease]; } cell.textLabel.text = [[[content objectAtIndex:indexPath.section] objectForKey:@"rowValues"] objectAtIndex:indexPath.row]; return cell;}?

You should be able to run your app now (CMD + R) and see something like this:



4. Add index to the table

There is nothing new in what we've done so far. We simply filled in a UITableView with some data. We're now ready to add our index to it. For that, we'll need to implement two methods:- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView { return [content valueForKey:@"headerTitle"];} - (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index { return [indices indexOfObject:title];}?

sectionIndexTitlesForTableView:- (NSString *)tableView:(UITableView *)aTableView titleForHeaderInSection:(NSInteger)section {return [[content objectAtIndex:section] objectForKey:@"headerTitle"]; }

5. Run your app

If everything went well, you should now be able to run your app and see the final product. You'll see the index on the right and scrolling over it will scroll the table appropriately.



Conclusion

Voilà! That wasn't that hard was it? The main get-away from this tutorial are the two methods you need to implement in order for the index to show up and function properly:?sectionIndexTitlesForTableView: and?sectionForSectionIndexTitle:. In the next tutorial, we'll cover how to add a search bar to this table.

The complete source code for this tutorial can be found here:?Indexed UITableView

?

?