UITableViewCell background image issue when the table scrolls up and comes back on that cell

Question

I'm facing UITableViewCell setup issue when user scrolls down and up the table. The cell looses the changes (red/green background image set in -didSelectRowAtIndexPath) once the grouped-table scrolls to another cell and comes back to that cell.

I'm showing a question and 4 answer choices in two sections using the below code..

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString *kCustomCellID = [NSString stringWithFormat:@"CustomCellID%d", ((100 * indexPath.section) + indexPath.row)];

    UITableViewCell *cell = nil;//[tableView dequeueReusableCellWithIdentifier:kCustomCellID];

    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:kCustomCellID] autorelease];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
    }

    if (indexPath.section == 0) {
        cell.textLabel.text = questionText;
        cell.textLabel.textAlignment = UITextAlignmentCenter;
        cell.textLabel.font = FONT_QUESTIONTEXT;
        cell.textLabel.numberOfLines = 0;
    }
    else {
        cell.textLabel.text = [self.answerChoices objectAtIndex:indexPath.row];
        cell.textLabel.font = FONT_ANSWERTEXT;
        cell.textLabel.numberOfLines = 0;

        ConfigurationBase *configBase = [[ConfigurationBase alloc] initWithConfigurationType:kConfigTypeQuiz];

        NSString *backgroundImageName = [configBase.configInfo valueForKey:CKEY_IMG_ANSWER_BACKGROUND];
        NSString *leftImage = [configBase.configInfo valueForKey:[choicesLeftImages objectAtIndex:indexPath.row]];
        [configBase release];

        cell.backgroundColor = [UIColor clearColor];
        UIImageView *bgView = [[UIImageView alloc] initWithFrame:cell.frame];
        bgView.image = [UIImage imageNamed:backgroundImageName];
        cell.backgroundView = bgView;
        [bgView release];

        cell.imageView.image = [UIImage imageNamed:leftImage];
    }

    return cell;
}

And, when the user selects one of the choice, I change the background color right and wrong selection with green and red color. The code for changing the background for 2 rows is below..

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.section == 1) {   // Answer choice section.
        NSString *correctAnswerStr = [quizSession fetchCorrectAnswer];
        NSInteger correctAnswerIndex = -1;
        ConfigurationBase *configBase = [[ConfigurationBase alloc] initWithConfigurationType:kConfigTypeQuiz];

        NSString *correctAnsImageName = [configBase.configInfo valueForKey:CKEY_IMG_ANSWER_CORRECT_BACKGROUND];
        NSString *wrongAnsImageName = [configBase.configInfo valueForKey:CKEY_IMG_ANSWER_WRONG_BACKGROUND];
        [configBase release];

        UITableViewCell *answerCell = [tableView cellForRowAtIndexPath:indexPath];

        answerCell.backgroundColor = [UIColor clearColor];
        UIImageView *bgView = [[UIImageView alloc] initWithFrame:answerCell.frame];
        bgView.image = [UIImage imageNamed:wrongAnsImageName];
        answerCell.backgroundView = bgView;
        [bgView release];

        for (NSString *answerChoice in answerChoices) {
            ++correctAnswerIndex;

            if ([answerChoice isEqualToString:correctAnswerStr]) {
                // Correct Index obtained, so set the background color for it.
                NSIndexPath *correctIndexPath = [NSIndexPath indexPathForRow:correctAnswerIndex
                                                                   inSection:indexPath.section];
                UITableViewCell *correctAnswerCell = [tableView cellForRowAtIndexPath:correctIndexPath];

                correctAnswerCell.backgroundColor = [UIColor clearColor];
                UIImageView *bgView = [[UIImageView alloc] initWithFrame:correctAnswerCell.frame];
                bgView.image = [UIImage imageNamed:correctAnsImageName];
                correctAnswerCell.backgroundView = bgView;
                [bgView release];

                break;
            }
        }

        // Enable the 'next' button, allowing user to go for next question.
        self.navigationItem.rightBarButtonItem.enabled = YES;
        // Disable selection of answer until user go to next question.
    tableView.allowsSelection = NO;
}

Can anyone help me on this? TIA.

Regards.

Answer 1

Your method of retrieving the information about the background image name is very complicated and error prone. Please make sure everything works as expected by inserting NSLogs at the appropriate places or checking in the debugger.

When dealing with the cell's backgroundView property you will have to put this code into tableView:willDisplayCell:forRowAtIndexPath: rather than in cellForRowAtIndexPath. A simpler approach will save you time here again.