CODEWITHSUNDEEP
iosuiimageviewuicollectionviewfullscreen
SonnyB
SonnyB

Reputation: 269

UICollectionview cell/imageview not going full screen on tap

I'm trying to have my collectionview cell/uiimageview go full screen when the image is tapped. I'm using animation and doing this from didSelectItemAtIndexPath and everything works and looks great, except that the imageview does not change size at all, and obviously is not going full screen like I want. I can see the animation working, however it all happens within the cell's preexisting size, and therefore, the image gets cropped. I would like it go full screen when tapped, similarly to the way it works in FB when tapping a photo. Appreciate any help! Here's my code...

@interface BaseViewController : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, UITextFieldDelegate> {

CGRect prevFrame;
}

@property (nonatomic) BOOL isFullScreen;
- (void)updateUI;
@end

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

ImageViewCell *selectedCell = (ImageViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
NSLog(@"didSelectItemAtIndexPath");

if (!self.isFullScreen) {
    [UIView animateWithDuration:0.5 delay:0 options:0 animations:^{
        NSLog(@"starting animiation!");
        prevFrame = selectedCell.imageView.frame;
        selectedCell.imageView.center = self.view.center;
        selectedCell.imageView.backgroundColor = [UIColor blackColor];
        //[selectedCell.imageView setFrame:[[UIScreen mainScreen] bounds]];
        [selectedCell.imageView setFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    }completion:^(BOOL finished){
        self.isFullScreen = YES;
    }];
    return;
} else {
    [UIView animateWithDuration:0.5 delay:0 options:0 animations:^{
        [selectedCell.imageView setFrame:prevFrame];
        selectedCell.imageView.backgroundColor = [UIColor colorWithRed:0.62 green:0.651 blue:0.686 alpha:1];
    }completion:^(BOOL finished){
        self.isFullScreen = NO;
    }];
    return;
}
}

Upvotes: 0

Views: 1589

Answers (1)

Bill Patterson
Bill Patterson

Reputation: 2558

Your view cell is embedded in a view hierarchy, and most views clip their sub-views. To get a "full-screen" effect you're going to need to either (a) set parent views of your image view (the cell, the collectionView, anything that might be embedded in, etc) not not clip subviews (see: "clips to bounds") or (b) put your image in a view that is not embedded in those containers.

I don't recommend (a). Trying to set containers to allow child-views (your UIImageView) that are bigger than the container is kind of an anti-pattern that breaks the idea that containers manage and contain the display of their children.

For (b), what you would want to do is:

on Tap:
  imageView = << create a new UIImageView >>
  [self.view addSubview:imageView]
  set imageView.image = collectionCell.imageView.image
  set imageView.frame = << translated rect of the collectionCell.imageView.frame >>
  ... animate blowing your new imageView up to full-screen...

So you're basically treating the "tap on cell" action as a command to "create a new UIImageView to show the image, and animate that to full-screen."

Since the new image view is a direct child of the VC's root view, it can be sized full-screen without getting clipped by a parent view.

Upvotes: 1

Related Questions