iOS-背景图层的颜色渐变效果

• 呃，图拿错了 = =

• 回到正题 ----> 项目中偶尔会遇到cell背景渐变或者view背景渐变的界面需求，偷懒解决的方法就是让UI妹纸给切个图拿来就用。但是如果项目中需要的渐变色比较多的话，显然切图是很不合适的，也容易使得项目的体积冗余。

• 创建一个背景View，重写drawRect方法

• 关于CGContextRef有一篇博客介绍的还不错 - 传送门---其中原博中的有些方法因版本过久被废弃了，修改了之后的Demo.

- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
    
    // 创建起点的颜色
    
    CGColorRef beginColor = CGColorCreate(colorSpaceRef, (CGFloat[]){1.0f,1.0f,1.0f,1.0f});
    
    CGColorRef endColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.83f, 0.83f, 0.83f, 1.0f});
    
    CGRect paperRect = self.bounds;
    
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    
    CGFloat locations[] = {0.0,1.0};
    
    NSArray *colors = [NSArray arrayWithObjects:(__bridge id)beginColor,(__bridge id)endColor, nil];
    
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)CFBridgingRetain(colors), locations);
    
    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
    
    CGContextSaveGState(context);
    
    CGContextAddRect(context, rect);
    
    CGContextClip(context);
    
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    
    CGContextRestoreGState(context);
    
    CGGradientRelease(gradient);
    
    CGColorSpaceRelease(colorSpace);
    
    // add line stroke
    
    CGRect strokeRect = CGRectInset(paperRect, 5.0, 5.0);
    
    CGColorRef lineColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.81,0.43,0.99,1.0f});
   
    CGContextSetStrokeColorWithColor(context, lineColor);
    
    CGContextSetLineWidth(context, 0.5);
    
    CGContextStrokeRect(context, strokeRect);
    
}

• 然后将cell.backgroundView设置为我们创建的渐变View就可以了。

制作成GIF图后会感觉有些分层，实际中并没有

• 还有一个渐变的写法，导入类库quartcore并#import ，这个就不属于在context上画，而是将图层插入到view层上面。那么这里就涉及到Quartz Core 图层编程了。

    CAGradientLayer *_gradientLayer = [CAGradientLayer layer];

    _gradientLayer.bounds = cell.contentView.bounds;

    _gradientLayer.borderWidth = 0;

    _gradientLayer.frame = cell.contentView.bounds;

    _gradientLayer.colors = [NSArray arrayWithObjects:
                             (id)[[UIColor clearColor] CGColor],
                             (id)[[UIColor blackColor] CGColor],nil];

    _gradientLayer.startPoint = CGPointMake(0.5, 0.5);

    _gradientLayer.endPoint = CGPointMake(0.5, 1.0);

    [cell.contentView.layer insertSublayer:_gradientLayer atIndex:0];

这个渐变的就比较刺眼了。。。当然尺寸小的话视觉效果还是不错的

具体可以查看上面的[Demo](https://github.com/zHfUmR/CGContextRefTest)