UICollectionViewCell add animation for selected/highlighted item

Question

I'm implementing simple collection view with images inside cells. The task that I want to achieve is when user taps on the cell - there should be flip animation and some details have to appear at the same cell.

I've tried a lot of things to achieve that, for example I've added two views on the ContentView of the cell. And when user pushes the button I called transitionToView method and everything worked fine, except that when the list contained more than 9-10 images, after scrolling the list some cells started to duplicate "flipped" view with no reason. I turned off dequeueReusableCellWithReuseIdentifier function and everything worked fine, but on older devices like iPhone4, application worked to slowly.

So the best solution i found is this:

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

    UICollectionViewCell *cell1 = [cv dequeueReusableCellWithReuseIdentifier:kCellID3 forIndexPath:indexPath];enter code here

    UIView *contents = [[UIView alloc]initWithFrame:cell1.bounds];
    contents.layer.borderColor = [[UIColor colorWithRed:0.119 green:0.108 blue:0.222 alpha:1]CGColor];
    contents.layer.borderWidth = 10.0f;
    contents.backgroundColor = [UIColor yellowColor];
    [cell1.contentView addSubview:contents];

    UIView *backgroundView = [[UIView alloc]initWithFrame:cell1.bounds];
    backgroundView.layer.borderColor = [[UIColor colorWithRed:0.529 green:0.808 blue:0.922 alpha:1]CGColor];
    backgroundView.layer.borderWidth = 4.0f;
    backgroundView.backgroundColor = [UIColor greenColor];
    cell1.selectedBackgroundView = backgroundView;
    [cell1 bringSubviewToFront:cell1.selectedBackgroundView];

    return cell1;
}

But is it possible to add some animation for the event when cell becomes selected?

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell1 = [collectionView cellForItemAtIndexPath:indexPath];

    UIView *toSwitch = cell1.contentView;
    [UIView transitionFromView:toSwitch toView:cell1.selectedBackgroundView duration:0.33 options:UIViewAnimationOptionCurveLinear |UIViewAnimationOptionTransitionFlipFromLeft completion:nil];

}

also this attempt ruins my cells - when one or more of the cells are flipped some other start to copy it..

So I need an animation (What I achieved), but I need to keep other UICollectionView cells unique and don't reuse this flipped view..

please help! :) really desperate about this!

thanks in advance

Some Solution:

- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
{
    if(cell.selected)
    {
        [cell setSelected:NO];
        [collectionView deselectItemAtIndexPath:indexPath animated:NO];
        UIView *toSwitch = cell.contentView;
        [UIView transitionFromView:cell.selectedBackgroundView toView:toSwitch duration:0.001 options:UIViewAnimationOptionCurveLinear |UIViewAnimationOptionTransitionFlipFromLeft completion:nil];
    }
}

Pretty good for a temporary solution.. anyone has some better advice?

didSelectItemAtIndexPath now works better .. tap on the cell .. then select another.. and previously selected cell flips back to normal.. But still having problems with other cells when scrolling down.. (and when I scroll back and tap on the "flipped" cells - they won't work, they flip something at the "invisible" part of the collectionView) — mz87, May 03 '13 at 00:21

score 2 · Answer 1 · answered May 03 '13 at 07:13

When you scroll, "old cells" are reused - that's what makes your table view perform well. Of course, if the cell in question has a transitioned view, it will show that one instead.

So, like with the data in the cell which you also set anew in each call to the cellForItemAtIndexPath function, you have to set the right view to be visible - remember the state of a cell's view like you do with data, then show the according view when the cell is presented.

UICollectionViewCell add animation for selected/highlighted item

1 Answers1