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

enter image description here

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;


    }


}

He is sharing his knowledge, maybe.. hmm.. But it's a Good one.. :) — 0yeoj, May 27 '15 at 09:57
Only one gradient colour can be implemented not the multiple but i want to use multipe gradient colour as shown in image above — Nischal Hada, May 27 '15 at 09:59
Is your issue with doing `[BackgroundLayer CategoryHealthButy]` missing code? — Larme, May 27 '15 at 10:11

score 2 · Answer 1 · edited May 29 '15 at 13:51

2

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

enter image description here

edited May 29 '15 at 13:51

Nischal Hada

3,230
3
27
57

answered May 27 '15 at 10:10

Rajesh

10,318
16
44
64

I want multiple gradient changing gradient in each cell as shown in image above – Nischal Hada May 27 '15 at 10:15
Are colors used in each cells specific? – Rajesh May 27 '15 at 10:16
Nope I just need to use multiple gradient just that – Nischal Hada May 27 '15 at 10:17
do you think its hard to have different gradient for each cell? – Rajesh May 27 '15 at 10:18
I dont think whether its hard or not but i was unable to acheive as i mentioned in question. was u able to acheive that? – Nischal Hada May 27 '15 at 10:23
If you set the gradient in cellForRowAtIndexPath it will set gradient every time you scroll so that it will be darker every time you start scrolling – Nischal Hada May 28 '15 at 05:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78973/discussion-between-idev-and-nischal-hada). – Rajesh May 28 '15 at 05:57
I have up-vote your post thanks. I have edited your post hope you will accept and up-vote and click on favourite too – Nischal Hada May 29 '15 at 13:02
do u have any ideas ab this problem http://stackoverflow.com/questions/31049551/accessing-custom-cell-attributes-outside-of-cellforrowatindexpath – Nischal Hada Jun 26 '15 at 14:19
may i know ur question ? – Rajesh Jun 27 '15 at 15:01
I have posted the link to it can u check it out please – Nischal Hada Jun 27 '15 at 15:17
I recommend Mahmoud Adam's answer – Rajesh Jun 27 '15 at 15:45

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

1 Answers1

Linked