IOS 实现View背景渐变

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/HeroGuo_JP/article/details/88417912

在某些特定情况下，我们希望使用渐变背景视图。这里总结，实现渐变背景有三种不同的方法:CAGradientLayer、CGGradient和CoreImage。

要定义渐变颜色，我们至少有四个属性:

    @property (nonatomic) CGPoint inputPoint0;
    @property (nonatomic) CGPoint inputPoint1;
    @property (nonatomic) UIColor *inputColor0;
    @property (nonatomic) UIColor *inputColor1;

这两个CGPoint属性定义渐变颜色开始和结束的位置。它们定义在一个单位坐标空间中，其中(0,0)在左上角，(1,1)在右下角。两个UIColor属性定义了开始颜色和结束颜色。

1、CAGradientLayer

我们不打算讨论如何使用CAGradientLayer的细节。有一篇关于它的好文章:http://www.cnblogs.com/YouXianMing/p/3793913.html。

     CAGradientLayer *layer = [CAGradientLayer new];
     layer.colors = @[(__bridge id)_inputColor0.CGColor, (__bridge id)_inputColor1.CGColor];
     layer.startPoint = _inputPoint0;
     layer.endPoint = _inputPoint1;
     layer.frame = self.bounds;           
     [self.layeraddSublayer:layer];

2、CGGradientRef

关于核心图形和核心图像，请参考这里，一篇非常非常好的文章:
http://www.techotopia.com/index.php/An_iOS_7_Graphics_Tutorial_using_Core_Graphics_and_Core_Image
注意，CAGradientLayer使用的是单位坐标空间，而Core Graphics和Core Image则没有。更有趣的是，Core Graphics的坐标空间(0,0)从左上角开始与Core Image的坐标空间(0,0)从左下角开始不同。
下面的代码在drawRect:中调用：

     CGContextRef context = UIGraphicsGetCurrentContext();
     UIGraphicsPushContext(context);
     
     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
     CGFloat locations[] = {0,1};
     NSArray *colors = @[(__bridge id)_inputColor0.CGColor, (__bridge id)_inputColor1.CGColor];
     CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef) colors, locations);
     CGColorSpaceRelease(colorSpace);
     
     CGPoint startPoint = (CGPoint){rect.size.width * _inputPoint0.x, rect.size.height * _inputPoint0.y};
     CGPoint endPoint = (CGPoint){rect.size.width * _inputPoint1.x, rect.size.height * _inputPoint1.y};
     CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
       
     CGGradientRelease(gradient);
     UIGraphicsPopContext();

3、 Core Image

核心代码如下：

      CIFilter *ciFilter = [CIFilter filterWithName:@"CILinearGradient"];
      CIVector *vector0 = [CIVector vectorWithX:rect.size.width * _inputPoint0.x Y:rect.size.height * (1 - _inputPoint0.y)];
      CIVector *vector1 = [CIVector vectorWithX:rect.size.width * _inputPoint1.x Y:rect.size.height * (1 - _inputPoint1.y)];
      [ciFilter setValue:vector0 forKey:@"inputPoint0"];
      [ciFilter setValue:vector1 forKey:@"inputPoint1"];
      [ciFilter setValue:[CIColor colorWithCGColor:_inputColor0.CGColor] forKey:@"inputColor0"];
      [ciFilter setValue:[CIColor colorWithCGColor:_inputColor1.CGColor] forKey:@"inputColor1"];
       
      CIImage *ciImage = ciFilter.outputImage;
      CIContext *con = [CIContext contextWithOptions:nil];
      CGImageRef resultCGImage = [con createCGImage:ciImage
                                             fromRect:rect];
      UIImage *resultUIImage = [UIImage imageWithCGImage:resultCGImage];
      CGImageRelease(resultCGImage);
       
      [resultUIImage drawInRect:rect];

Demo：

- (void)setGradientLayer:(UIColor*)startColor endColor:(UIColor*)endColor{
    //初始化CAGradientlayer对象，使它的大小为UIView的大小
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.bounds;
    
    //将CAGradientlayer对象添加在我们要设置背景色的视图的layer层
    [self.layer addSublayer:gradientLayer];
    
    //设置渐变区域的起始和终止位置（范围为0-1）
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1);
    
    //设置颜色数组
    //    gradientLayer.colors = @[(__bridge id)[UIColor blueColor].CGColor,
    //                                  (__bridge id)[UIColor redColor].CGColor];
    gradientLayer.colors = @[(__bridge id)startColor.CGColor,
                             (__bridge id)endColor.CGColor];
    
    //设置颜色分割点（范围：0-1）
    gradientLayer.locations = @[@(0.5f), @(1.0f)];
}

用法

UIView *theView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
[self.view addSubview:theView];
[self.view setGradientLayer:mRGBColor(0, 226, 154) endColor:mRGBColor(0, 137, 108)];

注意：

渐变区域的范围是 (0,0) -> (1,1)
渐变层要添加在需要渐变视图的layer层