Question

我想像你在第一个单元格右侧看到的那样产生效果：

enter image description here

我猜它是某种带渐变的叠加视图，但我无法弄清楚它是如何配置透明度的。我尝试使用渐变创建自己的叠加视图并将颜色的alpha设置为向下，但它只显示为灰白色渐变。

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIColor *gradBegin = [UIColor colorWithWhite:1.0 alpha:0.8];
    UIColor *gradEnd = [UIColor colorWithWhite:1.0 alpha:0.6];
    NSArray* gradientColors = [NSArray arrayWithObjects: 
                               (id)gradBegin.CGColor, 
                               (id)gradEnd.CGColor, nil];
    CGFloat gradientLocations[] = {0, 1};

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)gradientColors, gradientLocations);

    CGContextDrawLinearGradient(context, gradient, CGPointMake(rect.origin.x, rect.origin.y + rect.size.height/2.0), 
                                CGPointMake(rect.origin.x + rect.size.width, rect.origin.y + rect.size.height/2.0), 0);

此截图中究竟发生了什么，以及如何复制它？

Answer 1

虽然这可以通过Core Graphics完成，但是使用适当的宽度和1个像素高度向项目中添加透明PNG会更容易，然后在表格单元格中放置UIImageView来创建内容这种效果。

Answer 2

我写了一个简单的UIView类，它会使自己褪色。这是一个基本的UIView，其中drawRect被覆盖：

- (void)drawRect:(CGRect)rect
{
    CGColorSpaceRef colourSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = UIGraphicsGetCurrentContext();

    UIColor* gradBegin = [UIColor colorWithWhite:1 alpha:0];
    UIColor* gradEnd = [UIColor colorWithWhite:1 alpha:1];
    NSArray* gradColours = [NSArray arrayWithObjects:
                                    (id)gradBegin.CGColor,
                                    (id)gradBegin.CGColor,
                                    (id)gradEnd.CGColor,
                                    (id)gradEnd.CGColor, nil];
    CGFloat gradLocs[] = { 0, 0.5, 0.9, 1 };
    CGGradientRef gradient = CGGradientCreateWithColors(colourSpace, (__bridge CFArrayRef)gradColours, gradLocs);
    CGContextDrawLinearGradient(context, gradient, CGPointMake(0, 0), CGPointMake(self.frame.size.width, 0), 0);
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colourSpace);
}

如果覆盖在您的视图上并且视图的背景为白色，则此方法有效。

Answer 3

你问题中的渐变绘图代码看起来不错，虽然我还没有测试过。我建议设置gradBegin.alpha = 0和gradEnd.alpha = 1。此外，最后一行可以简化：

CGContextDrawLinearGradient(context, gradient, rect.origin,
    CGPointMake(CGRectGetMaxX(rect), rect.origin.y, 0);

不要忘记CGGradientRelease(gradient)。

无论如何，除此之外，您需要设置overlayView.opaque = NO。

如何使用Core Graphics褪色效果？

3 个答案: