IOS7 style blur UICollectionViewCell's view on tap - objective-c

Question

I am trying to blur the UICollectionViewCell on tap. What I have tried is get a screenshot of the cell tapped and blur the screenshot. Use the blurred screenshot as the background and hide all labels.
The behavior I have been noticing is
Tap Cell 1 : Cell 1 disappears
Tap Cell 2 : Sort of blurred but I can make out that the wrong cell's content has been blurred
Tap Cell 3 : Blurred a bit more
Tap Cell 4 : A lot of blur
The issue I think is :
The wrong cell content is getting blurred,
Blured screenshot is being reused when another cell is blurred hence the increase in blur.
Then I edited the code to set the background to the original unblurred screenshot
Tap Cell 1 : Cell 1 disappears
Tap Cell 2 : Cell 1's Screenshot appears
Tap Cell 3 : Cell 2's screenshot appears
and so on
Here is the code:
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
//Code to get data from database and add to labels
if(![[modelArray objectAtIndex:indexPath.row] isEqualToString:#"1"]){
UIGraphicsBeginImageContextWithOptions(cell.overviewView.bounds.size, NO, cell.overviewView.window.screen.scale);
[cell.overviewView drawViewHierarchyInRect:cell.overviewView.frame afterScreenUpdates:NO];
UIImage *snapshotImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
snapshotImage = [snapshotImage applyLightEffect];
cell.overviewView.backgroundColor = [UIColor colorWithPatternImage:snapshotImage];
cell.overviewView.alpha = 1;
cell.descLabel.alpha = 0;
cell.dayLabel.alpha = 0;
cell.weatherImage.alpha = 0;
cell.tempLabel.alpha = 0;
}
NSLog(#"Cell :%d condition : %#", indexPath.row, weather.desc );
return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
WeekCell *cell = (WeekCell*)[collectionView cellForItemAtIndexPath:indexPath];
NSLog(#"%#", cell.descLabel.text);
if([[modelArray objectAtIndex:indexPath.row] isEqualToString:#"1"]){
[modelArray setObject:#"0" atIndexedSubscript:indexPath.row];
}else{
[modelArray setObject:#"1" atIndexedSubscript:indexPath.row];
}
NSLog(#"sequence : %#", modelArray);
[collectionView reloadItemsAtIndexPaths:#[indexPath]];
}

Answer 1

I am just posting the sample code that u can try,
in the custom UICollectionViewCell i named it as CustomCollectionVIewCell and its nib file something look like below
in the above image u can see that View-backgroundVIew which contains image view to hold blurred image and View-ForeGround is a view which holds normal image and 2 labels one with green and black texts, these 2 labels are added t collection view cell not t any other views.
cell Hierarchy is like below image
in the code connect all these as outlets in the cell,
CustomCollectionVIewCell.h
#interface CustomCollectionVIewCell : UICollectionViewCell
#property (nonatomic, assign) id<CellFooterDelegate> myCustomdelegate;//define a delegate
#property (weak, nonatomic) IBOutlet UIView *backGroundView;
#property (weak, nonatomic) IBOutlet UIImageView *blurImageVIew;
#property (weak, nonatomic) IBOutlet UIView *forGroundView;
#property (weak, nonatomic) IBOutlet UIImageView *cellImageView;
//..other objects
#end
in CustomCollectionVIewCell.m put this
//just frame adjustment
- (void)awakeFromNib
{
self.backGroundView.frame = self.contentView.bounds;
self.blurImageVIew.frame = self.backGroundView.bounds;
self.forGroundView.frame = self.contentView.bounds;
self.cellImageView.frame = self.forGroundView.bounds;
}
and in the controller
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CustomCollectionVIewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
cell.myCustomdelegate = self;
cell.cellImageView.image = [dataSourceArray objectAtIndex:indexPath.row];
return cell;
}
after selecting the cell u can put a blurred image like below
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
CustomCollectionVIewCell *cell = (CustomCollectionVIewCell *)[collectionView cellForItemAtIndexPath:indexPath];
UIGraphicsBeginImageContext(cell.cellImageView.bounds.size);
[cell.forGroundView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// self.blurrImage = [image applyTintEffectWithColor:[UIColor colorWithRed:25.0f/255.0f green:77.0f/255.0f blue:108.0f/255.0f alpha:1.0f ]];
cell.forGroundView.alpha = 0.0f;
cell.blurImageVIew.image = [image applyLightEffect];
}
after deselection just change the alpha of the foreground view
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath
{
CustomCollectionVIewCell *cell = (CustomCollectionVIewCell *)[collectionView cellForItemAtIndexPath:indexPath];
cell.blurImageVIew.image = nil;
cell.forGroundView.alpha = 1.0f;
}
out will be like below
hope this helps u .. :)