如何生成一张渐变颜色的图片
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;
}