前言
前一段时间公司有需求做文字的的渐变色，自己当时也是网上看了一些，自己写了两个方法，实现了需求，写了很久了，只是现在才想起来，就当继续学习了。分享出来供大家参考学习，下面来看看详细的介绍：
先看看简单的：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
- (void)addgradientrampwithcolors:(nsarray *)colors text:(nsstring *)text { //label在父视图上的（x，y）的值不是中心点 cgpoint point = cgpointmake(30, 500); uilabel *label = [[uilabel alloc]init]; label.text = text; label.font = [uifont systemfontofsize:20]; // label.textalignment = nstextalignmentcenter; [label sizetofit]; //label的中心和想象的一样啦！！ label.center = cgpointmake(point.x + cgrectgetwidth(label.bounds)/2, point.y - cgrectgetheight(label.bounds)/2); [self.view addsubview:label]; //这个label是和上面的label是对齐的哦，之前都不好对齐，用这样的方法设置frame就好了// uilabel *infotextlabel = [[uilabel alloc] init];// infotextlabel.frame = cgrectmake(label.center.x - cgrectgetwidth(label.bounds)/2 ,point.y + 30, 220, 50);// infotextlabel.text = @"你说的是哦";// infotextlabel.font = [uifont systemfontofsize:20];// infotextlabel.backgroundcolor =[uicolor redcolor];// infotextlabel.numberoflines = 0;// infotextlabel.textalignment = nstextalignmentleft;// infotextlabel.textcolor = [uicolor bluecolor];// [infotextlabel sizetofit];// [self.view addsubview:infotextlabel]; //在后面添加渐变图层 cagradientlayer *gradientlayer = [cagradientlayer layer]; gradientlayer.frame = label.frame; gradientlayer.colors = colors; //渐变的方向（0，0） （0，1） （1，0）（1，1）为四个顶点方向 //(i.e. [0,0] is the bottom-left // corner of the layer, [1,1] is the top-right corner.) the default values // are [.5,0] and [.5,1] gradientlayer.startpoint = cgpointmake(0, 1); gradientlayer.endpoint = cgpointmake(1, 1); [self.view.layer addsublayer:gradientlayer]; gradientlayer.mask = label.layer; label.frame = gradientlayer.bounds;} |
自己觉得这样的方法用起来不是很方便，所以接下来是另一种方法：
.m文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
@implementation cfgradientlabel- (void)drawrect:(cgrect)rect { cgsize textsize = [self.text sizewithattributes:@{nsfontattributename : self.font}]; cgrect textrect = (cgrect){0, 0, textsize}; // 画文字(不做显示用, 主要作用是设置 layer 的 mask) cgcontextref context = uigraphicsgetcurrentcontext(); [self.textcolor set]; [self.text drawwithrect:rect options:nsstringdrawinguseslinefragmentorigin attributes:@{nsfontattributename : self.font} context:null]; // 坐标(只对设置后的画到 context 起作用, 之前画的文字不起作用) cgcontexttranslatectm(context, 0.0f, rect.size.height - (rect.size.height - textsize.height) * 0.5); cgcontextscalectm(context, 1.0f, -1.0f); cgimageref alphamask = cgbitmapcontextcreateimage(context); cgcontextclearrect(context, rect); // 清除之前画的文字 // 设置mask cgcontextcliptomask(context, rect, alphamask); // 画渐变色 cgcolorspaceref colorspace = cgcolorspacecreatedevicergb(); cggradientref gradient = cggradientcreatewithcolors(colorspace, (__bridge cfarrayref)self.colors, null); cgpoint startpoint = cgpointmake(textrect.origin.x, textrect.origin.y); cgpoint endpoint = cgpointmake(textrect.origin.x + textrect.size.width, textrect.origin.y + textrect.size.height); cgcontextdrawlineargradient(context, gradient, startpoint, endpoint, kcggradientdrawsbeforestartlocation | kcggradientdrawsafterendlocation); // 释放内存 cgcolorspacerelease(colorspace); cggradientrelease(gradient); cfrelease(alphamask);} |
.h 文件
|
1
2
3
4
5
|
@interface cfgradientlabel : uilabel@property(nonatomic, strong) nsarray* colors;@end |
接下来是调用的方法，修改了一下的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
- (void)addgradientlabelwithframe:(cgpoint)point gradienttext:(nsstring *)text infotext:(nsstring *)infotext colors:(nsarray *)colors font:(uifont *)font { static nsinteger labeltag = 200; cfgradientlabel *lable = [[cfgradientlabel alloc] init]; lable.text = text; lable.font = font; lable.tag = labeltag; lable.textalignment = nstextalignmentcenter; [lable sizetofit]; //之前项目的时候设置了为0，忘了注释，所以有的小伙伴用的时候就不显示了……(^-^)// lable.alpha = 0; lable.center = point; lable.colors = colors; [self.view addsubview:lable];} |
做的是引导页，看看效果图如下：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。
原文链接：http://www.jianshu.com/p/7b4f8892c39a
