ios - 在 UICollectionViewCell 中将 CAGradientLayer 添加到 UIImageView 有奇怪的行为

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%。如果您在不同大小的 Collection View 单元格中使用照片，渐变当然会随照片缩放。如果您需要不同比例的渐变高度:照片高度，您将不得不创建多个图像。最好的解决方案可能是创建 View 所需的所有不同尺寸的照片确实在后台线程上加载并根据需要连接到 Collection View 单元格 - 这将确保每次重复使用 Collection View 单元格时不会发生图像处理。