在 UICollectionViewCell 中添加模糊

Posted 2023-02-23

【中文标题】在 UICollectionViewCell 中添加模糊

【英文标题】：Add blur in UICollectionViewCell

【发布时间】：2014-08-18 18:29:02

【问题描述】：

我正在尝试获取 UICollectionViewCell 的快照，将其模糊并作为子视图添加到 UICollectionViewCell。

一些奇怪的问题正在发生。

MyCollectionViewController

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

    UICollectionViewCell<MyCollectionViewCellProtocol> *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MyCollectionViewCell" forIndexPath:indexPath];
    cell.modelVariable = self.modelsArray[indexPath.item];
    return cell;




@interface MyCollectionViewCell : UICollectionViewCell <MyCollectionViewCellProtocol>

@property (strong, nonatomic) Promo *modelVariable;

@end


#import "UIImage+ImageEffects.h" // from WWDC 2013
#import "UIView+Snapshot.h" // My category to create a snapshot from a UIView
@implementation PromoRowCollectionViewCell

- (void)setModelVariable:(ModelVariableClass *)modelVariable

    _modelVariable = modelVariable;

    // just settings other stuff that is importante to the cell view
    self.mainImageView.image = modelVariable.mainImage;
    self.titleLabel.text = modelVariable.title;
    self.shortDescriptionLabel.text = modelVariable.detailedDescription;

    // removing the snapshot before taking other snapshot
    // or in case the cell is reused and this modelVariable is not in BlurState
    [self.blurImageView removeFromSuperview];
    self.blurImageView = nil;
    [self.myView removeFromSuperview];
    self.myView = nil;

    if (modelVariable.state == BlurState) 
        // Attempt 1
//        UIGraphicsBeginImageContext(self.bounds.size);
//        [self drawViewHierarchyInRect:self.bounds afterScreenUpdates:YES];
//        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
//        UIGraphicsEndImageContext();

        // Attempt 2
//        UIGraphicsBeginImageContextWithOptions(self.bounds.size, self.opaque, 0.0);
//        [self.layer renderInContext:UIGraphicsGetCurrentContext()];
//        UIImage *imgage = UIGraphicsGetImageFromCurrentImageContext();
//        UIGraphicsEndImageContext();

        // This was just a test that showed weird behavior
//        UIView *snapshotView = [self snapshotViewAfterScreenUpdates:YES];
//        self.myView = snapshotView;
//        snapshotView.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.2];
//        CGRect frame = snapshotView.frame;
//        frame.origin = CGPointMake(20, 20);
//        snapshotView.frame = frame;
//        [self addSubview:snapshotView];

        // Attempt 3 // With the red background and shifting the frame we can see just a red rectangle and not the snapshot
        UIView *snapshotView = [self snapshotViewAfterScreenUpdates:YES];
        snapshotView.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.2]; // Just to see things better

//        self.blockedPromoImageView = [[UIImageView alloc] initWithImage:image]; // for attempts 1 and 2

        self.blurImageView = [[UIImageView alloc] initWithImage:snapshotView.snapshotImage.applyLightEffect];

//        self.blurImageView.frame = self.bounds;
        self.blockedPromoImageView.frame = CGRectMake(20, 20, self.bounds.size.width, self.bounds.size.height); // Also to see things better

//        self.blockedPromoImageView.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.2]; // for attempts 1 and 2

        [self addSubview:self.blurImageView];
    


@end


UIView+Snapshot

- (UIImage *)snapshotImage

    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0.0);
    [self.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *resultingImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return resultingImage;

尝试 1：

尝试 2：

以奇怪的行为进行测试：

尝试 3：

如您所见，尝试 1、2 和 3 似乎他们没有拍摄任何快照。 我希望红色矩形在后面有视图的快照。

至于奇怪的行为测试，我希望可以在图像中看到什么，除了最前面的红色矩形。

有人知道怎么回事吗？或者如何解决？

谢谢。

编辑：

我刚刚用最少的代码创建了一个简单的项目来重现问题。 https://www.dropbox.com/sh/j1mhxj367kzn81y/AADW8ds9NvLMyjUDbn08mOJXa?dl=0

【参考方案1】：

如果您只想在屏幕截图中显示图像和文本更改，则无需使用 afterScreenUpdates 标志。

您可以以标准方式编辑图像和文本，删除视图并将单元格保存为图像：

-(UIImage*) takeSnapshot 

    UIGraphicsBeginImageContext(self.frame.size);
    [self.layer renderInContext: UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;

然后添加模糊并添加到您的视图中。

if (modelVariable.state == BlurState) 
    UIImage *snapshot = [self takeSnapshot];
    UIImage *blurredImage = [snapshot applyLightEffect];

    self.blurredImageView = [[UIImageView alloc] initWithImage:blurredImage];
    [self.view addSubview:self.blurredImageView];

【讨论】：

那是我的尝试 2... 它没有捕获任何图像。

您似乎有一个错字，您将“图像”拼写为“图像”，所以它可能不起作用，因为您使用错误的变量初始化 UIImageView？我已经在我自己的自定义表格视图单元格中测试了这段代码 sn-p，它对我来说很好。

我实际上已经修正了真实代码中的错字=/。但是告诉我一些事情，你为什么要将子视图添加到 self.view 中？对我来说，自我就是细胞，所以我只是在做 [self addSubview:self.blurredImageView]

我刚刚添加了一个重现问题的小项目。如果您不想下载代码，只需写一个评论说，我会在这里复制代码。我删除了蓝色部分只是为了让事情变得更容易。

抱歉 self.view 是一个错误，它应该只是 self。我还下载了您的测试项目并运行了它，但它对我来说完美吗？我可以看到正在添加的子视图，这只是它所在单元格的快照。在 ios 7.1 和 8 上尝试了 Xcode 5 和 Xcode 6 beta 5。