iOS文字遮罩的实现及浅析
2021-07-13 本文已影响0人
颠趴高手
前言
最近忙着公司的项目,零零散散的功能以及Flutter的研发,导致简书有两年时间没更新了。今天趁着闲暇时间,把前段时间项目里涉及到的遮罩拿出来分享。网络上的方式层出不穷甚至过于复杂,本人就带来个简化后的实现方式(不是什么高超技术,望大佬们高抬贵手哈)。
示意图
遮罩前 遮罩后实现方式
- UI布局
// 文字内容底部渐变
UIView *gradientView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 350, 200)];
[self.view addSubview:gradientView];
// 文字内容
UITextView *textView = [[UITextView alloc] initWithFrame:gradientView.bounds];
textView.backgroundColor = UIColor.clearColor;
textView.selectable = NO;
textView.textColor = UIColor.whiteColor;
textView.text = @"这是第1行文字。。。\n这是第2行文字。。。\n这是第3行文字。。。\n这是第4行文字。。。\n这是第5行文字。。。\n这是第6行文字。。。\n这是第7行文字。。。\n这是第8行文字。。。\n这是第9行文字。。。\n这是第10行文字。。。\n这是第11行文字。。。\n这是第12行文字。。。\n这是第13行文字。。。\n这是第14行文字。。。\n这是第15行文字。。。\n这是第16行文字。。。";
[gradientView addSubview:textView];
[self updateGradientLayer:gradientView];
- 实现渐变图层
/// 更新渐变图层
- (void)updateGradientLayer:(UIView *)gradientView {
NSObject *transparent = (NSObject*)[UIColor.clearColor CGColor];
NSObject *opaque = (NSObject*)[UIColor.blackColor CGColor];
CALayer *maskLayer = [CALayer layer];
maskLayer.frame = gradientView.bounds;
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = maskLayer.bounds;
gradientLayer.colors = @[opaque, opaque, transparent];
gradientLayer.locations = @[@(0), @(0.857), @(1)];
gradientLayer.startPoint = CGPointMake(0.5, 0);
gradientLayer.endPoint = CGPointMake(0.5, 1);
[maskLayer addSublayer:gradientLayer];
gradientView.layer.mask = maskLayer;
}
浅析
代码其实还是很简单的,一对父子关系的控件+渐变图层的实现,即可完成此功能。接下来做个简单的分析:
- 给需要加遮罩效果的视图增加一个父级View,为了让此容器内的所有控件都具有统一的遮罩效果;也是为了保证TextView能保持正常滚动。因为如果给TextView的layer增加遮罩的话,将会导致遮罩层跟着一起滚动,影响实际效果。
- CAGradientLayer的编写。CAGradientLayer是个线性的图层,经常用于渐变色效果。
colors:渐变色的颜色节点;
locations:颜色节点的位置,取值范围[0,1];
startPoint、endPoint:起始点与结束点,可通过参数实现是水平、垂直还是斜向; - layer.mask。给gradientLayer增加一层遮罩。
maskLayer透明的地方,gradientLayer就不会渲染,而是变透明,显示出gradientLayer之后的内容;
maskLayer不透明的地方,gradientLayer就会正常渲染。
Demo
多谢支持!