如何使用Core Graphics实现渐隐效果？

Question

我希望制作一个类似于这里第一个单元格右侧所见的效果：

我猜它是某种覆盖层视图，带有渐变效果，但我就是想不出如何配置透明度。我尝试使用渐变创建自己的覆盖层视图并将颜色的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);

这张截图究竟在发生什么事情，我该如何复制它？

- Snowman

---

这不就是一个UIImageView，它在单元格的内容视图顶部具有从透明到灰色的渐变效果吗？ - Zoleas

你是如何制作你的覆盖视图的，它的背景颜色是什么？ - jrturton

它只是呈现为一个带有从浅灰到深灰的渐变的正方形..没有透明度。 - Snowman

我尝试使用UIColor clearColor进行渐变，但结果只是黑色。 - Snowman

这段代码运行良好。我遇到了淡出问题，于是我很快写了测试代码。我将在另一个答案中展示我的清单。 - Cthutu

Answer 1

虽然可以使用Core Graphics来完成这个任务，但是通过添加一个透明的PNG图片到你的项目中，它的宽度应该是合适的，高度只有1像素。然后在表格单元格上方定位一个UIImageView来创建这个效果会更加容易。

- Alex

---

我讨厌PNG :( 我必须渲染那么多不同的分辨率..如果我想要做出改变，我必须回去重新调整所有的图像..在CG中会更方便。 - Snowman

它可以最小化文件大小，并且可以拉伸到任何高度。使用“缩放填充”内容模式。 - Alex

酷，很好，已经成功运行PNG方法了。并不太难。如果有人提出核心图形解决方案，会很有趣去看看。 - Snowman

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);
}

如果叠加在您的视图上并且视图的背景是白色，则此方法有效。

- Cthutu

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。

- rob mayoff

---

即使我使用ARC，我通常是否需要释放大多数CG内容？ - Snowman

是的，除非您将其桥接到Cocoa对象。 - Cthutu