smartphone.vuongtm: Grouped Table

Grouped table view is an extension of the normal table view in iPhone. It displayes the data in several sectioned lists. Each section has a header and number of rows associated with it. Examples of grouped table are the ‘contacts’ list, a dictionary,etc. In this tutorial, we will create a grouped table using a dictionary, to create a names list,unlike the plain table in which we had used an array. So lets get started!

Step 1: Create a view based application and name it ‘GroupedTable’.

Step 2: Put the following code in ‘GroupedTableViewController.h’

01#import 
02 
03@interface GroupedTableViewController : UIViewController {
04  NSDictionary *tableContents;
05  NSArray *sortedKeys;
06}
07 
08@property (nonatomic,retain) NSDictionary *tableContents;
09@property (nonatomic,retain) NSArray *sortedKeys;
10@end

Here, we have declared a dictionary to hold the section headers and their respective row contents. And an array to hold the sorted keys of the dictionary.

Step 3: Now, open ‘GroupedTableViewController.m’ file and put the following code in it.

001#import "GroupedTableViewController.h"

003@implementation GroupedTableViewController
004@synthesize tableContents;
005@synthesize sortedKeys;

007// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
008- (void)viewDidLoad {
NSArray *arrTemp1 = [[NSArray alloc]
                      initWithObjects:@"Andrew",@"Aubrey",@"Alice",nil];
NSArray *arrTemp2 = [[NSArray alloc]
                      initWithObjects:@"Bob",@"Bill",@"Bianca",nil];
NSArray *arrTemp3 = [[NSArray alloc]
                      initWithObjects:@"Candice",@"Clint",@"Chris",nil];
NSDictionary *temp =[[NSDictionary alloc]
             initWithObjectsAndKeys:arrTemp1,@"A",arrTemp2,
                                                     @"B",arrTemp3,@"C",nil];
self.tableContents =temp;
[temp release];
self.sortedKeys =[[self.tableContents allKeys]
                            sortedArrayUsingSelector:@selector(compare:)];
[arrTemp1 release];
[arrTemp2 release];
[arrTemp3 release];
     [super viewDidLoad];
026}

028- (void)dealloc {
[tableContents release];
[sortedKeys release];
      [super dealloc];
032}

034#pragma mark Table Methods

036- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
  return [self.sortedKeys count];
038}

040- (NSString *)tableView:(UITableView *)tableView
titleForHeaderInSection:(NSInteger)section
042{
return [self.sortedKeys objectAtIndex:section];
044}

046- (NSInteger)tableView:(UITableView *)table
047numberOfRowsInSection:(NSInteger)section {
NSArray *listData =[self.tableContents objectForKey:
                               [self.sortedKeys objectAtIndex:section]];
return [listData count];
051}

053- (UITableViewCell *)tableView:(UITableView *)tableView
   cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier";

NSArray *listData =[self.tableContents objectForKey:
                   [self.sortedKeys objectAtIndex:[indexPath section]]];

UITableViewCell * cell = [tableView
          dequeueReusableCellWithIdentifier: SimpleTableIdentifier];

if(cell == nil) {

   cell = [[[UITableViewCell alloc]
   initWithStyle:UITableViewCellStyleDefault
   reuseIdentifier:SimpleTableIdentifier] autorelease];

  /*cell = [[[UITableViewCell alloc]
       initWithStyle:UITableViewCellStyleSubtitle
       reuseIdentifier:SimpleTableIdentifier] autorelease];
  */
}

NSUInteger row = [indexPath row];
cell.textLabel.text = [listData objectAtIndex:row];

return cell;
079}

081- (void)tableView:(UITableView *)tableView
082didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
NSArray *listData =[self.tableContents objectForKey:
                  [self.sortedKeys objectAtIndex:[indexPath section]]];
NSUInteger row = [indexPath row];
NSString *rowValue = [listData objectAtIndex:row];

NSString *message = [[NSString alloc] initWithFormat:rowValue];
UIAlertView *alert = [[UIAlertView alloc]
            initWithTitle:@"You selected"
            message:message delegate:nil
            cancelButtonTitle:@"OK"
            otherButtonTitles:nil];
[alert show];
[alert release];
[message release];
[tableView deselectRowAtIndexPath:indexPath animated:YES];
098}

100@end

viewdidLoad: Here, we populate the dictionary using three arrays of names as objects and alphabets as keys. Then we sort the array ‘allKeys’ of the dictionary and put it in sortedKeys.

Table Methods

numberOfSectionsInTableView : Returns the count of keys in the dictionary.

titleForHeaderInSection : Returns the value of key for that particular section.

cellForRowAtIndexPath : Here, listdata is an array which is assigned the value for the key corresponding to the respective section. For every section, the contents of listdata are displayed.

didSelectRowAtIndexPath : In this method, we display an alert view when a row is selected.

Step 4 : Open the ‘GroupedTableViewController.xib’. Drag and drop a table view on it. Select the table view and open its Attributes Inspector (command+1). Change the table style from ‘Plain’ to ‘Grouped’.