跨多个 UITableViewCell 应用渐变答案

【问题标题】：Apply gradient across multiple UITableViewCells跨多个 UITableViewCell 应用渐变
【发布时间】：2015-08-03 04:20:48
【问题描述】：

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

【问题讨论】：

标签： ios uitableview core-graphics linear-gradients

【解决方案1】：

我实际上设法弄明白了，在某种程度上来自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];

结果如下：

【讨论】：

但它们不是渐变！
不，但它仍然给出了我想要的效果
但只要对代码稍作修改，它们就会变成渐变。这么近！
我应该改变什么？
每个单元格都有颜色。现在假设这是每个单元格的开始颜色，而下一个单元格的颜色是每个单元格的结束颜色。现在只需制作渐变而不是纯色，就可以了。（如果你愿意，你甚至可以考虑间距！）

【解决方案2】：

在代码下方找到通过提供两种必需的颜色来创建渐变层。您可以将此图层添加到任何视图。添加此框架#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;
}

【讨论】：