UICollectionView设置特定位置indexPath.row的背景

Question

Fairly new to iOS working on weather App utilizing UICollectionView in which the coldest hour of forecast will have blue background gradient, and warmest hour will have orange background gradient.

The logic I've created is I identify the position in my array of coldest and warmest, then match that up to the indexPath.row to set the appropriate gradient. However, it only works one time. When I scroll or switch views it seems the gradients are randomly assigned. When I NSLog both the low/high temp and indexPath.row, they seem to equal as expected.

Here is my code:

 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = @"ConditionsCell";

ConditionsCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];

cell.conditionsTime.text = [self.hours objectAtIndex:indexPath.row];
cell.conditionsTemp.text = [NSString stringWithFormat:@"%@°", [self.hoursTemp objectAtIndex:indexPath.row]];
cell.conditionsImage.image = [UIImage imageNamed:@""]; //resetting image

NSLog (@"indexPath %d self.lowTempPosition %d", indexPath.row, self.lowTempPosition);

if(indexPath.row == self.lowTempPosition)
{
CAGradientLayer *gradientBlue = [CAGradientLayer layer];
gradientBlue.frame = cell.bounds;
gradientBlue.colors = [NSArray arrayWithObjects:(id)[[Utils beginBlue] CGColor], (id)[[Utils endBlue] CGColor], nil];
[cell.contentView.layer insertSublayer:gradientBlue atIndex:0];
}
else if (indexPath.row == self.highTempPosition)
{
    CAGradientLayer *gradientBlue = [CAGradientLayer layer];
    gradientBlue.frame = cell.bounds;
    gradientBlue.colors = [NSArray arrayWithObjects:(id)[[Utils beginOrange] CGColor], (id)[[Utils endOrange] CGColor], nil];
    [cell.contentView.layer insertSublayer:gradientBlue atIndex:0];
}
else
{
    CAGradientLayer *gradientWhite = [CAGradientLayer layer];
    gradientWhite.frame = cell.bounds;
    gradientWhite.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor], (id)[[UIColor whiteColor] CGColor], nil];
    [cell.ContentView.layer insertSublayer:gradientWhite atIndex:0];
}

     NSURLSession *session = [NSURLSession sharedSession];
NSURLSessionDataTask *dataTask = [session dataTaskWithURL:[NSURL URLWithString:[self.hoursIcons objectAtIndex:indexPath.row]] completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
    @autoreleasepool {//autorelease pool for memory release
        if (!error) {

            dispatch_async(dispatch_get_main_queue(), ^{
                cell.conditionsImage.image = [UIImage imageWithData: data];//update UI

            });

        }}//autorelease pool

}];


[dataTask resume];

return cell;
 }

Answer 1

The problem is because of the reuse of the cells. You are adding the gradient as a sublayer to the cell contentView. So on scrolling, the sublayers still exist. Like you are resetting the image, you should reset the layers too. The fastest way to do is to call:

cell.contentView.layer.sublayers = nil;

This should reset the layers and then you can add your desired temperature gradient again.