项目需要,需要在图片上显示文字,但是文字的颜色很难控制,有时候与背景图的颜色很接近导致文字难以看清楚,可以通过将图片上显示文字的地方加一层黑色的半透明的背景色来解决这个问题。将这层背景色做成从黑色到透明的渐变。
比如这样一张图,我需要在低端加上介绍文字
可以看到底下变得更黑了,文字更加清楚。
CAGradientLayer都可以干什么?
Gradient:本身就是梯度的意思,所以在这里就是作为渐变色来理解
1,CAGradientLayer用于处理渐变色的层结构
2,CAGradientLayer的渐变色可以做隐式动画
3,大部分情况下,CAGradientLayer时和CAShapeLayer配合使用的。
4,我们常用CAGradientLayer作PNG的遮罩效果
关于CAGradientLayer的坐标系统
为什么要提到CAGradientLayer的坐标系统呢?
因为渐变色的作用范围,变化梯度的方向,颜色变换的作用点都和CAGradientLayer的坐标系统有关
根据上图的坐标,设定好起点和终点,渐变色的方向就会根据起点指向终点的方向来渐变了。
1,CAGradientLayer的坐标系统是从(0,0)到(1,1)绘制的矩形
2,CAGradientLayer的frame值的size不为正方形的话,坐标系统会被拉伸
3,CAGradientLayer的startPoint和endPoint会直接决定颜色的绘制方向
4,CAGradientLayer的颜色分割点时以0到1的比例来计算的
实现方式主要使用了CAGradientLayer。先在ImageView的底端加一个UIView,并在这个UIView上插入一个从透明到黑色的CAGradientLayer,然后再UIView上插入一个Label就行了。
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 初始化图片
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.jpg"]];
imageView.frame = CGRectMake(0, 100, self.view.frame.size.width, 200);
[self.view addSubview:imageView];
// 初始化渐变层
self.gradientLayer = [CAGradientLayer layer];
self.gradientLayer.frame = imageView.bounds;
[imageView.layer addSublayer:self.gradientLayer]; // 要把它加在底部图片的layer上
// 设置颜色组
self.gradientLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor clearColor] CGColor], (id)[[UIColor blackColor] CGColor], nil];
// 设置起点和终点坐标,视情况而定
self.gradientLayer.startPoint = CGPointMake(0.2, 0.2);
self.gradientLayer.endPoint = CGPointMake(0.2, 2.0);
// 如果阴影要在图片上面到下面, 可以调整它的坐标
// self.gradientLayer.startPoint = CGPointMake(0, 0);
// self.gradientLayer.endPoint = CGPointMake(0, 1);
[imageView.layer insertSublayer:self.gradientLayer above:0];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 150, 320, 30)];
label.text = @"这是我的测试文字";
label.textColor = [UIColor whiteColor];
[imageView addSubview:label];
}