为view添加渐变色

在实际项目中,我们不可能总是使用一成不变的背景颜色,而且那样也太难看,太单调了.最近因为项目中的需要,也在网上学习了为view添加渐变颜色的方法.

方法1是使用quartz2D,首先创建一个view,把这个view添加到控制器上,并使这个view的尺寸等于控制器的尺寸.然后在这个view的.m中的drawRect方法中,对layer层进行操作.具体代码如下:

//1.通过CAGradientLayer设置渐变的背景。CAGradientLayer的好处在于绘制使用了硬件加速.
CAGradientLayer *layer = [CAGradientLayer new];

//colors存放渐变的颜色的数组(注意:这里存放的是一个数组,可以添加多个渐变的颜色)
layer.colors=@[(__bridgeid)[UIColor colorWithRed:237/255.0green:86/255.0blue:86/255.0alpha:1].CGColor,(__bridgeid)[UIColor colorWithRed:237/255.0green:124/255.0blue:74/255.0alpha:1].CGColor,(__bridgeid)[UIColor colorWithRed:238/255.0green:129/255.0blue:72/255.0alpha:1].CGColor];

//起点和终点表示的坐标系位置，(0,0)表示左上角，(1,1)表示右下角

layer.startPoint=CGPointMake(0,0);

layer.endPoint=CGPointMake(1,0);//这样的锚点就是从左向右方向的渐变色了

//layer.locations = @[@0.8,@1];

layer.frame=self.bounds;

[self.layer addSublayer:layer];

image

方法2.

CGContextRef ctx =UIGraphicsGetCurrentContext();

CGColorSpaceRef colorSpace=CGColorSpaceCreateDeviceRGB();

/*指定渐变色

space:颜色空间

components:颜色数组,注意由于指定了RGB颜色空间，那么四个数组元素表示一个颜色（red、green、blue、alpha），

如果有三个颜色则这个数组有4*3个元素

locations:颜色所在位置（范围0~1），这个数组的个数不小于components中存放颜色的个数

count:渐变个数，等于locations的个数

*/

CGFloat compoents[12]={

0,0,0,1,

0.8,0.1,0.5,1.0,

1.0,1.0,1.0,1.0

};

//设置渐变的位置

CGFloat locations[3]={0,0.3,1.0};

//创建梯度上下文

CGGradientRef gradient=CGGradientCreateWithColorComponents(colorSpace, compoents, locations,3);

/*绘制线性渐变

context:图形上下文

gradient:渐变色

startPoint:起始位置

endPoint:终止位置

options:绘制方式,kCGGradientDrawsBeforeStartLocation开始位置之前就进行绘制，到结束位置之后不再绘制，

kCGGradientDrawsAfterEndLocation开始位置之前不进行绘制，到结束点之后继续填充

startPoint endPoint不同与上一种方法，指的是真正的坐标

*/

CGContextDrawLinearGradient(ctx, gradient,CGPointMake(self.frame.size.width/2,0),CGPointMake(self.frame.size.width/2,self.frame.size.height),kCGGradientDrawsAfterEndLocation);

//释放颜色空间

CGColorSpaceRelease(colorSpace);

image

CAGradientLayer属于QuartzCore，QuartzCore提供动画和动画显示层次功能的应用程序。

CAGradientLayer有5个属性：

colors: An array of CGColorRef

objects defining the color of each gradient stop. Animatable.

locations: An optional array of NSNumber objects defining the location of each gradient stop. Animatable.

endPoint: The end point of the gradient when drawn in the layer’s coordinate space. Animatable.

startPoint: The start point of the gradient when drawn in the layer’s coordinate space. Animatable.

type: Style of gradient drawn by the layer.

colors中设置渐变的颜色；locations中设置颜色的范围，大小在[0, 1]内，默认为平均；startPoint和endPoint设置渐变的起始位置，范围在[0, 1]内；type设置渐变样式，目前仅支持线性渐变(kCAGradientLayerAxial)。

对角线渐变，渐变范围0.0，0.2，0.5，一定要确保locations

数组和colors数组大小相同，否则会得到一个空白的渐变。

还可以添加对角线的渐变颜色,demo如下:

CAGradientLayer  *gradient = [CAGradientLayer layer];
gradient.frame = self.bounds;
gradient.colors = [NSArray arrayWithObjects: (id)[UIColor magentaColor].CGColor,  (id)[UIColor cyanColor].CGColor, (id)[UIColor greenColor].CGColor,nil];

gradient.startPoint =CGPointMake(0,0);
gradient.endPoint =CGPointMake(1,1);
gradient.locations = @[@0.0, @0.2, @0.5];
[self.layer addSublayer:gradient];

image

可以看到,执行效果还是不错的,但是方法2和方法3有一个共同的弊端,那就是当你使用xib在view添加控件之后,可能会出现有渐变色但是控件显示不出来的情况,这个也是我刚发现的问题.查看空间布局,都是对的,也没有问题,而且控件都好好的在那放着,但是运行出来,控件就无法显示了.所以,用这个方法添加渐变色的时候,最好不要用拖控件,而是手写代码.这个显示的问题还目前还没有解决,希望有会的朋友看到此文章后能不吝赐教~~~