Iphone Tutorials Grouped UI Table view

IPhone Tutorials Grouped UI Table view
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"

002

003 @implementation GroupedTableViewController

004 @synthesize tableContents;

005 @synthesize sortedKeys;

006

007 // Implement viewDidLoad to do additional setup after loading the view, typically from a nib.

008 - (void)viewDidLoad {

009 NSArray *arrTemp1 = [[NSArray alloc]

010 initWithObjects:@"Andrew",@"Aubrey",@"Alice",nil];

011 NSArray *arrTemp2 = [[NSArray alloc]

012 initWithObjects:@"Bob",@"Bill",@"Bianca",nil];

013 NSArray *arrTemp3 = [[NSArray alloc]

014 initWithObjects:@"Candice",@"Clint",@"Chris",nil];

015 NSDictionary *temp =[[NSDictionary alloc]

016 initWithObjectsAndKeys:arrTemp1,@"A",arrTemp2,

017 @"B",arrTemp3,@"C",nil];

018 self.tableContents =temp;

019 [temp release];

020 self.sortedKeys =[[self.tableContents allKeys]

021 sortedArrayUsingSelector:@selector(compare:)];

022 [arrTemp1 release];

023 [arrTemp2 release];

024 [arrTemp3 release];

025 [super viewDidLoad];

026 }

027

028 - (void)dealloc {

029 [tableContents release];

030 [sortedKeys release];

031 [super dealloc];

032 }

033

034 #pragma mark Table Methods

035

036 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{

037 return [self.sortedKeys count];

038 }

039

040 - (NSString *)tableView:(UITableView *)tableView

041 titleForHeaderInSection:(NSInteger)section

042 {

043 return [self.sortedKeys objectAtIndex:section];

044 }

045

046 - (NSInteger)tableView:(UITableView *)table

047 numberOfRowsInSection:(NSInteger)section {

048 NSArray *listData =[self.tableContents objectForKey:

049 [self.sortedKeys objectAtIndex:section]];

050 return [listData count];

051 }

052

053 - (UITableViewCell *)tableView:(UITableView *)tableView

054 cellForRowAtIndexPath:(NSIndexPath *)indexPath {

055 static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier";

056

057 NSArray *listData =[self.tableContents objectForKey:

058 [self.sortedKeys objectAtIndex:[indexPath section]]];

059

060 UITableViewCell * cell = [tableView

061 dequeueReusableCellWithIdentifier: SimpleTableIdentifier];

062

063 if(cell == nil) {

064

065 cell = [[[UITableViewCell alloc]

066 initWithStyle:UITableViewCellStyleDefault

067 reuseIdentifier:SimpleTableIdentifier] autorelease];

068

069 /*cell = [[[UITableViewCell alloc]

070 initWithStyle:UITableViewCellStyleSubtitle

071 reuseIdentifier:SimpleTableIdentifier] autorelease];

072 */

073 }

074

075 NSUInteger row = [indexPath row];

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

077

078 return cell;

079 }

080

081 - (void)tableView:(UITableView *)tableView

082 didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

083 NSArray *listData =[self.tableContents objectForKey:

084 [self.sortedKeys objectAtIndex:[indexPath section]]];

085 NSUInteger row = [indexPath row];

086 NSString *rowValue = [listData objectAtIndex:row];

087

088 NSString *message = [[NSString alloc] initWithFormat:rowValue];

089 UIAlertView *alert = [[UIAlertView alloc]

090 initWithTitle:@"You selected"

091 message:message delegate:nil

092 cancelButtonTitle:@"OK"

093 otherButtonTitles:nil];

094 [alert show];

095 [alert release];

096 [message release];

097 [tableView deselectRowAtIndexPath:indexPath animated:YES];

098 }

099

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’.