reuse issue in UITableView

Question

I have UITableView which covers whole screen (480px).

Each cell is of height 300px.

I have total 5 rows.

Below is the code what I have used.

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

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

    UIButton *myButton = (UIButton *)[cell viewWithTag:999999999];
    int i = indexPath.row+1;
    myButton.tag = i;
    myButton.titleLabel.text = [NSString stringWithFormat:@"B - %d", i];
    [myButton setTitle:[NSString stringWithFormat:@"B - %d", i] forState:UIControlStateNormal];
    NSLog(@"tag set is %d & text for button is =====B-%d====", i,i);
    [myButton addTarget:self action:@selector(btnSelected:) forControlEvents:UIControlEventTouchUpInside];

    return cell;
}

- (int) tableView:(UITableView *) tableView numberOfRowsInSection:(NSInteger)section {
    return 5;
}


-(IBAction)btnSelected:(id)sender {
    UIButton *button = (UIButton *)sender;
    NSLog(@"my tag after click is ===%d", [button tag]);
}

Now when I run this code, I was expecting each cell will have B - 1 to B - 5 written. However after B - 3, all I see is B - 1 and B- 2.

NSLog says as below.

2013-07-28 23:31:34.281 NewTest[1783:11303] tag set is 1 & text for button is =====B-1====
2013-07-28 23:31:34.284 NewTest[1783:11303] tag set is 2 & text for button is =====B-2====

Now when I scroll fully down, I get NSLog as below.

2013-07-28 23:31:34.281 NewTest[1783:11303] tag set is 1 & text for button is =====B-1====
2013-07-28 23:31:34.284 NewTest[1783:11303] tag set is 2 & text for button is =====B-2====
2013-07-28 23:32:03.643 NewTest[1783:11303] tag set is 3 & text for button is =====B-3====
2013-07-28 23:32:03.719 NewTest[1783:11303] tag set is 4 & text for button is =====B-4====
2013-07-28 23:32:03.835 NewTest[1783:11303] tag set is 5 & text for button is =====B-5====

Now when tag and text are set properly why I see last two buttons as B-1 and B-2 instead of B-4 and B-5.

Any idea how to solve this problem?

Screenshot 1

Screenshot 2

Screenshot 3

---

Any idea how to solve this problem so that I have B-1 to B-5 written?

---

Note : If I decrease the height of the cell to 100, I see all button text as B-1 to B-5.

This question is related to my old question, but this is simpler version.

Sample Project

---

What I did is, not used tag and using accessibilityValue, I am fetching the button clicked id.

Answer 1

As you scroll down, the table view will reuse the cells that are no longer visible as it needs to display additional cells. The first time this happens is for cell "B-3". Because the table view is reusing a cell, the tag for the button in the cell was already previously set by your code to some number (probably 1). Thus, viewWithTag:999999999 will return nil. Your NSLog statements will make it look like things are working correctly, but actually you're trying to set a title on a nil button, thus the button in the reused cell does not get updated with the correct title.

For a solution: you could create a custom subclass of UITableViewCell with a property:

@property (nonatomic, weak) IBOutlet UIButton *button;

And in the storyboard or xib wire this up to your button. Or if necessary you could programmatically do this in the cell's awakeFromNib or init method. Now you can directly reference cell.button instead of using [cell viewWithTag:9999999].