在UICollectionViewCell中添加模糊 [英] Add blur in UICollectionViewCell

问题描述

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

I'm trying get a snapshot of a UICollectionViewCell, blur it and add as a subview to the UICollectionViewCell.

发生了一些奇怪的问题。

Some weird problems are happening.

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：

Attempt 1:

尝试2：

Attempt 2:

以奇怪的行为进行测试：

Test with weird behavior:

尝试3：
< img src =https://i.stack.imgur.com/4XsmZ.pngalt =在此处输入图像说明>

Attempt 3:

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

So as you can see, attempts 1, 2 and 3 it seems they didn't take any snapshot. I'd expect the red rectangle to have a snapshot of the view in the back.

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

As for the weird behavior test, I'd expect what can be seen in the image, except for the red rectangle most at front.

有谁知道最近发生了什么？或者如何解决？

Does anyone knows whats going on? Or how to solve it?

谢谢。

编辑：

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

I just created a simple project with the minimum amount of code to reproduce the problem. https://www.dropbox.com/sh/j1mhxj367kzn81y/AADW8ds9NvLMyjUDbn08mOJXa?dl=0

推荐答案

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

You don't need to use the afterScreenUpdates flag if you just want your image and text change to come through in the screenshot.

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

You can just edit the image and text, remove views and save the cell as an image in the standard way:

-(UIImage*) takeSnapshot {

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

    return image;
}

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

Then add the blur and add to your view.

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

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

这篇关于在UICollectionViewCell中添加模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！