跨多个 UITableViewCells 应用渐变

Question

我有一个白色背景的 UITableView，我想在 tableview 单元格上应用线性渐变，以便渐变是从 tableview 的开始到结束的一个单一渐变，请参见下面来自 Adobe Illustrator 的示例。有没有一种方法可以使用 Core Graphics 来实现？

Answer 1

在代码下方找到通过提供两种所需颜色来创建渐变层的代码。您可以将此图层添加到任何视图。添加此框架 #import <QuartzCore/QuartzCore.h> 以实现此结果。

 typedef enum {
        GradientType_Linear,
        GradientType_Reflected,
    }GradientType;



+(CAGradientLayer*) gradientLayerFromColor:(UIColor *)firstColor
                               secondColor:(UIColor *)secondColor
                              gradientType:(GradientType)gradientType
{
    UIColor *colorStart = firstColor;
    UIColor *colorEnd = secondColor;

    NSArray *colors;
    NSArray *locations;

    switch (gradientType) {
        case GradientType_Linear:
        {
            colors = [NSArray arrayWithObjects:(id)colorStart.CGColor, colorEnd.CGColor, nil];
            NSNumber *start1 = [NSNumber numberWithFloat:0.0];
            NSNumber *stop1 = [NSNumber numberWithFloat:1.0];
            locations = [NSArray arrayWithObjects:start1, stop1, nil];
        }
            break;

        case GradientType_Reflected:
        {
            colors = [NSArray arrayWithObjects:(id)colorStart.CGColor, colorEnd.CGColor, colorEnd.CGColor, colorStart.CGColor, nil];
            NSNumber *start1 = [NSNumber numberWithFloat:0.0];
            NSNumber *stop1 = [NSNumber numberWithFloat:0.5];
            NSNumber *start2 = [NSNumber numberWithFloat:0.5];
            NSNumber *stop2 = [NSNumber numberWithFloat:1.0];
            locations = [NSArray arrayWithObjects:start1, stop1, start2, stop2, nil];
        }
            break;

        default:
        {
            colors = [NSArray arrayWithObjects:(id)colorStart.CGColor, colorEnd.CGColor, nil];
            NSNumber *start1 = [NSNumber numberWithFloat:0.0];
            NSNumber *stop1 = [NSNumber numberWithFloat:1.0];

            locations = [NSArray arrayWithObjects:start1, stop1, nil];
        }
            break;
    }

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = colors;
    gradientLayer.locations = locations;

    return gradientLayer;
}

Answer 2

我实际上设法弄明白了，在某种程度上来自这个 question 和 matt

的帮助

- (NSArray *)generateCellGradients
{
    NSMutableArray *gradientColors = [[NSMutableArray alloc] init];

    NSUInteger numberOfIntervals = self.datasource.count;

    CGFloat startColorR =  81.0 / 255.0;
    CGFloat startColorG = 118.0 / 255.0;
    CGFloat startColorB = 214.0 / 255.0;

    UIColor *startColor = [UIColor colorWithRed:startColorR
                                          green:startColorG
                                           blue:startColorB
                                          alpha:1.0];

    [gradientColors addObject:startColor];

    CGFloat endColorR = 0;
    CGFloat endColorG = 191.0 / 255.0;
    CGFloat endColorB = 120.0 / 255.0;

    UIColor *endColor = [UIColor colorWithRed:endColorR
                                        green:endColorG
                                         blue:endColorB
                                        alpha:1.0];

    CGFloat intervalR = (endColorR - startColorR) / numberOfIntervals;
    CGFloat intervalG = (endColorG - startColorG) / numberOfIntervals;
    CGFloat intervalB = (endColorB - startColorB) / numberOfIntervals;

    for (NSUInteger i = 0; i < numberOfIntervals; i++) {
        startColorR += intervalR;
        startColorG += intervalG;
        startColorB += intervalB;

        UIColor *intervalColor = [UIColor colorWithRed:startColorR green:startColorG blue:startColorB alpha:1.0];

        [gradientColors addObject:intervalColor];
    }

    [gradientColors addObject:endColor];

    NSMutableArray *cellGradients = [[NSMutableArray alloc] init];

    for (NSUInteger i = 0; i < gradientColors.count; i++) {
        UIColor *startGradientColor = gradientColors[i];
        UIColor *endGradientColor;

        if (i == gradientColors.count - 1) {
            endGradientColor = gradientColors[i];
        } else {
            endGradientColor = gradientColors[i + 1];
        }

        NSArray *colors = @[(id)startGradientColor.CGColor, (id)endGradientColor.CGColor];
        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        gradientLayer.colors = colors;

        [cellGradients addObject:gradientLayer];
    }

    return cellGradients;
}

这是将它添加到子视图的方法：

    CAGradientLayer *backgroundLayer = self.gradients[indexPath.row];
    backgroundLayer.frame = view.bounds;
    [view.layer insertSublayer:backgroundLayer atIndex:0];

结果如下：

跨多个 UITableViewCells 应用渐变

Apply gradient across multiple UITableViewCells

core-graphics

linear-gradients

uitableview

ios