CAGradientLayer 渐变图层

CAGradientLayer 是 CALayer 的子类，用来制作渐变效果的图层。

属性介绍

colors //渐变颜色的数组(CGColorRef对象)
locations //渐变颜色位置，[0-1]范围，递增，数量和colors数量相等，否则无效
startPoint //渐变的起点,[0,0]-[1,1]。[0,0]是左下角，[1,1]是右上角。默认值分别为[.5,0]和[.5,1]
endPoint //渐变的终点,[0,0]-[1,1]。

示例

• 矩形渐变图层
  

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-64); //设置显示的frame
gradientLayer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor]; //设置渐变颜色
// gradientLayer.locations = @[@0.0, @0.2, @0.5]; //颜色的起点位置，递增，并且数量跟颜色数量相等
gradientLayer.startPoint = CGPointMake(0, 0); // 
gradientLayer.endPoint = CGPointMake(1, 0); // 
[self.view.layer addSublayer:gradientLayer]; //将图层添加到视图的图层上

• 不规则形状

由于 CAGradientLayer 不支持路径填充，所以只能绘制矩形的渐变。我们可以通过遮罩层 来显示不规则渐变图层，使用 CAShapeLayer 赋值给 CAGradientLayer 的 mask 属性，及可实现不规则图形的渐变效果。mask 也可以是图像等其他内容，重叠的部分会被显示，否则被隐藏。

// 获取随机数
#define getRandomNumberFromAtoB(A,B) (int)(A+(arc4random()%(B-A+1)))
// 贝塞尔曲线，生成随机路径
UIBezierPath *path = [UIBezierPath bezierPath];	
NSInteger num = 50;	
CGFloat itemWidth = [UIScreen mainScreen].bounds.size.width/num;
for (int i=0; i<=num; i++) {
    
	if (i) {
    
		[path addLineToPoint:CGPointMake(i*itemWidth, getRandomNumberFromAtoB(100, 200))];  
	}
	else{
    
		[path moveToPoint:CGPointMake(i*itemWidth, getRandomNumberFromAtoB(100, 200))];   
	}
}
[path addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width, 300)];
[path addLineToPoint:CGPointMake(0, 300)];
[path closePath];	
// 创建 ShapeLayer
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = path.CGPath;
// 设置渐变层的 mask 遮罩层
gradientLayer.mask = maskLayer;

Core Graphics 实现渐变色

CAGradientLayer 是对 Core Graphics 底层的一个面向对象的封装实现，我们直接使用 Core Graphics 来实现渐变色。Core Graphics 库中有两个方法用于绘制渐变颜色：CGContextDrawLinearGradient、CGContextDrawRadialGradient，前者可生成线性渐变，后者可生成径向渐变。Core Graphics 可以通过 CGMutablePathRef来绘制出各种形状里的渐变效果。

示例

• 线性渐变
  

1. 首先创建一个path（形状）

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, 100);
CGPathAddLineToPoint(path, NULL, [UIScreen mainScreen].bounds.size.width, 150);
CGPathAddLineToPoint(path, NULL, [UIScreen mainScreen].bounds.size.width, 400);
CGPathAddLineToPoint(path, NULL, 0, 350);
CGPathCloseSubpath(path);

2. 给 path 设置渐变效果

NSArray *colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor]; // 渐变色数组
//为了将上下文本中的内容生成图像
UIGraphicsBeginImageContext(self.view.bounds.size);
//创建CGContextRef
CGContextRef context = UIGraphicsGetCurrentContext();	// 上下文
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
//CGFloat locations[] = { 0.0, 0.3, 1.0 }; // 颜色位置设置,要跟颜色数量相等，否则无效
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, NULL);	// 渐变颜色效果设置       
//获取到起止点
CGRect pathRect = CGPathGetBoundingBox(path);
CGPoint startPoint = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMidY(pathRect));
CGPoint endPoint = CGPointMake(CGRectGetMaxX(pathRect), CGRectGetMidY(pathRect));
        
CGContextSaveGState(context);
CGContextAddPath(context, path); // 上下文添加路径
CGContextClip(context);
// 绘制线性渐变
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation);
CGContextRestoreGState(context);     
// 需要手动释放
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
CGPathRelease(path);

4. 从当前上下文获取图像并显示

// 从Context中获取图像，并显示在界面上
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:imgView];

• 径向渐变
  

NSArray *colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor]; //渐变色数组
UIGraphicsBeginImageContext(self.view.bounds.size);
//创建CGContextRef
CGContextRef context = UIGraphicsGetCurrentContext(); //上下文文本
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, NULL);	// 渐变颜色效果设置       

//获取圆心和半径
CGRect pathRect = CGPathGetBoundingBox(path);
CGPoint center = CGPointMake(CGRectGetMidX(pathRect), CGRectGetMidY(pathRect));
CGFloat radius = MAX(pathRect.size.width / 2.0, pathRect.size.height / 2.0) * sqrt(2);
        
CGContextSaveGState(context);
CGContextAddPath(context, path); //添加路径
CGContextClip(context);
//绘制径向渐变
CGContextDrawRadialGradient(context, gradient, center, 0, center, radius, kCGGradientDrawsBeforeStartLocation);
CGContextRestoreGState(context);     
//需要手动释放
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
CGPathRelease(path);

Demo地址

总结

使用 Core Graphics 实现渐变效果相对麻烦，幸好官方帮你进行了封装产生了 CAGradientLayer 渐变图层对象。有了 CAGradientLayer 对象实现渐变效果变得简单无比。

扩展阅读

• iOS CALayer介绍
• iOS CAReplicatorLayer 复制图层
• iOS CAShapeLayer示例