iOS CAGradientLayer 渐变图层

文章目录

CAGradientLayer 渐变图层属性介绍示例 Core Graphics 实现渐变色示例 Demo地址总结扩展阅读

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来绘制出各种形状里的渐变效果。

示例

线性渐变 首先创建一个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); 给 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); 从当前上下文获取图像并显示 // 从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示例