Adding subview to CollectionViewCell just once (cell reuseability issues) - ios

Question

I would like to add a simple gradient at the bottom of each cell. In cellForItemAtIndexPath: I have the code:
CAGradientLayer *bottomFade = [CAGradientLayer layer];
bottomFade.name = #"Gradient";
bottomFade.frame = CGRectMake(0, cell.background.frame.size.height*0.8, cell.background.frame.size.width, cell.background.frame.size.height*0.2);
bottomFade.endPoint = CGPointMake(0.5, 1.0);
bottomFade.startPoint = CGPointMake(0.5, 0.0);
bottomFade.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithWhite:0.0 alpha:0.0f] CGColor], (id)[[UIColor colorWithWhite:0.0 alpha:0.2f] CGColor], nil];
[cell.background.layer addSublayer:bottomFade];
The problem is that when the cell is being scrolled, the sublayer is added over and over again, which obviously is not a desired effect.
I know how to handle reuseability issues when it comes to the UITableView, but what should I do when it comes to working with the UICollectionView?
I tried to set a custom cell property isConfigured, but when I checked for it in cellForItemAtIndexPath: the result was that only two cells were generated, and then they were repeating (honestly, I have absolutely no idea why).
What would you suggest to handle such a problem? Perhaps it would be better to add some custom code in the cell's subclass?

Answer 1

Put your code that only requires once inside 'awakeFromNib' so it won't be called twice or thrice on its life cycle
which would appear like this:
- (void)awakeFromNib {
[super awakeFromNib];
CAGradientLayer *bottomFade = [CAGradientLayer layer];
bottomFade.name = #"Gradient";
bottomFade.frame = CGRectMake(0, self.background.frame.size.height*0.8, self.background.frame.size.width, self.background.frame.size.height*0.2);
bottomFade.endPoint = CGPointMake(0.5, 1.0);
bottomFade.startPoint = CGPointMake(0.5, 0.0);
bottomFade.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithWhite:0.0 alpha:0.0f] CGColor], (id)[[UIColor colorWithWhite:0.0 alpha:0.2f] CGColor], nil];
[self.background.layer addSublayer:bottomFade];
}

Answer 2

I've already solved the problem ;).
In the cell's subclass:
-(void)layoutSubviews {
if (!self.isConfigured) {
CAGradientLayer *bottomFade = [CAGradientLayer layer];
bottomFade.name = #"Gradient";
bottomFade.frame = CGRectMake(0, self.background.frame.size.height*0.8, self.background.frame.size.width, self.background.frame.size.height*0.2);
bottomFade.endPoint = CGPointMake(0.5, 1.0);
bottomFade.startPoint = CGPointMake(0.5, 0.0);
bottomFade.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithWhite:0.0 alpha:0.0f] CGColor], (id)[[UIColor colorWithWhite:0.0 alpha:0.2f] CGColor], nil];
[self.background.layer addSublayer:bottomFade];
self.isConfigured = YES;
}
}
That does the trick just fine! However, I'm still quite curious about whether there's an easy fix for the problem in cellForItemAtIndexPath: or not.

Answer 3

The cellForItemAtIndexPath: method will be called every time the UICollectionView instance create or reuse a UICollectionViewCell, that's where the problem is.
I don't recommend you use the property like isConfigured, the cell should keep a BOOL variable, and will check the property every time layoutSubviews been called, its a waste of memory and performance.
As nferocious76 said, awakeFromNib: method, which will be called only once on its life cycle, is the best solution for this case.
By the way, as I can't comment, you should call [super layoutSubviews] at the begin of layoutSubviews method.