How do I expand image to full view when being tapped in a UICollectionView?

Question

In my project I'm using a UICollectionView for displaying images and I'm also using UIImageView in UICollectionViewCell . All I want is when I tap on a image it should expand and show on fullscreen. For this I've created a new view takes a UIImageView on it and apply TapGesture on UICollectionViewCells . The expanded image open in the next view but isn't presented in the frame I give it. and also when i click on any pic it removed from the collection view. please tell me how to reload UICollectionViewCells Please suggest me how to put image on the prescribed frames. I'm sharing my code

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    imgview = (UIImageView *)[cell viewWithTag:100];
    imgview = [[UIImageView alloc]initWithFrame:CGRectMake(0,0,160, 160)];

    imgview.image = [UIImage imageNamed:[imagearray objectAtIndex:indexPath.row]];
    //cell.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:[imagearray objectAtIndex:indexPath.row]]];
    [cell.contentView addSubview:imgview];

    UITapGestureRecognizer *tapped = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(expandImage:)];
    tapped.numberOfTapsRequired = 1;
    [imgview setUserInteractionEnabled:YES];
    imgview.tag = indexPath.row;
    [imgview addGestureRecognizer:tapped];

    [cell.contentView addSubview:imgview];

    return cell;
}

-(void)expandImage:(UITapGestureRecognizer*)recogniser
{
    UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake(0, 50, self.view.frame.size.width , self.view.frame.size.height)];
    view1.backgroundColor = [UIColor greenColor];
    [self.view addSubview:view1];

    UIButton *closeButton = [[UIButton alloc]initWithFrame:CGRectMake(310, 10, 50, 40)];
    [closeButton setTitle:@"Close" forState:UIControlStateNormal];
    [closeButton addTarget:self action:@selector(Closetab) forControlEvents:UIControlEventTouchUpInside];
    [view1 addSubview:closeButton];

    UIImageView *photoView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 70, self.view.frame.size.width, self.view.frame.size.height-200)];
    [photoView setBackgroundColor:[UIColor blueColor]];
    [view1 addSubview:photoView];
    photoView.accessibilityIdentifier = @"nature2.png";

    UIImageView *photoView1 = (UIImageView*)recogniser.view;
    photoView1.accessibilityIdentifier = @"nature2.png";

    //photoView.clipsToBounds = YES;

    // photoView.accessibilityIdentifier = @"apple1.png";

    photoView1.contentMode =  UIViewContentModeScaleAspectFill;

    //photoView1.clipsToBounds = YES;
    [view1 addSubview:photoView1];  
}

Answer 1

A simpler way to achieve this would be to push to a new view that you display the full screen picture, instead of adding it as a subview.

You can also customize the transition animation of the navigation controller to fit your needs.

Answer 2

Ok don't take anything for granted, because one thing im sure of, is that looking at that code made me confused. But here is how i see it, and what went wrong:

    UIImageView *photoView1 = (UIImageView*)recogniser.view;
    [view1 addSubview:photoView1]; 

With those 2 lines you are taking out your view from cell and putting it in this new view1. So just allocating new UIImageVIew and setting its image could solve it. And some more suggestions:

    imgview = (UIImageView *)[cell viewWithTag:100];
    imgview = [[UIImageView alloc]initWithFrame:CGRectMake(0,0,160, 160)];

Here that first line of code isn't doing anything. You set object, and then you set that object again. Next thing is do not add subviews in cellForItemAtIndexPath without removing previously added. When dequeuing cells, you are using the same cells over and over again, so you will creat memory leak by stacking views on top of each other. You could even omit all that adding stuff by creating custom cell with its own UIImageView. Next there is no need to use gesture recognition, CollectionView have this one delegate:

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath

You can replace your expandImage method with it, inside you would just simply get your image from imagearray . And lastly there's this beautiful library ready to use for you, MHFacebookImageViewer .

Answer 3

So it is better to add view in a window.so it is display in full screen.Use Following Code.

UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake(0, 50, self.view.frame.size.width , self.view.frame.size.height)];
    view1.backgroundColor = [UIColor greenColor];
    [self.view.window addSubview:view1];

Answer 4

Add imageview on navigationController.view

UIImageView *imgView =[[UIImageView alloc]initWithFrame:self.view.bounds];
[self.navigationController.view addSubview:imgView];

Answer 5

i done the above by this code firstly added tap gesture then apply the following code

-(void)expandImage:(UITapGestureRecognizer*)recogniser
{

    view1.hidden = NO;

    UIImageView *photoView1 = (UIImageView*)recogniser.view;
    photoView1.frame = CGRectMake(0, 0, self.view.frame.size.width, 510);
    photoView1.accessibilityIdentifier = @"nature2.png";

    //photoView.clipsToBounds = YES;

    // photoView.accessibilityIdentifier = @"apple1.png";

    photoView1.contentMode =  UIViewContentModeScaleAspectFill;

    photoView1.clipsToBounds = YES;

    [view1 addSubview:photoView1];
    }