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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 给View添加渐变色的方法有多种,这里采用CAGradientLayer来实现渐变效果。CAGradientLay...
    AprSnow阅读 16,775评论 1 20
  • 很多人都说,宝宝太小,不适合旅行。因为她去了也记不住。其实,旅行带给孩子的记忆非常深刻,即使将来的某一天她说不出来...
    妈咪私塾阅读 242评论 7 18
  • 1.你目前为止的主要投资在哪里?(自住房除外)为什么这样做?你的投资依据、理念是怎样的? 银行理财和股市。前年入股...
    Aero小白阅读 255评论 4 3