4

我制作了一个UIViewController符合UITableViewDataSourceandUITableViewDelegate协议的，并且有一个UITableView作为它的子视图。

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

为了在单元格之间有自定义间距，我使行高比我想要的大，并将单元格的 contentView 自定义为我想要的大小，使它看起来像有额外的空间（遵循这个 SO 答案）。

我想为单元格添加模糊效果，使背景模糊，我通过Brad Larson 的 GPUImage framework做到了这一点。但是，这很好用，因为我希望背景模糊在滚动时更新，所以滚动变得非常滞后。

我的代码是：

//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;
}
4

1 回答 1

6

我设法解决了这个问题，我起初认为它不会起作用。

生成多个模糊图像当然不是解决方案，因为它的成本很高。我只使用了一张模糊图像并将其缓存。

所以我分类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];
    }
}

这是一个完整的工作演示

于 2013-10-14T23:31:15.573 回答