ios基础知识iOS实用技能iOS效果原理分析

Label文字渐变色

2017-05-24  本文已影响1511人  努力才幸运

之前公司有需求做文字的的渐变色,自己当时也是网上看了一些,自己写了两个方法,实现了需求,写了很久了,只是现在才想起来,就当继续学习了。

先看看简单的:

- (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文件

@implementation CFGradientLabel

.h 文件

@interface CFGradientLabel : UILabel

@property(nonatomic, strong) NSArray* colors;

@end

接下来是调用的方法,修改了一下的
[做了一个demo](https://github.com/wangtaoHappy/Label-)
做的是引导页,看看效果图如下:

![1080-1920(中文2).jpg](http:https://img.haomeiwen.com/i2775355/66325b5ec1b03d15.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![1080-1920(英文4).jpg](http:https://img.haomeiwen.com/i2775355/64de3167a9ba5618.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


那先就这样啦,欢迎指教!!
上一篇 下一篇

猜你喜欢

热点阅读