在 UICollectionView 上添加 UIView 不起作用

Question

您好，我正在尝试在 UICollectionView 之上添加一个 UIView。我的想法是，当您单击单个 CollectionViewCell 时，它将在同一屏幕中显示一个包含信息的 UIView。这样您就不需要转到另一个视图并返回到 UICollectionView。

我试过这段代码：

UICollectionViewController.m

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView *subview = [[UIView alloc] initWithFrame:CGRectMake(0, 70, self.collectionView.frame.size.width, 200)];
    subview.backgroundColor = [UIColor blackColor];
    [collectionView addSubview:subview];
    [collectionView bringSubviewToFront:subview];
    [collectionView setContentInset:UIEdgeInsetsMake(subview.frame.size.height, 0, 0, 0)];

}

但是我滚动的时候好像是这样； UIView 也随着 CollectionViewCells 滚动。

我的想法有什么解决方案。

谢谢

Answer 1

我做了类似的事情来显示集合视图中包含的图像的放大版本。我将视图添加到 self.view 而不是集合视图。它可能比你想要的要多一些，但它可能会给你一些想法。

您可以将您的详细信息放在呈现的视图上，而不是像我那样放在图像上。

因为我要显示图像，所以我在集合视图单元格中复制了图像，在集合视图顶部添加了背景视图（添加到 self.view，而不是集合视图）并添加了模糊快照现有背景。然后，我在该视图顶部的集合视图中添加了图像的副本，在屏幕上与集合视图单元格相同的位置。然后我将图像副本缩放到 300x300 并将图像居中显示在屏幕上。

我还在视图顶部添加了一个全屏按钮，因此当您点击屏幕上的任意位置时，详细视图将消失。

这种效果使单元格看起来好像从它在屏幕上的位置开始增大以显示更大的图像，并在关闭时缩小到它在屏幕上的位置。

我在 collectionView:didSelectItemAtIndexPath 方法委托方法中实现了行为

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"Selected Item at index: %ld", (long)indexPath.row);

    // get the cell's frame in the collection view
    UICollectionViewLayoutAttributes *attributes = [self.photoCollection layoutAttributesForItemAtIndexPath:indexPath];
    CGRect cellRect = attributes.frame;

    // take a snapshot of our background for our blurred background image
    UIImage *blurImage  = [self.view snapshotImage];
    blurImage           = [blurImage applyLightEffect];

    // create our image view for our blur image
    UIImageView *blurImgView = [[UIImageView alloc] initWithImage:blurImage];
    [blurImgView setFrame:self.view.bounds];

    // create our backing view that will contain all the views created here
    UIView *backingView = [[UIView alloc] initWithFrame:self.view.bounds];
    backingView.tag = 417985;

    // add our blur image to our backing view
    [backingView addSubview:blurImgView];
    [self.view addSubview:backingView];

    // convert the cells frame to self.view coordinates and setup our centerpoint from the selected frame
    self.selectedFrame = [self.photoCollection convertRect:cellRect toView:self.view];
    self.selectedCenter = CGPointMake( self.selectedFrame.origin.x + (self.selectedFrame.size.width * 0.5),
                                       self.selectedFrame.origin.y + (self.selectedFrame.size.height * 0.5));

    // create a copy of the image in our collection view to scale up
    UIImage *growImage = [[self.onScreenImages objectForKey:@(indexPath.row)] copy];
    UIImageView *growImgView = [[UIImageView alloc] initWithFrame:self.selectedFrame];
    growImgView.tag = 77;
    [growImgView setImage:growImage];
    growImgView.layer.cornerRadius = 10.0;
    growImgView.clipsToBounds = YES;

    // set our blurred background hidden initially
    blurImgView.alpha = 0.0;

    // add our grow image to our backing view
    [backingView addSubview:growImgView];

    // create a button to dismiss our enlarged view (it's invisible and the size of our view)
    UIButton *dismissBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    dismissBtn.frame = self.view.bounds;
    [dismissBtn addTarget:self action:@selector(dismissDetailView:) forControlEvents:UIControlEventTouchUpInside];
    [backingView addSubview:dismissBtn];

    // adjust the position of the image center for visual reasons, move higher for larger phones
    CGFloat imgYPos = self.view.center.y - (IS_IPHONE_3_2_ASPECT_RATIO ? 20 : 50);

    // animate our blurred background visible, and grow our image to center
    [UIView animateWithDuration:0.2
                     animations:^{
                         blurImgView.alpha = 1.0;
                         growImgView.bounds = CGRectMake(0, 0, 300, 300);
                         growImgView.center = CGPointMake(self.view.center.x, imgYPos);
                     }];

}

这里是使用到的一些快照方法的实现。我把它放在 UIView 的类别中，returns 其内容的图像使背景模糊。

-(UIImage*)snapshotImage
{
    // Make an image from the input view.
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0);
    [self.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

以下是我在点击视图上的任意位置时关闭详细视图的方法。

-(void) dismissDetailView:(id)sender
{
    // get our backing view
    UIView *__block backingView = [self.view viewWithTag:417985];

    // get our enlarged image
    UIImageView *growImg = (UIImageView*)[backingView viewWithTag:77];

    // shrink our grow img back to original size and move it back to it's original position
    [UIView animateWithDuration:0.3
                     animations:^{
                         growImg.bounds = CGRectMake(0, 0, self.selectedFrame.size.width, self.selectedFrame.size.height);
                         growImg.center = self.selectedCenter;
                     }
                     completion:^(BOOL finished)
                        {
                            // now that the image is back to it's original size, remove the backing view
                            [UIView animateWithDuration:0.1
                                             animations:^{
                                                 // fade our backing view out
                                                 backingView.alpha = 0.0;
                                             }
                                             completion:^(BOOL finished) {
                                                 // scrap our backing view
                                                 [backingView removeFromSuperview];
                                                 backingView = nil;
                                             }];
                        }];

}

在 UICollectionView 上添加 UIView 不起作用

Add UIView on top of UICollectionView not working

uicollectionview

uicollectionviewcell