CAGradientLayer渐变UIView

效果图：

---

代码片段：

-(void)createView

{

self.backgroundColor=[UIColor grayColor];

//渐变layer

CAGradientLayer *gradienLayer=[CAGradientLayer layer];

[self.layer addSublayer:gradienLayer];

gradienLayer.frame=CGRectMake(0, 200, self.frame.size.width, 64);

gradienLayer.colors=@[

(__bridge id)[UIColor blackColor].CGColor,

(__bridge id)[UIColor whiteColor].CGColor,

(__bridge id)[UIColor redColor].CGColor

];

gradienLayer.locations=@[@0.25,@0.5,@.75];

//渐变方向

gradienLayer.startPoint=CGPointMake(0, .5);

gradienLayer.endPoint=CGPointMake(1, .5);

}

说明：

  colors属性是设置CAGradientLayer的渐变颜色(此Demo是从黑-->白-->黑)。

locations属性是相对于colors设置的，此Demo中locations值的含义是按颜色渐变方向划分，从(0 -> 0.25)部分是黑色，从(0.25 -> 0.5)部分是黑到白的渐变过程，以此类推0.75的含义。

注意

1.CAGradientLayer默认的渐变方向是从上到下，即垂直方向。

2.colors是个NSArray类型，只能存对象，所以需要将CGColor转换一下，此属性可设置多个值(1个，2个，3个等...，都行)，此Demo的滑动解锁效果只需要两种颜色的渐变，所以设置了三个值，实际值可根据需求设置。

3.设置好colors要设置好与之相对应的locations值

4.如果要改变CAGradientLayer的渐变方向，则要显式的给startPoint

和endPoint两个属性赋值。改为水平方向，则需要改成

gradientLayer.startPoint = CGPointMake(0,0.5);          

  gradientLayer.endPoint = CGPointMake(1,0.5)

startPoint，endPoint原理解析

既然CAGradientLayer可以绘制出渐变颜色的效果，那自然有颜色渐变的方向，所以这两个属性的作用就是设置颜色渐变的起始点和结束点，这两个属性共同决定了颜色渐变的方向：