将UIButton添加到UICollectionViewCell时的奇怪行为

Question

I'm trying to add a UIButton to a UICollectionViewCell . The main purpose of the button is to let users to select their favourites.

When they click on the UIButton , the UIButton will display a glowing star image, showing that the item has been picked as favourite.

Click on the UIButton again, and the button return to display the original image with an empty star, meaning deselection.

The way I realize this is as below:

1 - In the storyboard, put an UIButton into the UICollectionViewCell , ctrl-drag the button to the cell's .h file to setup an action called

-(IBAction)favoriteBtnClick:(id)sender;

2 - In the cell's .m file, edit the action as follows:

-(IBAction)favoriteBtnClick:(id)sender {
    if ([self.favoriteChecked isEqualToString:@"NO"]) {
        UIImage *image = [UIImage imageNamed:@"FavoriteSelected.PNG"];
        [sender setBackgroundImage:image forState:UIControlStateNormal];
        self.favoriteChecked = @"YES";
    } else if ([self.favoriteChecked isEqualToString:@"YES"]) {
        UIImage *image = [UIImage imageNamed:@"FavoriteBlank.PNG"];
        [sender setBackgroundImage:image forState:UIControlStateNormal];
    }    
}

However, when I try to run the UICollectionView , when I clicked the button on one cell, "strange" behaviors occurred:

1 - Click on one cell to turn one button to favorite glowing star, buttons on some other cells below also turn selected, after your scroll down the list.

2 - The switching only functions for one cycle. After you finish the first round of select and deselect, there is no longer reactions upon further clicking.

Can anybody help me understand the reasons for this and probably give me some hints on how to solve it?

Thank you!

Regards, Paul

Answer 1

Add this code in your button action

CGPoint ButtonPoint = [sender convertPoint:CGPointZero toView:self.collectionView];
    NSIndexPath *ButtonIndex = [self.collectionView indexPathForItemAtPoint:ButtonPoint];
buttonindexpath = ButtonIndex.row
[collectionView reloadData];

Now in your cellForItemAtIndexPath, check if indexPath.row == buttonindexpath, if yes give the code you gave in button action.... ie....

if (indexPath.row == buttonindexpath)
{
    if ([self.favoriteChecked isEqualToString:@"NO"]) 
    {
        UIImage *image = [UIImage imageNamed:@"FavoriteSelected.PNG"];
        [sender setBackgroundImage:image forState:UIControlStateNormal];
        self.favoriteChecked = @"YES";
    }
    else if ([self.favoriteChecked isEqualToString:@"YES"]) 
    {
        UIImage *image = [UIImage imageNamed:@"FavoriteBlank.PNG"];
        [sender setBackgroundImage:image forState:UIControlStateNormal];
    }

}

Hope this works fine

Answer 2

This is happening because of cell reuse. since self.favoriteChecked is a property inside the custom collection cell class, and its value is updated only inside that class causes this issue.

Solution to this problem is, if you are using custom object model to populate collection cells from viewcontroller, then on favourite button click update the favourite status on that custom object and in cellForItemAtIndexPath method check the value of favourite status and update the favoriteChecked status of custom collectionviewcell class.

If you are not using custom object, you need to keep a list of favourite items separately either indexpaths of favourite item or unique identifier of fav item. Then in cellForItemAtIndexPath method check the value of favourite status and update the favoriteChecked status of custom collectionviewcell class.

Answer 3

This is no no a strange behaviour. You have load the cells from the model data objects. You have to track & keep the state change of button clicked data in an array & then load the cell data values.

Here is a sample code : which aligns with solution to your problem.

NSMutableArray *favoriteStatusArray = [[NSMutableArray alloc]init];
// assume favoriteStatusArray is initialized with all BOOL as NO.

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{

    SomeCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    cell.favoriteButton.tag = indexPath.row;
    [cell.favoriteButton addTarget:self action:@selector(peformFavoriteChange:) forControlEvents:UIControlEventTouchUpInside];

    if([[favoriteStatusArray objectAtIndex:indexPath.row] boolValue] == NO)
        UIImage *image = [UIImage imageNamed:@"FavoriteSelected.PNG"];
        [cell.favoriteButton setBackgroundImage:image forState:UIControlStateNormal];
    }else {    
    UIImage *image = [UIImage imageNamed:@"FavoriteBlank.PNG"];
    [cell.favoriteButton setBackgroundImage:image forState:UIControlStateNormal];    
   }
    return cell;
}


-(void)peformFavoriteChange:(UIButton *)sender
{
    BOOL oldValue = [[favoriteStatusArray objectAtIndex:sender.tag] boolValue];
    [favoriteStatusArray replaceObjectAtIndex:sender.tag withObject:[NSNumber numberWithBool:!oldValue]];

    [myCollectionView reloadData]; 
}

Hope you got the idea of doing this.