如何生成一张渐变颜色的图片

2018-03-22  本文已影响39人  SAW_

项目的UI有一些按钮的背景颜色是渐变的,如果都让UI来切图的话,还要考虑到按的大小,各个按钮大小不一致,肯定不能切一堆的图片,这时候只能代码生成渐变颜色的图片了。
一般涉及到渐变颜色的的话,官方提供了CAGradientLayer来设置,CAGradientLayer是用来生成两种或更多颜色平滑渐变的。生成一个CAGradientLayer赋值给UIView的layer,就能达到效果。代码如下

    UIView *theView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 100)];
    [self.view addSubview:theView];

    /**创建一个CAGradientLayer 对象*/
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    /**设置gradientLayer 的 Frame*/
    gradientLayer.frame = theView.bounds;
    /**
       颜色数组,默认为nil,该数组定义了每一个渐变值得颜色。
       这个数组成员接受CGColorRef类型的值,如果你愿意,colors属性可以包含很多颜色,所以创建一个彩虹一样的多重渐变也是很简单的。
       默认情况下,这些颜色在空间上均匀地被渲染,但是我们可以用locations属性来调整空间。
    */
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                             (__bridge id)[UIColor yellowColor].CGColor,
                             (__bridge id)[UIColor blueColor].CGColor];
    /**
        可选的数组,定义了每一个渐变点的位置(即定义了colors属性中每个不同颜色的位置),范围在[0,1],数组中的值必须是渐变增加,如果数组为nil,那么将均匀渐变,当渲染的时候,颜色数组值会被映射到输出颜色空间。
    */
    gradientLayer.locations = @[@(0.1f) ,@(0.4f)];
    /**
       startPoint和endPoint属性,它们决定了渐变的方向。
       startPoint就是第一个渐变点,endPoint就是最后一个渐变点。
       这两个参数是以单位坐标系进行的定义,当进行绘制内容的时候会映射到layer的矩形区域,
       左上角坐标是[0,0],右下角坐标是[1,1]。默认值是[.5,0]和[.5,1]。
    */
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 0);
    /**添加渐变色到创建的 UIView 上去*/
    [theView.layer addSublayer:gradientLayer];

我觉得做到这里应该就没问题了,但是突然发现单单这样给一个UIButton设置CAGradientLayer,显示是可以,但是这样就没法处理高亮等状态了下的效果了!!!!如果设置了UIButton的layer的话,你再设置backgroundImage的话是没有效果的。既然如此,只能还是必须用图片来设置,那就寻思能否把渐变层转换成图片。经过进一步查找资料是可以的,具体试下如下:

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = rect;
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 0);
    NSMutableArray *mutColors = [NSMutableArray arrayWithCapacity:colors.count];
    for (UIColor *color in colors) {
        [mutColors addObject:(__bridge id)color.CGColor];
    }
    gradientLayer.colors = [NSArray arrayWithArray:mutColors];
    
    UIGraphicsBeginImageContextWithOptions(gradientLayer.frame.size, gradientLayer.opaque, 0);
    [gradientLayer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

本着使用方便,给UIImage创建了个分类

/**
 生成一张渐变色的图片
 @param colors 颜色数组
 @param rect 图片大小
 @return 返回渐变图片
 */
+ (UIImage *)gradientImageWithColors:(NSArray *)colors rect:(CGRect)rect
{
    if (!colors.count || CGRectEqualToRect(rect, CGRectZero)) {
        return nil;
    }
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    
    gradientLayer.frame = rect;
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 0);
    NSMutableArray *mutColors = [NSMutableArray arrayWithCapacity:colors.count];
    for (UIColor *color in colors) {
        [mutColors addObject:(__bridge id)color.CGColor];
    }
    gradientLayer.colors = [NSArray arrayWithArray:mutColors];
    
    UIGraphicsBeginImageContextWithOptions(gradientLayer.frame.size, gradientLayer.opaque, 0);
    [gradientLayer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return outputImage;
}
上一篇下一篇

猜你喜欢

热点阅读