版权声明:本文为博主原创文章,未经博主允许不得转载。 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层