iOS 为UIView添加渐变色的两种方法
一、CAGradientLayer介绍
CAGradientLayer是CALayer的子类，可以直接将设置好的图层添加到UIView的layer上，使用方便。
- 方法简介
// 渐变颜色的数组(CGColorRef对象)
@property(nullable, copy) NSArray *colors;
// 渐变颜色位置，[0-1]范围，递增，数量和colors数量相等，否则无效
@property(nullable, copy) NSArray<NSNumber *> *locations;
// 渐变的起点和终点,[0,0]-[1,1]
// [0,0]是左下角，[1,1]是右上角。默认值分别为[.5,0]和[.5,1]
@property CGPoint startPoint;
@property CGPoint endPoint;
// 将绘制的渐变类型。 目前唯一允许值为“轴”（默认值）可以忽略
@property(copy) NSString *type;- 简单使用
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];2、绘制不规则形状
由于CAGradientLayer不支持路径填充，所以只能绘制矩形的渐变。但是，只要思想不滑坡，办法总比问题多，我们可以通过遮罩层 来显示不规则渐变图层。通过贝塞尔绘制相应路径，CAShapeLayer使用路径，再将CAShapeLayer赋值给CAGradientLayer的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;
// 将CAShapeLayer设置为渐变层的mask
gradientLayer.mask = maskLayer;
二、Core Graphics实现渐变色
Core Graphics中有两个方法用于绘制渐变颜色：CGContextDrawLinearGradient、CGContextDrawRadialGradient，前者可生成线性渐变，后者可生成半径方向颜色渐变。Core Graphics可以设置path，通过不同的路径来绘制出各种形状里的渐变效果。
简单使用
- 线性渐变
实现如下效果的渐变
a、首先创建一个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);b、针对这个path设置渐变效果
NSArray *colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor]; // 渐变色数组
//创建CGContextRef
UIGraphicsBeginImageContext(self.view.bounds.size);
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);c、获取图像并显示
// 从Context中获取图像，并显示在界面上
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:imgView];径向渐变
实现如下效果
a、首先创建一个path（形状）
参考线性渐变b、针对这个path设置渐变效果
NSArray *colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor]; // 渐变色数组
//创建CGContextRef
UIGraphicsBeginImageContext(self.view.bounds.size);
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);c、获取图像并显示
参考线性渐变三、Demo地址
1、demo地址；