关于 ios：跨多个 UITableViewCell 应用渐变


Apply gradient across multiple UITableViewCells

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

Here

我实际上设法弄明白了，在某种程度上是通过这个问题和来自 matt

的帮助

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
- (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;
}

这是如何将其添加到子视图：

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

结果如下：

enter

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 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;
}