Label text getting mixed up

Question

The tableView displayed below contains label. They are added as subView for each cell.

When I run my program for the first time, the cells that appear on the screen have the correct text. But when I scroll the table, the text in the labels begin to get mixed up. From what I understand the label of one cell is overlaid on top of another when the cell is created. This has been shown in the latter two screenshots. After each scroll, the different cells are overlaid on top of the other. (So there is no fixed pattern.) I tried to understand the problem by observing which cell which were going out of the screen and the ones which were entering. I tried to correlate this information with the labels on the cells, but I am not able to understand.

I request you to kindly help me understand the cause for this discrepancy.

Thanks you!

The relevant section of my code is as follows:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
    }

    cell.selectionStyle = UITableViewCellSelectionStyleNone;

    NSLog(@"s = %d, r = %d", indexPath.section, indexPath.row);

    if (indexPath.section == 0)
    {
        switch(indexPath.row)
        {
            case 0:
            [cell addSubview:classA];
            break;

            case 1:
            [cell addSubview:classB];
            break;

        case 2:
            [cell addSubview:classC];
            break;

        case 3:
            [cell addSubview:classD];
            break;

        case 4:
            [cell addSubview:classE];
            break;

        default:
            break;
    }
}

if(indexPath.section == 1)
{
    switch(indexPath.row)
    {
        case 0:
            [cell addSubview:classF];
            break;

        case 1:
            [cell addSubview:classG];
            break;

        case 2:
            [cell addSubview:classH];
            break;

        default:
            break;
    }
}

if(indexPath.section == 2)
{
    switch (indexPath.row)
    {
        case 0:
            [cell addSubview:classI];
            break;

        case 1:
            [cell addSubview:classJ];
            break;

        case 2:
            [cell addSubview:classK];
            break;

        default:
            break;
    }
}

return cell;
}

Answer 1

The reason is, you are using dequeueReusableCellWithIdentifier to reuse the cells. So when you are scrolling, the cells which are going out of visible area are getting reused for the current visible cells.

Since you have already added labels like classB etc.. in these cells and not removed after that, and after that when you are adding labels such as classI etc.. on the same reused cells, it is getting drawn on top of this label. Since these labels have background color set as clear color, it will show the label which was drawn behind it also and hence giving an overlapping feeling.

As per the screenshot, all the cells are looking identical and you can definitely reuse the cells with dequeueReusableCellWithIdentifier. So why dont you change your logic of creating the label outside cellForRowAtIndexPath and instead just use it as cell.TextLabel.text = @"Class B"; etc.. in the corresponding if conditions inside this method?

Your code will look like,

if (indexPath.section == 0)
    {
        switch(indexPath.row)
        {
            case 0:
            cell.textLabel = [self createLabelForRow:indexPath.row section:indexPath.section];
//or if it is jut a simple label, you can just set font and other properties in cell.textLabel directly
            cell.textLabel.text = @"Class A";
            break;

Update: Here is a not-so-good fix for dequeueReusableCellWithIdentifier reuse in case all cells are static. But this is not a recommended approach.

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

  NSString *CellIdentifier = [NSString stringWithFormat:@"CellForRow%dSection%d",indexPath.row, indexPath.section];
  UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
  if (cell == nil)
   { 
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
   }

  //or try this

  UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:nil];
  if (cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
    }

Update2: So if you are facing issues with above try this. Use my first approach and do the following.

if (indexPath.section == 0)
    {
        switch(indexPath.row)
        {
            case 0:
            cell.textLabel = [self createLabelForRow:indexPath.row section:indexPath.section];

            // or do the following,

            [self removeAllTextFieldsFromCell:cell];
            UITextField *aTextField = [self createTextFieldForRow:indexPath.row section:indexPath.section];
            [cell.contentView addSubview:aTextField];
         }

In removeAllTextFieldsFromCell: method use the R.A's suggestion.

For eg:-

- (void)removeAllTextFieldsFromCell:(UITableViewCell *)cell {

    for (UITextField *textField in cell.contentViews.subViews) {
        [textField removeFromSuperView];
    }
}

Or just use,

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if (cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
    }

    cell.selectionStyle = UITableViewCellSelectionStyleNone;

    NSLog(@"s = %d, r = %d", indexPath.section, indexPath.row);

    //if it is all textfields in the cell, it will look like,
    [self removeAllTextFieldsFromCell:cell];
    UITextField *aTextField = [self createTextFieldForRow:indexPath.row section:indexPath.section];
    [cell.contentView addSubview:aTextField];

    return cell;
}

Answer 2

As you said in comment as textfield, then you need to remove the old textField from your cell. You can add this code before your if statement for indexPath.section checking.

for (UITextField *textField in cell.contentViews.subViews) {
    [textField removeFromSuperView];
}

Answer 3

Table view cells are reused: If you scroll up or down, dequeueReusableCellWithIdentifier may return a cell that was previously used for a different (now invisible) row.

In that case the cell already contains one of your subviews and you add an additional subview.