在UICollectionViewCell中向UIImageView添加CAGradientLayer具有奇怪的行为

Question

我必须在某些自定义CAGradientLayer的背景图片中添加UICollectionViewCells。我正在使用自定义流布局来显示这样的单元格。

RACollectionViewTripleLayout

当我在collectionView中滚动并且添加到图像的渐变图层更改其大小时，我遇到了可重用性问题。正如您在此图像中看到的那样，渐变会改变其大小。

我也遇到了一些细胞问题，这些细胞会将梯度图层加两次。所以我想添加的阴影效果太暗了。

我正在使用此代码。

- (void)prepareForReuse {
    [super prepareForReuse];
    [self.gradientLayer removeFromSuperlayer];
    self.gradientLayer = nil;
    self.articleImageView.image = nil;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    [self setupGradient];
}


#pragma mark - Setup
- (void)setupGradient {
    UIColor *threeQuartersBlack = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.6];
    UIColor *halfBlack = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];
    UIColor *oneQuarterBlack = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.3];

    CAGradientLayer *gradient = [CAGradientLayer layer];
    CGFloat gradientHeight =self.bounds.size.height/3.0;
    CGRect gradientBounds = CGRectMake(0, self.bounds.size.height-gradientHeight, self.bounds.size.width, gradientHeight);

    gradient.frame = gradientBounds;
    gradient.anchorPoint =  CGPointMake(0.5, 0.5);

    gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor],(id)oneQuarterBlack.CGColor ,(id)halfBlack.CGColor , (id)threeQueartesBlack.CGColor, (id)[[UIColor blackColor] CGColor], nil];

    self.gradientLayer = gradient;
    [self.articleImageView.layer insertSublayer:self.gradientLayer atIndex:0];
}

我注意到如果我弹出ViewController并再次显示它，一切都是正确的。

任何人都知道我应该怎么做才能解决这个问题？

谢谢

Answer 1

一个潜在的解决方案：从你的UICollectionViewCell中删除渐变，然后将其添加到你正在显示的UIImage中，创建一个包含渐变的新UIImage。向UIImage添加渐变的代码如下所示。

UIImage *thumbnail = yourImage;
UIGraphicsBeginImageContextWithOptions(thumbnail.size, NO, 0.0);
[thumbnail drawInRect:CGRectMake(0.f, 0.f, thumbnail.size.width, thumbnail.size.height)];

//  Add Gradient to lower half of thumbnail
CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat colors[4] = {0.f, 0.f, 0.f, 0.55};
CGFloat locations[2] = {0.f, 1.f};
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, locations, 2);
CGColorSpaceRelease(colorSpace);
CGPoint startPoint = CGPointMake(thumbnail.size.width/2.f, thumbnail.size.height - 40.f);
CGPoint endPoint = CGPointMake(thumbnail.size.width/2.f, thumbnail.size.height);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

UIImage *newThumbnail = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

*注意：此代码将缩略图应用于照片的底部40个点。您可能想申请25％的照片。如果您在不同大小的集合视图单元格中使用该照片，则渐变当然会随照片缩放。如果您需要不同比例的渐变高度：照片高度，您将需要创建多个图像。最佳解决方案可能是创建所有不同大小的照片，这些照片需要在后台线程上加载，并根据需要连接到集合视图单元 - 这将确保每次重复使用集合视图单元时都不会进行图像处理。