iOS 为UIView添加渐变色的两种方法

版权声明:欢迎大家留言学习交流,若要转载请注明出处。 https://blog.csdn.net/LOLITA0164/article/details/74975570

一、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地址

阅读更多

没有更多推荐了,返回首页