ios - uitableview: nested section headers

Question

Im trying to implement a uitableview with the following structure:

• section group 0
  • section 0
    • cell 0
    • cell 1
    • cell 2
  • section 1
    • cell 0
    • cell 1
    • cell 2
• section group 1
  • section 0
    • cell 0
    • cell 1
    • cell 2
  • section 1
    • cell 0
    • cell 1
    • cell 2

and it should scoll like this screenshot (1-2-3-4): http://dl.dropbox.com/u/2213241/uitableview.png

So always two sections are visible.

How do i implement this? Or has anyone implemented this already?

Thanks :)

Answer 1

The trick to have nested sections is to have two kinds of rows in the table view. One to represent the second level of sections and another to represent the normal rows in the tableview. Let's say you have a two level array (say sections) to represent the items in your table view.

Then, the total number of sections that we have are just the number of top level sections. The number of rows in each top level section would be the number of subsections + the number of rows in each subsection.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
????return self.sections.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
????NSArray *sectionItems = self.sections[(NSUInteger) section];
????NSUInteger numberOfRows = sectionItems.count; // For second level section headers
????for (NSArray *rowItems??in sectionItems) {
????????numberOfRows += rowItems.count; // For actual table rows
????}
????return numberOfRows;
}

Now, all we need to think about is how to create the rows for the table view. Set up two prototypes in the storyboard with different reuse identifiers, one for the section header and another for row item and just instantiate the correct one based on the asked index in the data source method.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
????NSMutableArray *sectionItems = self.sections[(NSUInteger) indexPath.section];
????NSMutableArray *sectionHeaders = self.sectionHeaders[(NSUInteger) indexPath.section];
????NSIndexPath *itemAndSubsectionIndex = [self computeItemAndSubsectionIndexForIndexPath:indexPath];
????NSUInteger subsectionIndex = (NSUInteger) itemAndSubsectionIndex.section;
????NSInteger itemIndex = itemAndSubsectionIndex.row;

????if (itemIndex < 0) {
????????// Section header
????????UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"SECTION_HEADER_CELL" forIndexPath:indexPath];
????????cell.textLabel.text = sectionHeaders[subsectionIndex];
????????return cell;
????} else {
????????// Row Item
????????UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ROW_CONTENT_CELL" forIndexPath:indexPath];
????????cell.textLabel.text = sectionItems[subsectionIndex][itemIndex];
????????return cell;
????}
}

- (NSIndexPath *)computeItemAndSubsectionIndexForIndexPath:(NSIndexPath *)indexPath {
????NSMutableArray *sectionItems = self.sections[(NSUInteger) indexPath.section];
????NSInteger itemIndex = indexPath.row;
????NSUInteger subsectionIndex = 0;
????for (NSUInteger i = 0; i < sectionItems.count; ++i) {
????????// First row for each section item is header
????????--itemIndex;
????????// Check if the item index is within this subsection's items
????????NSArray *subsectionItems = sectionItems[i];
????????if (itemIndex < (NSInteger) subsectionItems.count) {
????????????subsectionIndex = i;
????????????break;
????????} else {
????????????itemIndex -= subsectionItems.count;
????????}
????}
????return [NSIndexPath indexPathForRow:itemIndex inSection:subsectionIndex];
}

Here's a detailed post on how to do this.