How to set multiple gradient colour in UITableViewCell using CAGradientLayer in iOS?

Question

I want to set multiple gradient colour and each row would have unique gradient colour as shown image below:

I want to achieve is first image & what I was able to achieve is second

Code I wrote for what I was able to achieve is

  BackgroundLayer.h

+(CAGradientLayer*) CustomHorBlack;

   BackgroundLayer.m

+ (CAGradientLayer*) CustomHorBlack {
    UIColor *colorOne = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0) alpha:0.1];
    UIColor *colorTwo = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0) alpha:0.2];
    UIColor *colorThree = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0)  alpha:0.3];
    UIColor *colorFour = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0) alpha:0.4];
    UIColor *colorFive = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0) alpha:0.5];
    UIColor *colorSix = [UIColor colorWithRed:(0.0) green:(0.0 ) blue:(0.0)  alpha:0.6];

    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor,colorThree.CGColor,colorFour.CGColor, colorFive.CGColor,colorSix.CGColor, nil];

    CAGradientLayer *headerLayer = [CAGradientLayer layer];
    headerLayer.colors = colors;
    [headerLayer setStartPoint:CGPointMake(0.0, 0.5)];
    [headerLayer setEndPoint:CGPointMake(1.0, 0.5)];



    return headerLayer;

}

TableCell.m

-(void)awakeFromNib{
    [[[self contentView] superview] setClipsToBounds:YES];
    CAGradientLayer *bgLayer = [BackgroundLayer CustomHorBlack];
 //   bgLayer.frame = self.contentView.bounds;
    bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 72);

    if ([Util isiPhone6]) {
        bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 84);
    }
    else if ([Util isiPhone6PlusDevice]){
        bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 93);
    }

    [self.CatImageView.layer insertSublayer:bgLayer atIndex:0];
}

Code I wrote for what I want to achieve is but doesn't find what I want is

-(void)awakeFromNib{

    if (!checkVariable) {
        variable=0;
        checkVariable=TRUE;
    }

    [[[self contentView] superview] setClipsToBounds:YES];
    CAGradientLayer *bgLayer;
    //= [BackgroundLayer CustomHorBlack];

    for(variable = 0; variable < 10; variable++) {

        switch(variable)
        {
            case 0:
                bgLayer = [BackgroundLayer CategoryHealthButy];
                //variable = variable + 1;


                break;
            case 1:
               bgLayer = [BackgroundLayer CategoryClothing];
               // variable = variable + 1;

                break;
            case 2:
               bgLayer = [BackgroundLayer CategoryComputer];
               // variable = variable + 1;

                break;

            case 3:
                bgLayer = [BackgroundLayer Categoryeducation];
                //variable = variable + 1;


                break;

            case 4:
                bgLayer = [BackgroundLayer CategoryElectronics];
               // variable = variable + 1;


                break;
            case 5:
                bgLayer = [BackgroundLayer CategoryEntertainment];
                variable = variable + 1;

                break;
            case 6:
                bgLayer = [BackgroundLayer CategoryGroceries];
              //  variable = variable + 1;

                break;

            case 7:
                bgLayer = [BackgroundLayer CategoryHealthButy];
              //  variable = variable + 1;


                break;

            case 8:
                bgLayer = [BackgroundLayer CategoryHome];
             //   variable = variable + 1;

                break;
            case 9:
                bgLayer = [BackgroundLayer CategoryResturant];
               // variable = variable + 1;

                break;

            case 10:
                bgLayer = [BackgroundLayer CategoryToys];
               // variable = 0;


                break;

            default:
                bgLayer = [BackgroundLayer CategoryToys];
               // variable = variable + 1;


                break;
        }



 //   bgLayer.frame = self.contentView.bounds;
    bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 72);

    if ([Util isiPhone6]) {
        bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 84);
    }
    else if ([Util isiPhone6PlusDevice]){
        bgLayer.frame = CGRectMake(-7, 0, [Util window_width], 93);
    }

    [self.CatImageView.layer insertSublayer:bgLayer atIndex:variable];

        variable = variable + 1;


    }


}

Answer 1

This I can achieve with below code

TableViewCell.h

@interface TableViewCell : UITableViewCell
{
    UIImageView *imageView;
    UIView *viewGradient;
    CAGradientLayer *gradientLayer;
}

- (void)setImage:(UIImage *)image andColor:(UIColor *)color;

@end

TableViewCell.m

- (void)awakeFromNib {
    [self.contentView setFrame:CGRectMake(0, 0, 320, 44)];
        imageView = [[UIImageView alloc] initWithFrame:self.contentView.bounds];
    [imageView setAutoresizingMask:UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth ];
            [self.contentView addSubview:imageView];

            viewGradient = [[UIView alloc] initWithFrame:self.contentView.bounds];
        [viewGradient setAutoresizingMask:UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth ];
            [self.contentView addSubview:viewGradient];
            gradientLayer = [CAGradientLayer layer];
            gradientLayer.frame = viewGradient.bounds;
            [gradientLayer setStartPoint:CGPointMake(0.0, 0.5)];
            [gradientLayer setEndPoint:CGPointMake(1.0, 0.5)];
            [viewGradient.layer insertSublayer:gradientLayer atIndex:0];
}
 - (void)setImage:(UIImage *)image andColor:(UIColor *)color
    {
        [imageView setImage:image];
        gradientLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor], (id)[color CGColor], nil];
    }

ViewController.m

         - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
        switch (indexPath.row)
        {
            case 0:
                [cell setImage:[UIImage imageNamed:@"Grass"] andColor:[UIColor whiteColor]];
                break;
            case 1:
                [cell setImage:[UIImage imageNamed:@"House"] andColor:[UIColor greenColor]];
                break;
            case 2:
                [cell setImage:[UIImage imageNamed:@"Sky"] andColor:[UIColor redColor]];
                break;

            default:
                break;
        }
        return cell;
    }

Refer to screenshot