iPhone Programming Tutorial: {Part 3} Grouped UITableView

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
Picture 4 iPhone Programming Tutorial: {Part 3} Grouped UITableView

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.
Picture 1 iPhone Programming Tutorial: {Part 3} Grouped UITableView
Picture 2 iPhone Programming Tutorial: {Part 3} Grouped UITableView

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
Picture 3 iPhone Programming Tutorial: {Part 3} Grouped UITableView

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:
Picture 4 iPhone Programming Tutorial: {Part 3} Grouped UITableView

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: 38% [?]

My name is Adeem M Basraa. I am a software engineer from Lahore, PK. I’ve been involved in software development for nearly 4 years, with the last 1 year focused on application development for mobile devices (iPhone & Android).

12 Comments on "iPhone Programming Tutorial: {Part 3} Grouped UITableView"

  1. mohmohja says:

    i want a tutorial how to make tab bar and in one tab bar item
    open a moving screen

  2. James says:

    Thank you ever so much.

  3. Enigmatic says:

    Thanks for a good tutorial.I am new to iPhone Development,helped me a lot.
    Keep up the Good Work!

  4. Rahul Vyas says:

    iPhone tutorial request

    Hello Adeem,

    You have written very helpful tutorials. I would like to request you a tutorial on UITableView which functionality is something like native add contact screen in contacts app. But I want it something like this way – first section contains two cell with textfield and label (like first name,last name) and the three sections will have a header view with a + button on the right corner. when you tap on + button a new cell will be inserted into the corresponding section. The cell contains a button(work as in add new contact screen when you want to change the type of phone/email),a textfield and a delete button. tapping delete button on corresponding cell will delete the cell. I have already tried to creating a demo code but fails to complete it 100%. Please create a tutorial for uitableview for inserting custom cells with textfields along with delete cells and finally get all the textfields data and their type into dictionary/array. Thanks

  5. gary Benna says:

    I have a UITableView that I populated using a plist which includes a header, an image, title. detail, and controller so that when a specific cell is selected it calls on the included viewcontroller to load the corresponding NIB. Since most of the NIBs will have the same format just different information populating the various parts is it possible to only load one view controller and NIB and have a plist that contains the information needed. The NIB Will have a UIImageView, a UITextView, a button to play an audio file, and a button to flip the view over to reveal a map with an annotated pin at a specific location. So can I have the same view controller load the same NIB but display a different image, text, play a different audio, and flip to a different map coordinates from a plist depending on the cell chosen. I hope I am being clear enough. Could you point me in the right direction as to where I need to research/look to do this if posssible.

    Thanks,

    Gary

Trackbacks for this post

  1. iPhone SDK Tutorial or Video Tutorial - {Part 4} Tips for UITableView Design [Add Header, Footer, background images & change design] | iPhone Diary | Tips
  2. Complete List of UITableView UITableViewCell Tutorials + Video Tutorials | iPhone Diary | Tips
  3. iPhone SDK Tutorial + Video Tutorial - {Part 1} UITableView using NSArray | iPhone Diary | Tutorial
  4. iPhone SDK Tutorial - {Part 6}: Creating custom UITableViewCell Using Interface Builder [UITableView] | iPhone Diary | Tutorial
  5. iPhone Tutorial – {Part 7}: Adding Pictures into your table’s using Interface builder | iPhone SDK Tutorial for Beginners | Tips
  6. iPhone SDK Tutorial + Video Tutorial - {Part 2} Navigation in UITableView | iPhone SDK Tutorial for Beginners | Tutorial
  7. iPhone SDK Tutorial or Video Tutorial – {Part 5}: Add, Delete & Reorder UITableView Rows | iPhone SDK Tutorial for Beginners | Cydia

Got something to say? Go for it!