Question

如何放大UICollectionViewCell以便全屏显示？我已经扩展了UICollectionViewFlowLayout并在我的视图控制器中点击了一个单元格，我正在这样做：

CGPoint pointInCollectionView = [gesture locationInView:self.collectionView];
NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:pointInCollectionView];
UICollectionViewCell *selectedCell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath];

NSLog(@"Selected cell %@", selectedIndexPath);

不确定从哪里开始。 UICollectionView是否应该负责显示放大的单元格？或者我应该创建一个新的视图控制器，以全屏显示单元格（图像）的内容？

Answer 1

我采用了解决方案here并对其进行了轻微修改，以便使用集合视图。我还添加了一个透明的灰色背景来隐藏原始视图（假设图像不占用整个帧）。

@implementation CollectionViewController
{
    UIImageView *fullScreenImageView;
    UIImageView *originalImageView;
}

...

// in whatever method you're using to detect the cell selection

CGPoint pointInCollectionView = [gesture locationInView:self.collectionView];
NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:pointInCollectionView];
UICollectionViewCell *selectedCell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath];

originalImageView = [selectedCell imageView]; // or whatever cell element holds your image that you want to zoom

fullScreenImageView = [[UIImageView alloc] init];
[fullScreenImageView setContentMode:UIViewContentModeScaleAspectFit];

fullScreenImageView.image = [originalImageView image];
// ***********************************************************************************
// You can either use this to zoom in from the center of your cell
CGRect tempPoint = CGRectMake(originalImageView.center.x, originalImageView.center.y, 0, 0);
// OR, if you want to zoom from the tapped point...
CGRect tempPoint = CGRectMake(pointInCollectionView.x, pointInCollectionView.y, 0, 0);
// ***********************************************************************************
CGRect startingPoint = [self.view convertRect:tempPoint fromView:[self.collectionView cellForItemAtIndexPath:selectedIndexPath]];
[fullScreenImageView setFrame:startingPoint];
[fullScreenImageView setBackgroundColor:[[UIColor lightGrayColor] colorWithAlphaComponent:0.9f]];

[self.view addSubview:fullScreenImageView];

[UIView animateWithDuration:0.4
                 animations:^{
                     [fullScreenImageView setFrame:CGRectMake(0,
                                                   0,
                                                   self.view.bounds.size.width,
                                                   self.view.bounds.size.height)];
                 }];

UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(fullScreenImageViewTapped:)];
singleTap.numberOfTapsRequired = 1;
singleTap.numberOfTouchesRequired = 1;
[fullScreenImageView addGestureRecognizer:singleTap];
[fullScreenImageView setUserInteractionEnabled:YES];

...

- (void)fullScreenImageViewTapped:(UIGestureRecognizer *)gestureRecognizer {

    CGRect point=[self.view convertRect:originalImageView.bounds fromView:originalImageView];

    gestureRecognizer.view.backgroundColor=[UIColor clearColor];
    [UIView animateWithDuration:0.5
                     animations:^{
                         [(UIImageView *)gestureRecognizer.view setFrame:point];
                     }];
    [self performSelector:@selector(animationDone:) withObject:[gestureRecognizer view] afterDelay:0.4];

}

-(void)animationDone:(UIView  *)view
{
    [fullScreenImageView removeFromSuperview];
    fullScreenImageView = nil;
}

Answer 2

您可以简单地使用其他布局（类似于您已有的布局），其中项目大小更大，然后在collectionView上执行setCollectionViewLayout:animated:completion:。

您不需要新的视图控制器。您的数据源保持不变。您甚至可以使用相同的单元格类，只需确保它知道何时为更大的单元格内容大小布置内容，何时不知道。

我非常确定Facebook是如何在Paper中完成的，因为没有重新加载内容，即[collectionView reloadData]似乎永远不会被调用（会导致闪烁和重置滚动偏移等）。这似乎是最直接的解决方案。

CGPoint pointInCollectionView = [gesture locationInView:self.collectionView];
NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:pointInCollectionView];
UICollectionViewCell *selectedCell = [self.collectionView cellForItemAtIndexPath:selectedIndexPath];

NSLog(@"Selected cell %@", selectedIndexPath);

__weak typeof(self) weakSelf = self;

[self.collectionView setCollectionViewLayout:newLayout animated:YES completion:^{

    [weakSelf.collectionView scrollToItemAtIndexPath:selectedIndexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:NO];

}];

Answer 3

您可以使用适合您的问题的 MWPhotoBrowser 。它支持具有Tap to Zoom功能的Grid。你可以从here

获得它

网格

为了正确显示缩略图网格，您必须确保将属性enableGrid设置为YES，并实现以下委托方法：

(id <MWPhoto>)photoBrowser:(MWPhotoBrowser *)photoBrowser thumbPhotoAtIndex:(NSUInteger)index;

通过启用startOnGrid属性，照片浏览器也可以在网格上启动。

UICollectionView全屏放大UICollectionViewCell

3 个答案: