UITableViewCell contentView背景的快速模糊

Question

我已经做了一个UIViewController符合UITableViewDataSource和UITableViewDelegate协议,并有一个UITableViewas的子视图.

我已将backgroundView表的属性设置为a UIImageView,以便将图像显示为表的背景.

为了在单元格之间有自定义间距,我使行高度大于我想要的,并将单元格的contentView自定义为我想要的大小,使其看起来有额外的空间(遵循此SO答案).

我想为单元格添加模糊,以便背景模糊,我通过Brad Larson的GPUImage框架完成了这项工作.然而,这工作正常,因为我希望背景模糊在滚动时更新,滚动变得非常迟缓.

我的代码是:

//Gets called from the -scrollViewDidScroll:(UIScrollView *)scrollView method
- (void)updateViewBG
{
    UIImage *superviewImage = [self snapshotOfSuperview:self.tableView];

    UIImage* newBG = [self applyTint:self.tintColour image:[filter imageByFilteringImage:superviewImage]];

    self.layer.contents = (id)newBG.CGImage;
    self.layer.contentsScale = newBG.scale;
}

//Code to create an image from the area behind the 'blurred cell'
- (UIImage *)snapshotOfSuperview:(UIView *)superview
{
    CGFloat scale = 0.5;
    if (([UIScreen mainScreen].scale > 1 || self.contentMode == UIViewContentModeScaleAspectFill)) {
        CGFloat blockSize = 12.0f/5;
        scale = blockSize/MAX(blockSize * 2, floor(self.blurRadius));
    }

    UIGraphicsBeginImageContextWithOptions(self.bounds.size, YES, scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextTranslateCTM(context, -self.frame.origin.x, -self.frame.origin.y);
    NSArray *hiddenViews = [self prepareSuperviewForSnapshot:superview];
    [superview.layer renderInContext:context];
    [self restoreSuperviewAfterSnapshot:hiddenViews];
    UIImage *snapshot = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return snapshot;
}

-(UIImage*)applyTint:(UIColor*)colour image:(UIImage*)inImage{
    UIImage *newImage;
    if (colour) {
        UIGraphicsBeginImageContext(inImage.size);

        CGContextRef ctx = UIGraphicsGetCurrentContext();
        CGRect area = CGRectMake(0, 0, inImage.size.width, inImage.size.height);

        CGContextScaleCTM(ctx, 1, -1);
        CGContextTranslateCTM(ctx, 0, -area.size.height);
        CGContextSaveGState(ctx);
        CGContextClipToMask(ctx, area, inImage.CGImage);
        [[colour colorWithAlphaComponent:0.8] set];
        CGContextFillRect(ctx, area);
        CGContextRestoreGState(ctx);
        CGContextSetBlendMode(ctx, kCGBlendModeLighten);
        CGContextDrawImage(ctx, area, inImage.CGImage);
        newImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    } else {
        newImage = inImage;
    }
    return newImage;
}

现在提出问题:
是否有更好的方法来添加模糊？也许是为了不必渲染图层的每一个动作？iOS7的控制中心/通知中心似乎能够做到这一点,没有任何滞后.

也许和GPUImageUIElement班级一起？如果是这样,我该如何使用它？我看到的另一种方法是最初在背景图像上创建模糊然后裁剪我需要使用的区域,但是我无法使其工作,因为图像的大小可能与也可能不同屏幕因此缩放是一个问题(使用CGImageCreateWithImageInRect()和矩形是单元格在桌面上的位置).

我还发现我必须将模糊添加到tableview本身,框架是单元格的框架,而单元格具有清晰的颜色.

提前致谢

编辑 根据要求,这是我之前尝试的图像裁剪的代码:

- (void)updateViewBG
{
    //self.bgImg is the pre-blurred image, -getContentViewFromCellFrame: is a convenience method to get just the content area from the whole cell (since the contentarea is smaller than the cell)
    UIImage* bg = [self cropImage:self.bgImg 
                           toRect:[LATableBlur getContentViewFromCellFrame:[self.tableView rectForRowAtIndexPath:self.cellIndexPath]]];
    bg = [self applyTint:self.tintColour image:bg];
    self.layer.contents = (id)bg.CGImage;
    self.layer.contentsScale = bg.scale;
}

- (UIImage*)cropImage:(UIImage*)image toRect:(CGRect)frame
{
    CGSize imgSize = [image size];
    double heightRatio = imgSize.height/self.tableView.frame.size.height;
    double widthRatio = imgSize.width/self.tableView.frame.size.width;

    UIImage* cropped = [UIImage imageWithCGImage:CGImageCreateWithImageInRect(image.CGImage,
                                                                              CGRectMake(frame.origin.x*widthRatio,
                                                                                         frame.origin.y*heightRatio,
                                                                                         frame.size.width*widthRatio,
                                                                                         frame.size.height*heightRatio))];

    return cropped;
}

Answer 1

我设法用一个解决方案来解决它,起初我认为它不会起作用.

生成几个模糊的图像肯定不是解决方案,因为它花费了很多.我只使用了一个模糊的图像并将其缓存.

所以我继承了UITableViewCell:

@interface BlurredCell : UITableViewCell
@end

我实现了两个类方法来访问缓存的图像(模糊和正常的)

+(UIImage *)normalImage
{
    static dispatch_once_t onceToken;
    static UIImage *_normalImage;
    dispatch_once(&onceToken, ^{
        _normalImage = [UIImage imageNamed:@"bg.png"];
    });
    return _normalImage;
}

我在UIImage上使用了REFrostedViewController的类别来生成模糊图像

+(UIImage *)blurredImage
{
    static dispatch_once_t onceToken;
    static UIImage *_blurredImage;
    dispatch_once(&onceToken, ^{
    _blurredImage = [[UIImage imageNamed:@"bg.png"] re_applyBlurWithRadius:BlurredCellBlurRadius
                                                                 tintColor:[UIColorcolorWithWhite:1.0f
                                                                                            alpha:0.4f]
                                                     saturationDeltaFactor:1.8f
                                                                 maskImage:nil];
    });
    return _blurredImage;
}

为了在单元格内部产生模糊帧的效果,但仍然看到两侧的非模糊图像,我习惯滚动视图.

一个是带有普通图像的图像视图,另一个是带有模糊图像的图像视图.我将内容大小设置为图像的大小,并contentOffset通过界面设置.

因此,表视图最终以每个单元格保存整个背景图像,但在特定偏移处裁剪它并仍然显示整个图像

@implementation BlurredCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
        [self.contentView addSubview:self.normalScrollView];
        [self.contentView addSubview:self.blurredScrollView];
    }
    return self;
}

-(UIScrollView *)normalScrollView
{
    if (!_normalScrollView) {
        _normalScrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
        _normalScrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        _normalScrollView.scrollEnabled = NO;
        UIImageView *imageView =[[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        imageView.contentMode = UIViewContentModeScaleToFill;
        imageView.image = [BlurredCell normalImage];
        _normalScrollView.contentSize = imageView.frame.size;
        [_normalScrollView addSubview:imageView];
    }
    return _normalScrollView;
}

-(UIScrollView *)blurredScrollView
{
    if (!_blurredScrollView) {
        _blurredScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(BlurredCellPadding, BlurredCellPadding,
                                                                            self.bounds.size.width - 2.0f * BlurredCellPadding,
                                                                            self.bounds.size.height - 2.0f * BlurredCellPadding)];
        _blurredScrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        _blurredScrollView.scrollEnabled = NO;
        _blurredScrollView.contentOffset = CGPointMake(BlurredCellPadding, BlurredCellPadding);
        UIImageView *imageView =[[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        imageView.contentMode = UIViewContentModeScaleToFill;
        imageView.image = [BlurredCell blurredImage];
        _blurredScrollView.contentSize = imageView.frame.size;
        [_blurredScrollView addSubview:imageView];
    }
    return _blurredScrollView;
}

-(void)setBlurredContentOffset:(CGFloat)offset
{
    self.normalScrollView.contentOffset = CGPointMake(self.normalScrollView.contentOffset.x, offset);
    self.blurredScrollView.contentOffset = CGPointMake(self.blurredScrollView.contentOffset.x, offset + BlurredCellPadding);
}

@end

setBlurredContentOffset: 应在每次表视图的内容偏移更改时调用.

所以在表视图中委托的实现(视图控制器)我们在这两种方法中做到了:

// For the first rows
-(void)tableView:(UITableView *)tableView willDisplayCell:(BlurredCell *)cell 
                                        forRowAtIndexPath:(NSIndexPath *)indexPath
{
    [cell setBlurredContentOffset:cell.frame.origin.y];
}

// Each time the table view is scrolled
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    for (BlurredCell *cell in [self.tableView visibleCells]) {
        [cell setBlurredContentOffset:cell.frame.origin.y - scrollView.contentOffset.y];
    }
}

这是一个完整的工作演示