How to maintain a selected state, when clicks the UIButton in iPhone?

Question

I have created three buttons and set the background image for the normal state and the selected state. When i click the button, changed one image as the selected state. But when is scroll the table view, the selected image is not retained (previous selected cell) which means it comes for the normal state.

My code is,

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

    likeBtn = [UIButton buttonWithType:UIButtonTypeCustom];

    UIImage *likeSelectedImage = [UIImage imageNamed:@"like.png"];

    //set image as background for button in the normal state

    [likeBtn setBackgroundImage:likeSelectedImage forState:UIControlStateNormal];

    [likeBtn addTarget:self action:@selector(likeAction:) forControlEvents:UIControlEventTouchUpInside];

   [cell.contentView addSubview:likeBtn];
 }

My Button action is,

 -(void) likeAction : (id) sender
 {
     UIImage *likeSelectedImg = [UIImage imageNamed:@"like-selected.png"];

     UIImage *likeImg = [UIImage imageNamed:@"like.png"];

           if ([sender isSelected]) {
               [sender setImage:likeImg forState:UIControlStateNormal];
               [sender setSelected:NO];
               }else {
               [sender setImage:likeSelectedImg forState:UIControlStateSelected];
               [sender setSelected:YES];
          }

 }

SO my problem is, when i scroll the table view cell, the previously selected state of an image is not retained. Because the cellForRowAtIndex method has repeatedly called, when i scrolled the table. so it automatically sets "[likeBtn setBackgroundImage:likeSelectedImage forState:UIControlStateNormal];". How to avoid this problem? So please help me out? Thanks!

Answer 1

You are seeing this due to the design pattern that UITableView's use for displaying data. To minimize resource usage only the table cells that are currently on screen are guaranteed to be kept in memory. As cells are scrolled off-screen the cell objects are intended to be recycled to use for the new cell's appearing at the other end of the list and therefore lose their state.

I'm assuming you've trimmed your code somewhat as you're returning a cell in tableView: cellForRowAtIndexPath: but there's no reference to that variable anywhere else in the snippet you posted. This makes it impossible to see how you're getting the cell before adding the button.

Bit of a stab in the dark as to how your code works but here's a high level overview of what you need to do to retain state.

1. Create some controller-level storage such as an NSArray to hold all your button states for all the table rows.
2. In the likeAction determine which row the button is from (possibly assign the row number to the button's tag property when creating it) and update the state for the corresponding row in your NSArray
3. In tableView: cellForRowAtIndexPath: set up your button with the correct image by using the state which is fetched from the NSArray for the given indexPath.