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的类别中，它返回它的内容的图像以使背景模糊。

-(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无法正常工作

1 个答案: