为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添加控件之后,可能会出现有渐变色但是控件显示不出来的情况,这个也是我刚发现的问题.查看空间布局,都是对的,也没有问题,而且控件都好好的在那放着,但是运行出来,控件就无法显示了.所以,用这个方法添加渐变色的时候,最好不要用拖控件,而是手写代码.这个显示的问题还目前还没有解决,希望有会的朋友看到此文章后能不吝赐教~~~
