如何在 iOS 中使用 CAGradientLayer 在 UITableViewCell 中设置多个渐变颜色？

Posted 2023-02-23

【中文标题】如何在 iOS 中使用 CAGradientLayer 在 UITableViewCell 中设置多个渐变颜色？

【英文标题】：How to set multiple gradient colour in UITableViewCell using CAGradientLayer in iOS?

【发布时间】：2015-05-27 09:53:26

【问题描述】：

我想设置多个渐变颜色，每一行都有唯一的渐变颜色，如下图所示：

我想要实现的是第一张图片，我能够实现的是第二张

我为我能够实现的目标编写的代码是

  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];

我为想要实现的目标编写的代码是，但没有找到我想要的目标

-(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;


    

【问题讨论】：

您当前的代码到底有什么问题？

他正在分享他的知识，也许.. 嗯.. 但这是一个很好的.. :)

只能实现一种渐变色，不能实现多重，但我想使用多重渐变色，如上图所示

[BackgroundLayer CategoryHealthButy] 缺少代码是您的问题吗？

没有缺码

【参考方案1】：

我可以用下面的代码实现这一点

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;
    

参考截图

【讨论】：

我想要每个单元格中的多个渐变渐变，如上图所示

每个单元格中使用的颜色是否特定？

不，我只需要使用多个渐变就可以了

你认为每个单元格有不同的梯度很难吗？

我不认为它是否难，但我无法达到我提到的问题。你能做到吗？