在重复使用的原型单元格中多次应用渐变蒙版 [英] Gradient Mask is applied multiple times in reused prototype cell

问题描述

我有一个 tableview，有一个客户 UITableViewCell 类 - 这是在 Storyboard/Builder 中作为原型单元创建的.

I have a tableview, with a customer UITableViewCell class - this is created as a prototype cell in Storyboard/Builder.

因为我的单元格链接到 Storyboard 原型，所以我引用它如下(cellIdentifier 匹配原型单元格上的 ID):

Because my cell is linked to the Storyboard prototype, I reference it as follows (cellIdentifier matches the ID on the prototype cell):

EventsListTableViewCell *cell = (EventsListTableViewCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];

因此，单元格总是被初始化并准备好(我不能使用if (cell == nil{...}")

As such, the cell is always initialised and ready (I can't use "if (cell == nil{...} ")

这很好，但是我想在我的单元格中添加一个渐变层，这是我在 cellForRowAtIndex 中所做的:

This is fine, however I want to add a gradient layer to my cell, which I'm doing within cellForRowAtIndex:

gradientMask = [CAGradientLayer layer];
gradientMask.frame = cell.eventImage.layer.bounds;

gradientMask.startPoint = CGPointMake(0.5, 0.2);
gradientMask.endPoint = CGPointMake(0.5, 1.0);
gradientMask.colors = [NSArray arrayWithObjects:
                       (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:0.0f] CGColor],

                       (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:1.0f] CGColor],nil];
[cell.eventImage.layer insertSublayer:gradientMask atIndex:0];

这里的问题是，每次重复使用单元格都会应用渐变蒙版，所以当我向下滚动时，它会变得越来越暗

The issue here, is that the gradientMask gets applied for each re-use of the cell, so when I scroll down it gets darker and darker

我意识到我只需要在首次创建单元格时应用此渐变蒙版一次，但是我不确定在哪里调用此代码，因为我从不初始化"单元格(这是由故事板处理的)

I realise I need to only apply this gradientMask once, when the cell is first created, however I'm not sure where to call this code, as I never 'init' the cell (this is handled by the storyboard)

我确实有这个单元格的自定义类，但它只包含属性而没有方法?

I do have a custom class for this cell, but it only contains properties and no methods?

推荐答案

有多种方法可以实现:

1- UITableViewCell 子类中的属性

在 EventsListTableViewCell 类中创建一个属性，该属性将保存对 gradientMask 的引用:

Create a property in the EventsListTableViewCell class which will hold a reference to the gradientMask:

@interface EventsListTableViewCell : UITableViewCell

@property (weak, nonatomic) CAGradientLayer *gradientMask;

@end

然后在 cellForRowAtIndexPath: 方法中:

if (!cell.gradientMask) {
    gradientMask = [CAGradientLayer layer];
    gradientMask.frame = cell.eventImage.layer.bounds;

    gradientMask.startPoint = CGPointMake(0.5, 0.2);
    gradientMask.endPoint = CGPointMake(0.5, 1.0);
    gradientMask.colors = [NSArray arrayWithObjects:
                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:0.0f] CGColor],

                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:1.0f] CGColor],nil];
    [cell.eventImage.layer insertSublayer:gradientMask atIndex:0];
    cell.gradientMask = gradientMask;
}

这将确保gradientMask只初始化一次.

This will make sure that the gradientMask is initialized only once.

2- CALayer

这样，您无需创建属性，一切都可以在 cellForRowAtIndexPath: 方法本身中处理.

This way, you don't need to create a property and everything can be handled in the cellForRowAtIndexPath: method itself.

BOOL gradientFound = NO;

for (CALayer *layer in cell.eventImage.layer.sublayers)
{
    if ([layer.name isEqualToString:@"gradientLayer"])
    {
        gradientFound = YES;
        break;
    }
}

if (!gradientFound)
{
    gradientMask = [CAGradientLayer layer];
    gradientMask.frame = cell.eventImage.layer.bounds;
    gradientMask.name = @"gradientLayer";               //Set the name
    gradientMask.startPoint = CGPointMake(0.5, 0.2);
    gradientMask.endPoint = CGPointMake(0.5, 1.0);
    gradientMask.colors = [NSArray arrayWithObjects:
                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:0.0f] CGColor],

                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:1.0f] CGColor],nil];
    [cell.eventImage.layer insertSublayer:gradientMask atIndex:0];

}

3- 在 UITableViewCell 子类中声明 gradienLayer

这是最干净的方法，因为它还隔离了与其类中的单元格相关的代码.您可以在 awakeFromNib 方法中初始化单元格.

This is the cleanest way as it also isolates the code related to the cell within it's class. You can initialize the cell in the awakeFromNib method.

@implementation EventsListTableViewCell
{
    CAGradientLayer *gradientMask;
}

-(void)awakeFromNib
{
    gradientMask = [CAGradientLayer layer];
    gradientMask.frame = cell.eventImage.layer.bounds;

    gradientMask.startPoint = CGPointMake(0.5, 0.2);
    gradientMask.endPoint = CGPointMake(0.5, 1.0);
    gradientMask.colors = [NSArray arrayWithObjects:
                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:0.0f] CGColor],

                           (id)[[UIColor colorWithRed:0.0f green:0.0f blue:1.0f alpha:1.0f] CGColor],nil];
    [self.eventImage.layer insertSublayer:gradientMask atIndex:0];
}

@end

这篇关于在重复使用的原型单元格中多次应用渐变蒙版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！