Question

I want to create a UITableViewCell with an image between the content and the accessory view, sonly if certain condition is met.

So I have to create a custom content view with two UILabel and UIImageView as described in “Table View Programming Guide for iOS”.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UILabel *mainLabel;
    UILabel *secondLabel;
    UIImageView *icon;

    YOEvento *aux = [[self.eventosListsContainer objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];


    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

        // 1. Check if it is a favourtite to display the icon

        if (aux.isFavourite) {
            // Evento is favourite
            // 1. Create the main label view
            mainLabel = [[[UILabel alloc] initWithFrame:CGRectMake(20, 8, 248, 14)] autorelease];
            mainLabel.tag = MAINLABEL_TAG;
            mainLabel.font = [UIFont systemFontOfSize:13.0];
            mainLabel.textColor = [UIColor darkGrayColor];
            mainLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
            [cell.contentView addSubview:mainLabel];

            // Create the date label
            secondLabel = [[[UILabel alloc] initWithFrame:CGRectMake(23, 24, 245, 11)] autorelease];
            secondLabel.tag = SECONDLABEL_TAG;
            secondLabel.font = [UIFont systemFontOfSize:11.0];
            secondLabel.textColor = [UIColor lightGrayColor];
            secondLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
            [cell.contentView addSubview:secondLabel];

            // Create the image
            icon = [[[UIImageView alloc] initWithFrame:CGRectMake(268, 12, 24, 21)] autorelease];
            icon.tag = ICON_TAG;
            icon.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
            [cell.contentView addSubview:icon];

        } else {
            // Evento is not favourite
            // 1. Create the main label view
            mainLabel = [[[UILabel alloc] initWithFrame:CGRectMake(20, 8, 282, 14)] autorelease];
            mainLabel.tag = MAINLABEL_TAG;
            mainLabel.font = [UIFont systemFontOfSize:13.0];
            mainLabel.textColor = [UIColor darkGrayColor];
            mainLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
            [cell.contentView addSubview:mainLabel];

            // Create the date label
            secondLabel = [[[UILabel alloc] initWithFrame:CGRectMake(23, 24, 279, 11)] autorelease];
            secondLabel.tag = SECONDLABEL_TAG;
            secondLabel.font = [UIFont systemFontOfSize:11.0];
            secondLabel.textColor = [UIColor lightGrayColor];
            secondLabel.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleHeight;
            [cell.contentView addSubview:secondLabel];            

        }
    } else {
        // 
        if (aux.isFavourite) {
            mainLabel = (UILabel *)[cell.contentView viewWithTag:MAINLABEL_TAG];
            secondLabel = (UILabel *)[cell.contentView viewWithTag:SECONDLABEL_TAG];
            icon = (UIImageView *)[cell.contentView viewWithTag:ICON_TAG];
        } else {
            mainLabel = (UILabel *)[cell.contentView viewWithTag:MAINLABEL_TAG];
            secondLabel = (UILabel *)[cell.contentView viewWithTag:SECONDLABEL_TAG];            
        }
    }

    // Load cell values

    if (aux.isFavourite) {
        mainLabel.text = aux.nombre;
        secondLabel.text = @"16 de Octubre"; // ?????????????
        icon.image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"29-heart"
                                                                                      ofType:@"png"]];
    } else {
        mainLabel.text = aux.nombre;
        secondLabel.text = @"16 de Octubre"; // ????????????? 
    }    
    return cell;
}

The problem is that the icon image is loaded randomly because it keeps showing when reusing cells.
I have to admit that I don’t fully understand the reusing cells theory.

In my original implementation (using the imageView property) it was easy, I just check is the event was not a favorite to set cell.imageView = nil. But have no idea how to do with custom contentView.

Answer 1

Once you create your cell, you are wanting to re-arrange its contents – this is adding unnecessary complexity. Instead you should create two different cell types – one for a favourite and one for a non-favourite. Try something like this:

static NSString *CellIdentifierFavourite = @"CellFavourite";
static NSString *CellIdentifierNonFavourite = @"CellNonFavourite";

//  Other setup goes here

YOEvento *aux = [[self.eventosListsContainer objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];

if (aux.isFavourite) {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifierFavourite];
    if (cell == nil) {
        //  Create favourite cell here
    }
    // Populate favourite cell here
} else {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifierNonFavourite];
    if (cell == nil) {
        //  Create non-favourite cell here
    }
    // Populate non-favourite cell here
}

//  Rest of method goes below