在 UICollectionViewCell 中将 CAGradientLayer 添加到 UIImageView 有奇怪的行为答案

【问题标题】：Adding CAGradientLayer to UIImageView in UICollectionViewCell has strange behaviour在 UICollectionViewCell 中将 CAGradientLayer 添加到 UIImageView 有奇怪的行为
【发布时间】：2014-11-17 12:44:17
【问题描述】：

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

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 并再次显示它，一切都是正确的。

有人知道我应该怎么做才能解决这个问题吗？

谢谢

【问题讨论】：

你明白你的问题解决了吗？我正是你的问题...

标签： ios objective-c uicollectionview calayer

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

【讨论】：