UICollectionview 单元格/图像视图在点击时不会全屏显示

Question

我正在尝试让我的 collectionview 单元格/uiimageview 在点击图像时全屏显示。我正在使用动画并从 didSelectItemAtIndexPath 执行此操作，一切正常并且看起来很棒，除了 imageview 根本没有改变大小，而且显然没有像我想要的那样全屏显示。我可以看到动画正在工作，但是这一切都发生在单元格预先存在的大小内，因此，图像被裁剪了。我希望它在点击时全屏显示，类似于它在 FB 中点击照片时的工作方式。感谢任何帮助！这是我的代码...

@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;
}
}

Answer 1

您的视图单元格嵌入在视图层次结构中，并且大多数视图会剪切它们的子视图。要获得“全屏”效果，您需要 (a) 设置图像视图的父视图（单元格、collectionView、可能嵌入的任何内容等）而不是剪辑子视图（参见： “剪辑到边界”）或 (b) 将您的图像放在 未 嵌入这些容器中的视图中。

我不推荐 (a)。尝试设置容器以允许大于容器的子视图（您的 UIImageView）是一种反模式，它打破了容器管理和包含其子项的显示的想法。

对于（b），你想做的是：

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...

因此，您基本上将“点击单元格”操作视为“创建新的 UIImageView 以显示图像，并将其动画化为全屏”的命令。

由于新图像视图是 VC 根视图的直接子视图，因此它可以全屏调整大小而不会被父视图剪裁。