如何使用 Core Graphics 制作渐变效果？答案

【问题标题】：How to make a fading effect with Core Graphics?如何使用 Core Graphics 制作渐变效果？
【发布时间】：2012-05-16 02:21:39
【问题描述】：

我想制作一个类似于您在此处第一个单元格右侧看到的效果：

我猜它是某种带有渐变的叠加视图，但我只是不知道它是如何配置透明度的。我尝试使用渐变制作自己的叠加视图并将颜色的 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);

此屏幕截图中究竟发生了什么，我该如何复制它？

【问题讨论】：

不就是一个 UIImageView，在单元格的内容视图之上有一个从 clearColor 到灰色的渐变吗？
将 uiimageview 放在其他视图之上，并使用具有从白色到透明渐变的 png。
我可以在没有 UIImageView 的情况下执行此操作，而只使用带有 CoreGraphics 的 UIView 吗？
你是如何在上面制作覆盖视图的，它的背景颜色是什么？
它只是一个带有浅灰色到深灰色渐变的正方形......真的没有透明度

标签： iphone objective-c ios core-graphics

【解决方案1】：

我写了一个简单的 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);
}

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

【讨论】：

【解决方案2】：

虽然这当然可以使用 Core Graphics 完成，但向项目中添加具有适当宽度和 1 像素高度的透明 PNG，然后在表格单元格中的内容上方放置 UIImageView 以创建此效果会非常容易.

【讨论】：

我讨厌 PNG 的 :( 有这么多不同的分辨率我必须渲染为..如果我想进行更改，我必须返回并调整所有图像的大小..这样会方便得多CG
它最小化文件大小并且可以拉伸到任何高度。使用按比例填充内容模式。
酷，好吧，让 PNG 方法工作。还不错。如果有人提出 Core Graphics 解决方案，那将会很有趣……

【解决方案3】：

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

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

别忘了CGGradientRelease(gradient)。

不管怎样，除此之外，你需要设置overlayView.opaque = NO。

【讨论】：

即使我使用 ARC，我通常也必须发布大多数 CG 内容吗？
是的，除非你将它桥接到一个 Cocoa 对象。