前言
前一段时间公司有需求做文字的的渐变色，自己当时也是网上看了一些，自己写了两个方法，实现了需求，写了很久了，只是现在才想起来，就当继续学习了。分享出来供大家参考学习，下面来看看详细的介绍：
先看看简单的：
|
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