在drawRect中向UIView添加渐变答案

【问题标题】：adding gradient to UIView in drawRect在drawRect中向UIView添加渐变
【发布时间】：2012-06-05 20:07:14
【问题描述】：

我正在尝试在我的drawRect中添加一个CAGradientLayer，代码如下：

- (void)drawRect:(CGRect)rect {

    CAGradientLayer *gradientOverlay = [CAGradientLayer layer];
    CGColorRef grayColor = [UIColor colorWithRed:37/255.f green:37/255.f 
                                            blue:37/255.f alpha:1.0].CGColor; 
    CGColorRef blueColor = [UIColor colorWithRed:23.0/255.0 green:171.0/255.0 
                                            blue:219.0/255.0 alpha:1.0].CGColor;
    gradientOverlay.colors = [NSArray arrayWithObjects:
                              (id) grayColor,
                              (id) grayColor,
                              (id) blueColor,
                              nil];
    gradientOverlay.locations = [NSArray arrayWithObjects:
                                 [NSNumber numberWithFloat:0],
                                 [NSNumber numberWithFloat:0.4],
                                 [NSNumber numberWithFloat:1],
                                 nil];

    CGPoint startPoint = CGPointMake(CGRectGetMinX(rect), CGRectGetMidY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMaxX(rect), CGRectGetMidY(rect));

    gradientOverlay.startPoint = startPoint;
    gradientOverlay.frame = self.bounds;
    gradientOverlay.endPoint = endPoint;

    self.layer.mask = gradientOverlay;

}

知道为什么这不起作用吗？

【问题讨论】：

没有。 “不工作”是什么意思？
可能是因为您将渐变设置为蒙版。遮罩层用于以自定义方式剪辑可见性，例如圆角......它不会显示它设置的任何层。编辑：尝试将其添加为子层。
您似乎在复制和粘贴代码而没有真正理解它。这不是成功的秘诀……

标签： objective-c ios graphics gradient

【解决方案1】：

试试这个而不是覆盖drawRect怎么样？

+ (void) applyGradient:(NSArray *)cgColors toView:(UIView *)view {
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = view.bounds;
    gradient.colors = cgColors;
    for(CALayer *layer in view.layer.sublayers) {
        if([layer isKindOfClass:[CAGradientLayer class]]) return;
    }
    [view.layer insertSublayer:gradient atIndex:0];
}

【讨论】：

您应该在创建 CAGradientLayer 之前对其进行检查。这一半没有达到目的。
+1 这是对我有用的解决方案。简单有效，谢谢！

【解决方案2】：

将您的CAGradientLayer 添加为您的self.layer 的子层。
注意：如果您在 drawRect: 方法中执行此操作，请确保您不会在每次调用 drawRect: 时都添加新的 CAGradientLayer。

UPDATE（关于评论）：这是您所要求的代码：

    //Create a layer that holds your background image and add it as sublayer of your self.layer
    CALayer *layer = [CALayer layer];
    layer.frame = self.layer.frame;
    layer.contents = (id)[UIImage imageNamed:@"background.png"].CGImage;
    [self.layer addSublayer:layer];

//Create your CAGradientLayer
    CAGradientLayer *gradientOverlay = [CAGradientLayer layer];
    CGColorRef grayColor = [UIColor colorWithRed:37/255.f green:37/255.f 
                                            blue:37/255.f alpha:1.0].CGColor; 
    CGColorRef blueColor = [UIColor colorWithRed:23.0/255.0 green:171.0/255.0 
                                            blue:219.0/255.0 alpha:1.0].CGColor;
    gradientOverlay.colors = [NSArray arrayWithObjects:
                              (id) grayColor,
                              (id) grayColor,
                              (id) blueColor,
                              nil];
    gradientOverlay.locations = [NSArray arrayWithObjects:
                                 [NSNumber numberWithFloat:0],
                                 [NSNumber numberWithFloat:0.4],
                                 [NSNumber numberWithFloat:1],
                                 nil];

    CGPoint startPoint = CGPointMake(CGRectGetMinX(rect), CGRectGetMidY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMaxX(rect), CGRectGetMidY(rect));

    gradientOverlay.startPoint = startPoint;
    gradientOverlay.frame = self.layer.frame;
    gradientOverlay.endPoint = endPoint;
//set its opacity from 0 ~ 1
    gradientOverlay.opacity = 0.6f;
//add it as sublayer of self.layer (it will be over the layer with the background image
    [self.layer addSublayer:gradientOverlay];

注意：您不必在drawRect: 方法中执行此操作。例如，在init 方法中创建图层层次结构，如果您需要更改某些视图/图层的几何形状，请覆盖layoutSubviews 方法。

【讨论】：

hmm.. 是否可以让渐变具有透明度？我有一个使用 CG 绘制的图像，当我执行 addsublayer 时，我看不到它后面绘制的图像
还有一件小事，我已经将渐变指定为 3 种不同的颜色。但是我只看到渐变的灰色
您可能需要使用这些值，尤其是当有背景图像时。先在白色背景上尝试，然后在后面的图像上尝试...
我试过没有图像，我看到的只是灰色
哦，是的，抱歉，CAGradientLayer 的 startPoint 和 endPoint 在单位坐标系中 - 它们的值在 0 和 1 之间，默认为 startPoint是 {0.5, 0.0}，endPoint 是 {0.5, 1.0}

【解决方案3】：

一般来说，您应该只在使用 CoreGraphics 绘制视图时覆盖 drawRect:。

如果您在代码中创建此视图，则放置代码的更好位置是init，或者如果您将此视图放置在 .xib 中，则放置在 awakeFromNib 中

【讨论】：