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可以绘制出渐变颜色的效果,那自然有颜色渐变的方向,所以这两个属性的作用就是设置颜色渐变的起始点和结束点,这两个属性共同决定了颜色渐变的方向:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容