More than one custom cell with different sizes

Question

I've been doing a lot of research, but cannot find an answer or a guide to help. I would like to have more than one custom cell in a Table View. For example, the first cell may display an image, while the 2nd cell displays some information, and then the third displaying something else (All cells different sizes). I've tried a lot of code but can't get it right, I've also been watching tutorials but am still unable to do this. Would it be easier to do this in a blank UIView with no cells? Thanks, help and advice is greatly appreciated.

Answer 1

Let's say you have one table view with one section. Here's how I usually do this:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    id cell = nil;
    switch (indexPath.row) {
        case 0:
            cell = [self dequeCellIdentifier:@"FirstTypeOfCell"];
            break;

        case 1:
            cell = [self dequeCellIdentifier:@"SecondTypeOfCell"];
            break;

        case 2:
            cell = [self dequeCellIdentifier:@"ThirdTypeOfCell"];
            break;

        default:
            cell = [self dequeCellIdentifier:@"JustThrowThisInThere"];
            break;
    }
    return cell; 
}

To dequeue the cell, make sure you specify its identifier in XIB interface and add this method to dequeue:

- (id)dequeCellIdentifier:(NSString *)cellIdentifier {
    id cell = [self.tableView dequeueReusableCellWithIdentifier:cellIdentifier];
    if (!cell) {
        cell = [[NSBundle mainBundle] loadNibNamed:cellIdentifier owner:self options:nil][0];
    }
    return cell; 
}

To get different heights for cells, use the - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath method:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
        switch (indexPath.row) {
        case 0:
            return 40.0;

        case 1:
            return 100.0;

        default:
            return 50.0;
    }
}

Answer 2

Create a custom class for each cell that inherits from UITableViewCell. Make sure to also crete a XIB when you create the class. This give you the flexibility to design your cell in the interface builder.

Check out this answer: How do you load custom UITableViewCells from Xib files?

PS. Don't forget to change the height of the cells in

- (CGFloat)tableView:(UITableView *)tableView 
                                heightForRowAtIndexPath:(NSIndexPath *)indexPath

Answer 3

You can use prototype cells in storyboard. basically what you do is create one prototype cell for each type and create a UITableViewCell subclass for each of them. also give each a unique ID. all these steps are explained in detail here (follow upto Modifying the CarTableViewCell Class section).

Now is the tricky part. The above tutorial only explains how to create one custom cell. if you want multiple types of custom cells, create all those cells with unique reuse identifier and subclasses. now i'm not sure if this is the right approach but here's what I usually do :

in CellForRowAtIndexPath:

if([cellType isEqualToString:@"DefaultCell"])
{
    MyTableDefaultCell *cell = [self.tableViewOutlet dequeueReusableCellWithIdentifier:@"DefaultCell" forIndexPath:indexPath];

    if(cell == nil)
    {
        cell = [[MyTableDefaultCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"DefaultCell"];
    }

    //Do your thing here.

    return cell;
}


else if([cellType isEqualToString:@"SegmentedControlCell"])
{

    MyTableSegmentControlCell *cell = [self.tableViewOutlet dequeueReusableCellWithIdentifier:@"SegmentedControlCell" forIndexPath:indexPath];

    if(cell == nil)
    {
        cell = [[MyTableSegmentControlCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"SegmentedControlCell"];
    }

     // Setup cell here.

    return cell;
}

and dont forget to return the appropriate heights for each cell in heightForRowAtIndexPath:. cheers.