iOS 实现颜色渐变的几个方法

最新推荐文章于 2024-09-27 08:31:54 发布

原创最新推荐文章于 2024-09-27 08:31:54 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CAGradientLayer #渐变

iOS 专栏收录该内容

167 篇文章

订阅专栏

本文介绍了在iOS中使用CAGradientLayer和Core Graphics两种方式实现颜色渐变，详细讲解了如何设置颜色、方向以及自定义形状。CAGradientLayer适合简单的线性或径向渐变，而Core Graphics则能实现更复杂的路径渐变。文中还提供了GitHub上的Demo代码供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

向来才疏学浅，之前写的内容过于简单而且有理解错误的地方，在此向各位小伙伴儿们道歉，并作更新和补充~

需要Demo的话烦请移步github：渐变色的实现方法

1. CAGradientLayer实现渐变

CAGradientLayer是CALayer的一个特殊子类，用于生成颜色渐变的图层，使用较为方便，下面介绍下它的相关属性：

colors 渐变的颜色

locations 渐变颜色的分割点

startPoint&endPoint 颜色渐变的方向，范围在(0,0)与(1.0,1.0)之间，

如(0,0)(1.0,0)代表水平方向渐变,

(0,0)(0,1.0)代表竖直方向渐变

CAGradientLayer实现渐变标间简单直观，但存在一定的局限性，比如无法自定义整个渐变区域的形状，如环形、曲线形的渐变。

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
    gradientLayer.locations = @[@0.3, @0.5, @1.0];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1.0, 0);
    gradientLayer.frame = CGRectMake(0, 20, 300, 100);
    [self.view.layer addSublayer:gradientLayer];

CAGradientLayer实现渐变标间简单直观，但存在一定的局限性，比如无法自定义整个渐变区域的形状，如环形、曲线形的渐变。

2. Core Graphics相关方法实现渐变

iOS Core Graphics中有两个方法用于绘制渐变颜色，

CGContextDrawLinearGradient可以用于生成线性渐变，

CGContextDrawRadialGradient用于生成圆半径方向颜色渐变。

函数可以自定义path，无论是什么形状都可以，原理都是用来做Clip，所以需要在CGContextClip函数前调用CGContextAddPath函数把CGPathRef加入到Context中。

另外一个需要注意的地方是渐变的方向，方向是由两个点控制的，点的单位就是坐标。

因此需要正确从CGPathRef中找到正确的点，方法当然有很多种看具体实现。

本例中，我就是简单得通过调用CGPathGetBoundingBox函数，返回CGPathRef的矩形区域，然后根据这个矩形取两个点，读者可以根据自行需求修改具体代码。

1. 线性渐变

- (void)drawLinearGradient:(CGContextRef)context
                      path:(CGPathRef)path
                startColor:(CGColorRef)startColor
                  endColor:(CGColorRef)endColor
{
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = { 0.0, 1.0 };

    NSArray *colors = @[(__bridge id) startColor, (__bridge id) endColor];

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);


    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, 0);
    CGContextRestoreGState(context);

    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}

- (void)viewDidLoad 
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    //创建CGContextRef
    UIGraphicsBeginImageContext(self.view.bounds.size);
    CGContextRef gc = UIGraphicsGetCurrentContext();

    //创建CGMutablePathRef
    CGMutablePathRef path = CGPathCreateMutable();

    //绘制Path
    CGRect rect = CGRectMake(0, 130, 300, 100);
    CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMaxY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMaxY(rect));
    CGPathCloseSubpath(path);

    //绘制渐变
    [self drawLinearGradient:gc path:path startColor:[UIColor greenColor].CGColor endColor:[UIColor redColor].CGColor];

    //注意释放CGMutablePathRef
    CGPathRelease(path);

    //从Context中获取图像，并显示在界面上
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
    [self.view addSubview:imgView];
}

2.圆半径方向渐变

- (void)drawRadialGradient:(CGContextRef)context
                      path:(CGPathRef)path
                startColor:(CGColorRef)startColor
                  endColor:(CGColorRef)endColor
{
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = { 0.0, 1.0 };

    NSArray *colors = @[(__bridge id) startColor, (__bridge id) endColor];

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);


    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);
    CGContextEOClip(context);

    CGContextDrawRadialGradient(context, gradient, center, 0, center, radius, 0);

    CGContextRestoreGState(context);

    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}

- (void)viewDidLoad 
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    //创建CGContextRef
    UIGraphicsBeginImageContext(self.view.bounds.size);
    CGContextRef gc = UIGraphicsGetCurrentContext();

    //创建CGMutablePathRef
    CGMutablePathRef path = CGPathCreateMutable();

    //绘制Path
    CGRect rect = CGRectMake(0, 240, 300, 100);
    CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMaxY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMaxY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMinY(rect));
    CGPathCloseSubpath(path);

    //绘制渐变
    [self drawRadialGradient:gc path:path startColor:[UIColor greenColor].CGColor endColor:[UIColor redColor].CGColor];

    //注意释放CGMutablePathRef
    CGPathRelease(path);

    //从Context中获取图像，并显示在界面上
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
    [self.view addSubview:imgView];
}

3. 以CAShapeLayer作为layer的mask属性

CALayer的mask属性可以作为遮罩让layer显示mask遮住(非透明)的部分；CAShapeLayer为CALayer的子类，通过path属性可以生成不同的形状，将CAShapeLayer对象用作layer的mask属性的话，就可以生成不同形状的图层。故生成颜色渐变有以下几个步骤：
生成一个imageView(也可以为layer)，image的属性为颜色渐变的图片
生成一个CAShapeLayer对象，根据path属性指定所需的形状
将CAShapeLayer对象赋值给imageView的mask属性

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self.view addSubview:self.firstCircle];
    _firstCircle.frame = CGRectMake(0, 350, 200, 200);
    CGFloat firsCircleWidth = 5;
    self.firstCircleShapeLayer = [self generateShapeLayerWithLineWidth:firsCircleWidth];
    _firstCircleShapeLayer.path = [self generateBezierPathWithCenter:CGPointMake(100, 100) radius:50].CGPath;
    _firstCircle.layer.mask = _firstCircleShapeLayer;
} 

- (CAShapeLayer *)generateShapeLayerWithLineWidth:(CGFloat)lineWidth
{
    CAShapeLayer *waveline = [CAShapeLayer layer];
    waveline.lineCap = kCALineCapButt;
    waveline.lineJoin = kCALineJoinRound;
    waveline.strokeColor = [UIColor redColor].CGColor;
    waveline.fillColor = [[UIColor clearColor] CGColor];
    waveline.lineWidth = lineWidth;
    waveline.backgroundColor = [UIColor clearColor].CGColor;

    return waveline;
}

- (UIBezierPath *)generateBezierPathWithCenter:(CGPoint)center radius:(CGFloat)radius
{
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:2*M_PI clockwise:NO];

    return circlePath;
}

- (UIImageView *)firstCircle
{
    if (!_firstCircle) {
        self.firstCircle = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"zh_buttonbg"]];
        _firstCircle.layer.masksToBounds = YES;
        _firstCircle.alpha = 1.0;
    }

    return _firstCircle;
}