UITableViewCell and images overlapping

Question

i have a strange issue with my UITableView...I add a UIButton as a subview to each cell , but when any of the cells gets out of view something happens, and when i scroll up again , i can see that the UIButton background images of some cells are overlapping !

The cellForRowAtIndexPath method i use contains the following code , which adds the UIButton instances

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

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MyCell"];

    if (cell == nil)
    {

        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle
                                      reuseIdentifier:@"MyCell"];

        [cell setAccessoryType:UITableViewCellAccessoryDisclosureIndicator];

        UIFont *titleFont = [UIFont fontWithName:@"Arial-BoldMT" size:14.0];
        [[cell textLabel] setFont:titleFont];

        [cell autorelease];


    }

    if([cell viewWithTag:indexPath.row]==nil){ 
    UIButton *buttonLeft = [UIButton buttonWithType:UIButtonTypeCustom];
    buttonLeft.tag=indexPath.row;
    if ([[myArray objectAtIndex:indexPath.row] isEqualToString:@"item1"]) {

        [buttonLeft addTarget:self action:@selector(doThat:) forControlEvents:UIControlEventTouchUpInside];
        [buttonLeft setBackgroundImage:[UIImage imageNamed:@"item1.png"] forState:UIControlStateNormal];    
        [buttonLeft setFrame: CGRectMake( 5.0f, 6.2f, 30.0f, 30.0f)];


    }else{

        [buttonLeft addTarget:self action:@selector(doThat:) forControlEvents:UIControlEventTouchUpInside];
        [buttonLeft setBackgroundImage:[UIImage imageNamed:@"item2.png"] forState:UIControlStateNormal];    
        [buttonLeft setFrame: CGRectMake( 5.0f, 6.2f, 30.0f, 30.0f)];

    }
[cell addSubview:buttonLeft];
    }


    cell.textLabel.text=[NSString stringWithFormat:@"         %@",[myArray objectAtIndex:indexPath.row]];
    return cell;
}

Apparently , this code for some reason adds the UIButton everytime the cell is displayed. I want each button subview to be added only once.. What am i doing wrong ?

Your help is much appreciated

Also see this question: http://stackoverflow.com/questions/1802707/detecting-which-uibutton-was-pressed-in-a-uitableview — Vladimir, Sep 16 '10 at 15:22

score 4 · Answer 1 · answered Sep 16 '10 at 14:39

4

That is because the table view reuses cells for performance reasons. Therefore, the cellForRowAtIndexPath: method, correctly implemented like yours, returns cells that already exist and only creates a new one if there is no reusable cell available.

Put all your button-related code within if (cell == nil) {}, so that the button is only added to "fresh" cells and it should work!

answered Sep 16 '10 at 14:39

Toastor

8,980
4
50
82

well , this fixes the overlapping issue , but somehow the image displayed in each button changes once the cell gets out of view :S – Kostas.N Sep 16 '10 at 15:36
Hmmm.. I think I didn't pay attention to the tags and images you're setting. You need to do all the setup (creating button instances) within `if (cell == nil) {}`, but everything that needs to be updated on a "regular basis" - that is, each time a cell is being reloaded - outside, where your code was before... – Toastor Sep 16 '10 at 16:25

UITableViewCell and images overlapping

1 Answers1