Scrolling of UITableview change the images of UIButton , UITableview scrolling issue

Question

What i am doing is , I have an UITableview and i added UIButton as a custom view . I am giving tag to each button and tag got received in the action method. When i press the button it change the images for selected and unselected button but when i scroll it , it will come to normal state.

This is my cell for row at index method

static NSString *CellIdentifier = @"Cell4";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
    cell = [self tableviewCellWithReuseIdentifierFollowing:CellIdentifier];
}
followingButton = [UIButton buttonWithType:UIButtonTypeCustom];
[followingButton addTarget:self action:@selector(followingButtonpressed:)forControlEvents:UIControlEventTouchUpInside];
[followingButton setImage:[UIImage imageNamed:@"following12.png"] forState:UIControlStateNormal];
followingButton.frame = CGRectMake(220.0 ,20.0, 100, 40.0);
[cell.contentView addSubview:followingButton];
NSLog(@"row--%d",indexPath.row);
followingButton.tag=indexPath.row;
NSLog(@"followingButton.tag--%d",followingButton.tag);
[self configureCellFollowing:cell forIndexPath:indexPath];
return cell;
}

==================

//Here is the action method

-(void)followingButtonpressed:(id)sender
{
    NSLog(@"sender tag --%d",[sender tag]);
    UIButton *btnPly = (UIButton *)sender;
    if([btnPly isSelected])
    {
        [btnPly setSelected:NO];
        [btnPly setImage:[UIImage imageNamed:@"following12.png"] forState:UIControlStateNormal];
    }
    else
    {
        [btnPly setSelected:YES];
        [btnPly setImage:[UIImage imageNamed:@"following_off12.png"] forState:UIControlStateNormal];
    }
}

Answer 1

Note : This code create cell for each row of data (Not reuse cell)

You need to change only as describe , May be helpful for you

NSString *CellIdentifier = [NSString stringWithFormat:@"S%1dR%1d",indexPath.section,indexPath.row];

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

may be solve your problem :)

Answer 2

The reason your buttons are "resetting" is because tableView:cellForRowAtIndexPath gets called multiple times (whenever a cell is about to be visible).

Each time this gets called you are reinitializing your button and resetting the image to following12.png (the default state). That's why when you scroll the buttons appear to reset.

You can't rely on the cell itself to preserve state because the cell will get reset every time. You need to move your state somewhere else (like in an array instance variable). Then when you have to configure a new cell in tableView:cellForRowAtIndexPath you can initialize it to the proper state (based on the array).

So create an NSMutableArray instance variable called myStateArray (or whatever) to store your button states, then your cellForRowAtIndexPath should look more like:

static NSString *CellIdentifier = @"Cell4";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
    cell = [self tableviewCellWithReuseIdentifierFollowing:CellIdentifier];
}
followingButton = [UIButton buttonWithType:UIButtonTypeCustom];
[followingButton addTarget:self action:@selector(followingButtonpressed:)forControlEvents:UIControlEventTouchUpInside];

// -- Fetch the state from your array
BOOL buttonPressed = [[self.myStateArray objectAtIndex:indexPath.row] boolValue];

// -- Initialize the button state correctly
[followingButton setSelected:buttonPressed];
if (buttonPressed) {
    [followingButton setImage:[UIImage imageNamed:@"following12.png"] forState:UIControlStateNormal];
} else {
    [followingButton setImage:[UIImage imageNamed:@"following_off12.png"] forState:UIControlStateNormal];
}



followingButton.frame = CGRectMake(220.0 ,20.0, 100, 40.0);
[cell.contentView addSubview:followingButton];
NSLog(@"row--%d",indexPath.row);
followingButton.tag=indexPath.row;
NSLog(@"followingButton.tag--%d",followingButton.tag);
[self configureCellFollowing:cell forIndexPath:indexPath];
return cell;
}

Then in your button press make sure to save the state:

-(void)followingButtonpressed:(id)sender
{
    // -- Save the state
    [self.myStateArray insertObject:[NSNumber numberWithBool:[btnPly isSelected]] atIndex:[sender tag]];

    NSLog(@"sender tag --%d",[sender tag]);
    UIButton *btnPly = (UIButton *)sender;
    if([btnPly isSelected])
    {
        [btnPly setSelected:NO];
        [btnPly setImage:[UIImage imageNamed:@"following12.png"] forState:UIControlStateNormal];
    }
    else
    {
        [btnPly setSelected:YES];
        [btnPly setImage:[UIImage imageNamed:@"following_off12.png"] forState:UIControlStateNormal];
    }
}

Answer 3

As I understand from code you create UIButton every time when UITableView asks for cell. In both cases if you create a new cell or you use dequeued one. Then you create and add one more button every time over already created one. Move button creation to cell creation if So your cellForRowAtIndexPath method should looks like

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell4";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
    {
        cell = [self tableviewCellWithReuseIdentifierFollowing:CellIdentifier];
        followingButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [followingButton addTarget:self action:@selector(followingButtonpressed:)forControlEvents:UIControlEventTouchUpInside];
        [followingButton setImage:[UIImage imageNamed:@"following12.png"] forState:UIControlStateNormal];
        followingButton.frame = CGRectMake(220.0 ,20.0, 100, 40.0);
        [cell.contentView addSubview:followingButton];
    }
    NSLog(@"row--%d",indexPath.row);
    followingButton.tag=indexPath.row;
    NSLog(@"followingButton.tag--%d",followingButton.tag);
    [self configureCellFollowing:cell forIndexPath:indexPath];
    return cell;
}

But this will not be competed solution of your problem. As you probably know UITableView uses "reusable" cells to decrease system memory usage. It uses only amount of cells as it necessary to show at the moment. So in table with 100 cells it will create actually about 10. And all of them wont store correct state of all amount pressed/unpressed buttons. To achieve correct behaviour you have to refuse using tags and use some model logic instead. Easiest way - NSMutableArray where you will store buttons states. In followingButtonpressed: method you will set proper object to YES/NO and in cellForRowAtIndexPath you will read this value. Check code below

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell4";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil)
    {
        cell = [self tableviewCellWithReuseIdentifierFollowing:CellIdentifier];
        followingButton = [UIButton buttonWithType:UIButtonTypeCustom];
        [followingButton addTarget:self action:@selector(followingButtonpressed:)forControlEvents:UIControlEventTouchUpInside];
        [followingButton setImage:[UIImage imageNamed:@"following12.png"] forState:UIControlStateNormal];
        followingButton.frame = CGRectMake(220.0 ,20.0, 100, 40.0);
        [cell.contentView addSubview:followingButton];

        BOOL isSelected = [[statesArray objectAtIndex:btnPly.tag] boolValue];
        [self setState:isSelected forButton:followingButton];
    }
    NSLog(@"row--%d",indexPath.row);
    followingButton.tag=indexPath.row;
    NSLog(@"followingButton.tag--%d",followingButton.tag);
    [self configureCellFollowing:cell forIndexPath:indexPath];
    return cell;
}

-(void)followingButtonpressed:(id)sender
{
    NSLog(@"sender tag --%d",[sender tag]);
    UIButton *btnPly = (UIButton *)sender;

    BOOL isSelected = [[statesArray objectAtIndex:btnPly.tag] boolValue];
    [statesArray replaceObjectAtIndex:btnPly.tag withObject:[NSNumber numberWithBool:!isSelected]];

    if(isSelected)
    {
        [self setState:NO forButton:btnPly];
    }
    else
    {
        [self setState:YES forButton:btnPly];
    }
}

- (void) setState:(BOOL)state forButton:(UIButton *)button
{
    if(state)
    {
        [button setSelected:NO];
        [button setImage:[UIImage imageNamed:@"following12.png"] forState:UIControlStateNormal];
    }
    else
    {
        [button setSelected:YES];
        [button setImage:[UIImage imageNamed:@"following_off12.png"] forState:UIControlStateNormal];
    }
}

Where statesArray is

NSMutableArray *statesArray = [NSMutableArray new];

and you have to create and initialize it somewhere in you class. Count of objects in statesArray has to be the same as count of cells int tableView.

Answer 4

This is because every time when you are scrolling then this code calling

[followingButton setImage:[UIImage imageNamed:@"following12.png"] forState:UIControlStateNormal];

so check now

static NSString *CellIdentifier = @"Cell4";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
    cell = [self tableviewCellWithReuseIdentifierFollowing:CellIdentifier];

followingButton = [UIButton buttonWithType:UIButtonTypeCustom];
[followingButton addTarget:self action:@selector(followingButtonpressed:)forControlEvents:UIControlEventTouchUpInside];

[followingButton setImage:[UIImage imageNamed:@"following12.png"] forState:UIControlStateNormal];

followingButton.frame = CGRectMake(220.0 ,20.0, 100, 40.0);
[cell.contentView addSubview:followingButton];

[self configureCellFollowing:cell forIndexPath:indexPath];
}
return cell;
}