Many different UITableViewCells in one TableView

Question

I have an NSDictionary that we will say is like this:

key:       value:
name       Bookshelf
movies     Array containing: (Movie 1, Movie 2, Movie 3)
books      Array containing: (Book 1, Book 2, Book 3)
music      Array containing: (Music 1, Music 2, Music 3)

And so on. Now what I'm trying to do is create a tableView that displays all this information, but with different types of cells based on what the dictionary key is. For example, movies use cellForMovies books use cellForBooks music use cellForMusic, each has it's own layout.

Obviously, I am oversimplifying, but hopefully you understand what I'm trying to do.

I am able to accomplish this if I do sections and a different cell type for each section, but I don't want to do that. I want to be able to have a table like this, for example:

cellForBooks
cellForMovies
cellForMovies
cellForMusic
cellForBooks

and so on...Any ideas or resources you can point me to? I only care about iOS 5 support (storyboards).

Edit with solution:

A big thank you to everyone who helped, especially atticus who put the final piece together.

What ended up working was to change the structure of the data to be an array of dictionaries and then add a Key: type Value: book/movie/music to each entry. The data structure now looks like:

Array[0]: Dictionary: [Key: type Value: book], [Key: name Value: Physics];
Array[1]: Dictionary: [Key: type Value: music], [Key: name Value: Rock];

Then to configure the cells I did this:

NSString *CellIdentifier = @"Cell";
NSDictionary *object = [self.listOfStuff objectAtIndex:indexPath.row];
if ([[object objectForKey:@"type"] isEqualToString:@"book"]){
    CellIdentifier = @"BookCell";
}else if ([[object objectForKey:@"type"] isEqualToString:@"music"]){
    CellIdentifier = @"MusicCell";
}else if ([[object objectForKey:@"type"] isEqualToString:@"movie"]){
    CellIdentifier = @"MovieCell";
}

each of these had a different tableviewcell in the storyboard. We figured out if you want to use any of the built-in cell features, like cell.textLabel.text you needed to do this:

cell.textLabel.text = [object objectForKey:@"name"];
cell.textLabel.backgroundColor = [UIColor clearColor]; 
cell.textLabel.opaque = NO;

Hope this helps someone else in the future.

Answer 1

In your - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath method you can return many types of cells according to indexPath.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row > 5) { // Your conditions here to choose between Books and Movies
        BookCell *cell = [tableView dequeueReusableCellWithIdentifier:@"bookCell"];
        if (!cell)
        {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault     reuseIdentifier:@"bookCell"];
        }
        return cell;
    } else {
        MovieCell *cell = [tableView dequeueReusableCellWithIdentifier:@"movieCell"];
        if (!cell)
        {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault     reuseIdentifier:@"movieCell"];
        }
        return cell;
    }
return nil;
}

Answer 2

A big thank you to everyone who helped, especially atticus who put the final piece together.

What ended up working was to change the structure of the data to be an array of dictionaries and then add a Key: type Value: book/movie/music to each entry. The data structure now looks like:

Array[0]: Dictionary: [Key: type Value: book], [Key: name Value: Physics];
Array[1]: Dictionary: [Key: type Value: music], [Key: name Value: Rock];

Then to configure the cells I did this:

NSString *CellIdentifier = @"Cell";
NSDictionary *object = [self.listOfStuff objectAtIndex:indexPath.row];
if ([[object objectForKey:@"type"] isEqualToString:@"book"]){
    CellIdentifier = @"BookCell";
}else if ([[object objectForKey:@"type"] isEqualToString:@"music"]){
    CellIdentifier = @"MusicCell";
}else if ([[object objectForKey:@"type"] isEqualToString:@"movie"]){
    CellIdentifier = @"MovieCell";
}

each of these had a different tableviewcell in the storyboard. We figured out if you want to use any of the built-in cell features, like cell.textLabel.text you needed to do this:

cell.textLabel.text = [object objectForKey:@"name"];
cell.textLabel.backgroundColor = [UIColor clearColor]; 
cell.textLabel.opaque = NO;

Hope this helps someone else in the future.

Answer 3

In your storyboard, set your tableView to use Dynamic Prototypes. Then, create a cell for each kind of cell you're going to use. Customize those appropriately, and then give each one a unique Reuse Identifier in the inspector (e.g. MovieCell).

Then, in your tableview:cellForRowAtIndexPath: method, determine the appropriate kind of cell for the content at that index path. If the cell at indexPath should be a movie cell, you would create the cell using:

static NSString * MovieCellIdentifier = @"MovieCell"; // This must match the storyboard
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MovieCellIdentifier];

That will give you the cell you specified as "MovieCell" in your storyboard. If you need to customize it further, create a UITableViewCell subclass and specify that for the cell in Storyboard. Then, you can refer to the properties etc. here for customization by casting the returned cell:

MovieTableViewCell *movieCell = (MovieTableViewCell *)cell;
// customize