iPhone Tutorial for Beginner | Programmer | Developer

I am going to write series of UITableView tutorials (Video Tutorials as well). My target is to make the customized UITableView using UITableViewCell which is requested on “Request Tutorial” page. Following are the list of tutorials, which I will be posting on this blog:

1. Create a Simple UITableView [Populate UITableView With Array]
2. Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath]
3. Grouped UITableView [Using Interface builder]
4. Tips for UITableView Design [Change UITableView properties i.e background colour, accessory type, add footer and header]
5. Add, Delete & Re-order UITableView rows
6. Creating UITableView using UITableViewCell
7. Adding Pictures into your UITableView using Interface builder
8. UITableView & UITableViewCell examples and tips

[Note: If you want more tutorials on UITableView or UITableViewCell, then add a comment on "Request Tutorial" Page]

So, this tutorial is about Grouping in UITableView. UITableView have lot of features and options, so you can easily make any kind of User Interface you want for your application. Out put of this tutorial will look like this

Follow these steps to create a grouped table:

1. Open the SimpleTable project in Xcode ( you can grab this code from here). Open SimpleTableViewController.xib file and select UITableView. Press cmd + 1 and change its style to ‘Grouped’. Save this file and close it.

2. Open Xcode and select ‘SimpleTableViewController.h’ file and rename the arryData to arryAppleProducts. Also add ‘arryAdobeSoftwares’ NSArray. So this class will look like this

@interface SimpleTableViewController : UIViewController {
IBOutlet UITableView *tblSimpleTable;
NSArray *arryAppleProducts;
NSArray *arryAdobeSoftwares;
}

3. Now open SimpleTableViewController.m file and click cmd + f. In Find type arryData and in Replace type arryAppleProducts and then press ‘Replace All’ button. You can run this code to see how group table will look like.

4. Now add another NSArray(arryAdobeSoftware) in viewDidLoad method. So this method will look like this:

- (void)viewDidLoad {
arryAppleProducts = [[NSArray alloc] initWithObjects:@"iPhone",@"iPod",@"MacBook",@"MacBook Pro",nil];
arryAdobeSoftwares = [[NSArray alloc] initWithObjects:@"Flex",@"AIR",@"Flash",@"Photoshop",nil];
self.title = @"Simple Table Exmaple";
[super viewDidLoad];
}

6. Now in numberOfSectionsInTableView method, change the return value from 1 to 2.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 2;
}

7. Now change in cellForRowAtIndexPath method, so that it will behave differently for both sections. Code will be like this:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
}

// Set up the cell...
if(indexPath.section == 0)
cell.text = [arryAppleProducts objectAtIndex:indexPath.row];
else
cell.text = [arryAdobeSoftwares objectAtIndex:indexPath.row];
return cell;
}

8. Run the application and it will look like this

9. Now I am going to add header for each section, so that group table have some heading text. For that you have to add a method name ‘titleForHeaderInSection’ in your code. I added this method after method ‘numberOfSectionsInTableView’. So code for titleForHeaderInSection will be:

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
if(section == 0)
return @"Apple Products";
else
return @"Adobe Softwares";
}

Final output will look like this:

There should be little change in numberOfRowsInSection method. Because both section can have different number of rows. So we have to add a check on the bases of section. The code will be like this:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
if(section == 0)
return [arryAppleProducts count];
else
return [arryAdobeSoftwares count];
}

You will see a logical error, if you select any row from both section. It will be displaying only the apple products on navigation view. So for that you have to add a condition in didSelectRowAtIndexPath method:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
NextViewController *nextController = [[NextViewController alloc] initWithNibName:@"NextView" bundle:nil];
[self.navigationController pushViewController:nextController animated:YES];
if(indexPath.section == 0)
[nextController changeProductText:[arryAppleProducts objectAtIndex:indexPath.row]];
else
[nextController changeProductText:[arryAdobeSoftwares objectAtIndex:indexPath.row]];
}

Thats it for grouped table. You can grab this code from here.

You can watch the screen cast here.

Popularity: 44% [?]

Related posts:

1. iPhone Programming Tutorial – {Part 1} UITableView using NSArray Creating iPhone Tutorial Introduction: I am going to write series...
2. iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView] This tutorial will help you to create custom rows in...
3. iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder Creating iPhone Application: Introduction: I am going to write series...
4. iPhone Programming Tutorial: Complete List of UITableView Tutorials + Videos Complete List of UITableView tutorials plus few video tutorials as...
5. iPhone SDK Tutorial – {Part 5}: Add, Delete & Reorder UITableView Rows This tutorial will explain, how you can change the UITableView...