Using multiple cell style types and custom cells in a UITableView

Question

I'm having problems figuring out how to display different cell styles as well as custom cells together within a UITableView. I understand how to set up and put cells together and the construction of a basic UITableView, but just not how to "mix and match" cell within one.

The best example I can show you on what I am trying to achieve is with the Tweetie 2 application.

The top of the segment there is a block paragraph, then below it there UITableViewCell's with the UITableViewCellStyleValue2 style set. How exactly would I go about achieving this effect?

Thanks ahead of time

Answer 1

The main layout is a grouped table. Each cluster of cells is a table section. The top most cell is set with a transparent background.

The key to making this work is to have a logical structure in the tableview delegate that understands which cell layout goes in which section and which row. A switch statement is usually easiest although you can also use arrays or dictionaries configure to reflect the layout.

So, in tableView:cellForRowAtIndexPath: you would have something like:

switch (indexPath.section) {
    case 0:
        cell= //configure cell with transparent background
        break;
    case 1:
        if (indexPath.row==0) {
            cell = // configure cell for multiline
        }else {
            cell = // configure for UITableViewCellStyleValue2
        }
        break;
    case 2:
        // .. and so on for each section and cell
        break;
    default:
        break;
}

In this layout, the tableview is being used less as a logical table (which displays repeating units of list structured data) and more as convenient mechanism for managing a layout. The logic managing the tableview has to be more complex and reflect the needs of the layout.

Answer 2

The most direct approach would be to change your implementation of -tableView:cellForRowAtIndexPath: to use indexPath.section and indexPath.row to determine which type of cell to draw. For example:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  if (indexPath.section == 0) {
    if (indexPath.row == 0) {
      // return long text style cell

    } else {
      // return left/right label style cell
    }

  } else {
     // return the 4-way button style cell
  }
}

Depending on how many cells you are rendering and how many cell styles you've got, you may need to re-use cells in which case you should use a different cell identifier for each style of cell.

Answer 3

This is an elegant way to do:

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

    /*
       Call a function to create all custom cells.
       Send the tableview and the indexPath to this function.
       So, your code will be clean and easy to read an maintenance =D
       DON'T forget to change the height of each cell
    */
    if (indexPath.row < 3)
        return [self createACustomCell1:tableView indexPath:indexPath];
    else
        return [self createACustomCell2:tableView indexPath:indexPath];

}


//*************
//  Create CUSTOM CELL 2
//*************
-(UITableViewCell *)createACustomCell1:(UITableView *)anTableView indexPath:(NSIndexPath *)indexPath{
    static NSString *CUSTOMCELL_1  = @"CUSTOMCELL_1";

    CustomCell_1 *cell = [anTableView dequeueReusableCellWithIdentifier:CUSTOMCELL_1];
    if (!cell){
    [anTableView registerNib:[UINib nibWithNibName:CUSTOMCELL_1
                                          bundle:nil] forCellReuseIdentifier:CUSTOMCELL_1];
        cell = [anTableView dequeueReusableCellWithIdentifier:CUSTOMCELL_1];
    }

    // Cell customization above 
    return cell;
}


//*************
//  Create CUSTOM CELL 2
//*************
-(UITableViewCell *)createACustomCell2:(UITableView *)anTableView indexPath:(NSIndexPath *)indexPath{
    static NSString *CUSTOMCELL_2  = @"CUSTOMCELL_2";

    CustomCell_2 *cell = [anTableView dequeueReusableCellWithIdentifier:CUSTOMCELL_2];
    if (!cell){
    [anTableView registerNib:[UINib nibWithNibName:CUSTOMCELL_2
                                          bundle:nil] forCellReuseIdentifier:CUSTOMCELL_2];
        cell = [anTableView dequeueReusableCellWithIdentifier:CUSTOMCELL_2];
    }

    // Cell customization above


    return cell;
}