最近自定义一个视图需要添加遮罩,使看上去柔和一些。
说明:控制器页面整体有个背景图
未加遮罩如下图绿色(上下)框所示:
法一:addSublayer:
上下添加遮罩layer
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// textView
YYTextView *textView = [[YYTextView alloc] init];
textView.showsVerticalScrollIndicator = NO;
[self addSubview:textView];
self.textView = textView;
// 上下蒙层 渐变
CAGradientLayer *layer = [CAGradientLayer layer];
layer.frame = self.bounds;
// 渐变方向
layer.startPoint = CGPointMake(0, 0);
layer.endPoint = CGPointMake(0, 1);
// 设定颜色组
layer.colors = @[
(__bridge id)[UIColor colorWithWhite:1 alpha:1.0f].CGColor, // 白色 不透明
(__bridge id)[UIColor colorWithWhite:1 alpha:0.0f].CGColor, // 透明
(__bridge id)[UIColor colorWithWhite:1 alpha:0.0f].CGColor, // 透明
(__bridge id)[UIColor colorWithWhite:1 alpha:1.0f].CGColor // 白色 不透明
];
// 设定颜色的分割点 必须递增
layer.locations = @[@0, @0.1, @0.9, @1.0];
//实际上->下显示:不透明->透明->透明->不透明
[self.layer addSublayer:layer];
}
return self;
}
上->下:不透明->透明->透明->不透明 看上去应该就是我们需要的,运行如下所示:
显然:不是我们想要的,与大背景图完全不融合。
所以,如果 没有背景图的话且上下视图全是白色backgroundColor的话,这样做是完全没问题的。(或者其他颜色,只要背景色与layer的colors的主色相同即可)
法二:self.layer.mask
上下添加遮罩layer
// 上下蒙层 渐变
CAGradientLayer *layer = [CAGradientLayer layer];
layer.frame = self.bounds;
// 渐变方向
layer.startPoint = CGPointMake(0, 0);
layer.endPoint = CGPointMake(0, 1);
// 设定颜色组
layer.colors = @[
(__bridge id)[UIColor colorWithWhite:1 alpha:0.0f].CGColor, // 代码透明
(__bridge id)[UIColor colorWithWhite:1 alpha:1.0f].CGColor, // 代码不透明
(__bridge id)[UIColor colorWithWhite:1 alpha:1.0f].CGColor, // 代码不透明
(__bridge id)[UIColor colorWithWhite:1 alpha:0.0f].CGColor // 代码透明
];
// 设定颜色的分割点 必须递增
layer.locations = @[@0, @0.1, @0.9, @1.0];
// 实际上->下显示:不透明->透明->透明->不透明!!!! 解释如下
self.layer.mask = layer;
运行如下图所示:
显然是我们所希望的,与背景完全融合在一起。
这里说明一下mask的属性,mask的属性很简单,例如:view上加了一层imageView,如果imageView.layer.mask = layerA,那么layerA上不透明的部分将会被绘制成透明,透明的部分将会把imageView.layer绘制成白色(与“ 代码透明”、“代码不透明”相反)