Search code examples
uitableviewios5duplicatessubviews

How to avoid duplicate rows when constructing a UITableViewCell from UILabel subviews


I'm loading an array of dictionary elements containing US state data into a UITableView and I'm experiencing duplicate rows when the user scrolls down to offscreen items - row 1 is duplicated at row 8, row 2 is duplicated at row 9, etc.

I've reviewed the following SO questions and implemented some of their suggestions (without success):

2994472 - My UITableView has duplicate rows

7056578 - UITableView repeating cells when scrolled

The UITableViewCell is a custom construction, created from UILabels. Here's the code in cellForRowAtIndexPath.

00    const int ABBREVIATION = 1, STATE = 2 // Declared outside cellForRowAtIndexPath


01    static NSString *CellIdentifier = @"Cell";
02    
03    UILabel *abbreviation, *state;
04    
05    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
06    if (cell == nil) {
07        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault         
08              reuseIdentifier:CellIdentifier];
09        
10        abbreviation = [[UILabel alloc] initWithFrame:CGRectMake(7.0, 1.0, 34.0, 30.0 )];
11        abbreviation.tag = ABBREVIATION; 
12        abbreviation.font = [UIFont fontWithName:@"Helvetica-Bold" size:20.0];
13        abbreviation.textAlignment = UITextAlignmentLeft;
14        abbreviation.textColor = [UIColor blackColor];
15
16        state = [[UILabel alloc] initWithFrame:CGRectMake(42.0, 1.0, 158.0, 30.0)];
17        state.tag = STATE;
18        state.font = [UIFont fontWithName:@"Helvetica-Bold" size:20.0];
19        state.textAlignment = UITextAlignmentLeft;
20        state.textColor = [UIColor blackColor];
21
22        [cell.contentView addSubview:abbreviation];
23        [cell.contentView addSubview:state];
24    
25        [cell setAccessoryType:UITableViewCellAccessoryDetailDisclosureButton];
26        [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
27    }
28    
29    abbreviation.text = [[self.primaries objectAtIndex:indexPath.row] objectForKey:@"abbreviation"];
30    state.text = [[self.stateInfo objectAtIndex:indexPath.row] objectForKey:@"name"];
31    
32    return cell;

Follow the advice in 2994472, I modifying lines 27 and 28 to use a ternary operator.

29   abbreviation.text = [[self.primaries objectAtIndex:indexPath.row] objectForKey:@"abbreviation"] ?
                         [[self.primaries objectAtIndex:indexPath.row] objectForKey:@"abbreviation"] :
                         @"";

30   state.text = [[self.stateInfo objectAtIndex:indexPath.row] objectForKey:@"name"] ?
                  [[self.stateInfo objectAtIndex:indexPath.row] objectForKey:@"name"] : 
                  @"";

That didn't work, the duplication still occurs starting on row 8.

What appears to solve the problem is referencing the UILabel tag when setting the label text to drill down to the actual subview.

29  ((UILabel *)[cell viewWithTag:ABBREVIATION]).text = [[self.primaries objectAtIndex:indexPath.row] objectForKey:@"abbreviation"];
30  ((UILabel *)[cell viewWithTag:STATE]).text = [[self.primaries objectAtIndex:indexPath.row] objectForKey:@"name"];

When the cell subviews are referenced this way the UITableView row duplication disappears.


Solution

  • Though I was able to post a solution in my original question, I still was wondering why the duplicate cell situation was happening in the first place.

    Did some additional research, writing out the text values for the state and abbreviation values alongside the values displayed in the cells.

    (A) NSLog(@"%@", state.text);
    (B) NSLog(@"%@", ((UILabel *)[cell viewWithTag:STATE]).text);
    

    The results displayed are interesting and throw some light on the situation.

     (A)               (B)
     Iowa              Iowa
     New Hampshire     New Hampshire
     South Carolina    South Carolina
     Florida           Florida
     Nevada            Nevada
     Colorado          Colorado
     Minnesota         Minnesota
     (null)            Iowa
     (null)            New Hampshire
     (null)            SouthCarolina
     (null)            Florida
    

    The (null) values appear when scrolling up to display additional states.

    So what I think is happening is when the scrolling down happens, the original code in lines 29 and 30 attempts to set the text values of the two instance variables.

    29    abbreviation.text = [[self.primaries objectAtIndex:indexPath.row] objectForKey:@"abbreviation"];
    30    state.text = [[self.stateInfo objectAtIndex:indexPath.row] objectForKey:@"name"];
    

    But since they've been automatically dereferenced by ARC, they don't exist anymore, cannot be set, and return a value of null. However the cells which contain the original values are "dequeued" and reused with the old data, causing duplicates to appear.

    Let me know if I'm totally off base with this hypothesis.