UITableView scrolling changess image inside UITableViewCell

Question

I am displaying some data using a UITableViewController, my table has 2 static sections with 6 static rows each. And I am subclassing UITableViewCell in order to add 3 Labels and a View, in the view I draw an arrow in only one of the cells in one of the sections.

This all goes perfectly fine. Till i scroll down... then the arrow is randomly placed in other cells, once i scroll back up the arrow has again changed cells... This also happens if i try to set a backgroundColor for only one of the cells. Once I scroll down and up the cell that originally had the color no longer has it, and another seemingly random cell has the color now.

Here is some of my code:

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

static NSString *CellIdentifier = @"Cell";

TableViewCells *cell = (TableViewCells *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
    cell = [[[TableViewCells alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}
[self configureCell:cell atIndexPath:indexPath];


return cell;

}

- (void)configureCell:(TableViewCells *)cell atIndexPath:(NSIndexPath *)indexPath {
switch (indexPath.row) {
    case 0:
    {
        if (indexPath.section == cotizacionIdeal)
        {
            cell.arrowImage = [UIImage imageNamed:@"arrowUp.png"];
            [cell.nombre setText:@"Recursos"];
            [cell.cantidad setText:[NSString stringWithFormat:@"%1.2f", [cotizacionPrevia.sueldoDeRecursos doubleValue]]];
            [cell.porcentaje setText:[NSString stringWithFormat:@"%1.2f%@", [cotizacion.recursosPorcentaje doubleValue], @"%"]];
        }
        else
        {
            [cell.nombre setText:@"Recursos"];
            [cell.cantidad setText:[NSString stringWithFormat:@"%1.2f", [cotizacionPrevia.sueldoDeRecursos doubleValue]]];
            [cell.porcentaje setText:[Calculate calcPorcentaje:cotizacionPrevia.sueldoDeRecursos totalReal:self.totalReal]];
        }
    }
        break;
    case 1:
    {
        if (indexPath.section == cotizacionIdeal)
        {
            [cell.nombre setText:@"Comision de Venta"];
            [cell.cantidad setText:[Calculate calcMonto:cotizacion.comisionPorcentaje total:self.totalIdeal]];
            [cell.porcentaje setText:[NSString stringWithFormat:@"%1.2f%@", [cotizacion.comisionPorcentaje doubleValue], @"%"]];
        }
        else
        {
            [cell.nombre setText:@"Comision de Venta"];
            [cell.cantidad setText:self.montoRealComision];
            [cell.porcentaje setText:[NSString stringWithFormat:@"%1.2f%@", [cotizacion.comisionPorcentaje doubleValue], @"%"]];
        }
    }

UITableViewCell class:

    - (id)initWithFrame:(CGRect)frame cell:(TableViewCells *)cell
{
    if (self = [super initWithFrame:frame]) {
        _cell = cell;

        //self.opaque = YES;
        //self.backgroundColor = _cell.backgroundColor;
    }

    return self;
}

- (void)drawRect:(CGRect)rect
{
    [_cell.arrowImage drawAtPoint:CGPointMake(0, 0)];
}

@end

@implementation TableViewCells

@synthesize nombre;
@synthesize porcentaje;
@synthesize cantidad;
@synthesize arrowImage;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        // Initialization code

        UILabel *nombreLabel = [[UILabel alloc] initWithFrame:CGRectZero];
        self.nombre = nombreLabel;
        [nombreLabel release];
        [self.nombre setFont:[UIFont boldSystemFontOfSize:14]];
        [self.contentView addSubview:self.nombre];

        UILabel *porcentajeLabel = [[UILabel alloc] initWithFrame:CGRectZero];
        self.porcentaje = porcentajeLabel;
        [porcentajeLabel release];
        [self.porcentaje setFont:[UIFont italicSystemFontOfSize:10]];
        [self.contentView addSubview:self.porcentaje];

        UILabel *cantidadLabel = [[UILabel alloc] initWithFrame:CGRectZero];
        self.cantidad = cantidadLabel;
        [self.cantidad setTextAlignment:UITextAlignmentRight];
        [cantidadLabel release];
        [self.cantidad setFont:[UIFont boldSystemFontOfSize:14]];
        [self.contentView addSubview:self.cantidad];

        cellContentView = [[TableViewCellContentView alloc] initWithFrame:CGRectZero cell:self];
        cellContentView.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:cellContentView];
    }

UPDATE:

I have also tried setting the image to a different one for everyone but one and I am still having the same issue.

- (void)configureCell:(TableViewCells *)cell atIndexPath:(NSIndexPath *)indexPath {
cell.arrowImage = [UIImage imageNamed:@"arrowDown.png"];
switch (indexPath.row) {
    case 0:
    {
        if (indexPath.section == cotizacionIdeal)
        {
            cell.arrowImage = [UIImage imageNamed:@"arrowUp.png"];
            [cell.nombre setText:@"Recursos"];
            [cell.cantidad setText:[NSString stringWithFormat:@"%1.2f", [cotizacionPrevia.sueldoDeRecursos doubleValue]]];
            [cell.porcentaje setText:[NSString stringWithFormat:@"%1.2f%@", [cotizacion.recursosPorcentaje doubleValue], @"%"]];
        }
        else
        {

Answer 1

The problem is that whenever you use drawRect for a cell you MUST call setneedsdisplay. That is what fixed my problem.

Answer 2

I am not 100% on this but I think it is to do with the release of the image. When you use imageNamed, the instance is retained so it is suggested to use imageWithFilePath instead.

Hope this helps....

Answer 3

The issue is that the UITableView reuses cells so that it doesn't need to make more instances than are displayed and you're not explicitly removing the arrow in your configureCell method.

If the arrow shouldn't be displayed on a cell, explicitly clear it out in the configureCell method and that should fix it.