使用 UILabel 文本掩码显示 UIView

Question

我正在尝试将

UIView

添加到

UILabel

，以便文本成为视图的遮罩，使我能够执行诸如动画文本背景之类的操作（很像在锁屏上解锁标签的幻灯片）。

我计划这样做的方式是使用视图的

mask

上的

layer

属性将其掩盖到文本的形状。但是，我找不到一种方法将

UILabel

的文本形状设为

CALayer

。

这可能吗？我只能找到覆盖

-(void)drawRect:

中的

UILabel

方法的解决方案，但这不会给我太大的灵活性。

Answer 1

UIView

在iOS 8.0中添加了

maskView

属性。现在，只需创建一个

UILabel

用作

UIView

的遮罩：

目标-C：

UILabel *label = [[UILabel alloc] initWithFrame:self.view.frame];
label.text = @"Label Text";
label.font = [UIFont systemFontOfSize:70];
label.textAlignment = NSTextAlignmentCenter;
label.textColor = [UIColor whiteColor];

UIView *overlayView = [[UIView alloc] initWithFrame:self.view.frame];
overlayView.backgroundColor = [UIColor blueColor];
overlayView.maskView = label;
[self.view addSubview:overlayView];

斯威夫特2：

let label = UILabel.init(frame: view.frame)
label.text = "Label Text"
label.font = UIFont.systemFontOfSize(70)
label.textAlignment = .Center
label.textColor = UIColor.whiteColor()

let overlayView = UIView.init(frame: view.frame)
overlayView.backgroundColor = UIColor.blueColor()
overlayView.maskView = label
    
view.addSubview(overlayView)

这将创建一个清晰的

UILabel

，其

UIColor.blueColor()

颜色取自

overlayView

。

Answer 2

如果您针对 iOS 8+ 进行构建，

mopsled 的解决方案 会更加灵活。但是，如果您正在寻找 iOS 8 之前的答案，这里就是。

---

感谢 Linuxios 向我指出这个问题。关键是使用

CATextLayer

而不是

UILabel

。

目标-C：

CGRect textRect = {0, 100, self.view.frame.size.width, 100}; // rect to display the view in

CATextLayer *textMask = [CATextLayer layer];
textMask.contentsScale = [UIScreen mainScreen].scale; // sets the layer's scale to the main screen scale
textMask.frame = (CGRect){CGPointZero, textRect.size};
textMask.foregroundColor = [UIColor whiteColor].CGColor; // an opaque color so that the mask covers the text
textMask.string = @"Text Mask"; // your text here
textMask.font = (__bridge CFTypeRef _Nullable)([UIFont systemFontOfSize:30]); // your font here
textMask.alignmentMode = kCAAlignmentCenter; // centered text

UIView* view = [[UIView alloc] initWithFrame:textRect];
view.backgroundColor = [UIColor blueColor];
view.layer.mask = textMask; // mask the view to the textMask
[self.view addSubview:view];

斯威夫特：

let textRect = CGRect(x: 0, y: 100, width: view.frame.size.width, height: 100) // rect to display the view in

let textMask = CATextLayer()
textMask.contentsScale = UIScreen.mainScreen().scale // sets the layer's scale to the main screen scale
textMask.frame = CGRect(origin: CGPointZero, size: textRect.size)
textMask.foregroundColor = UIColor.whiteColor().CGColor // an opaque color so that the mask covers the text
textMask.string = "Text Mask" // your text here
textMask.font = UIFont.systemFontOfSize(30) // your font here
textMask.alignmentMode = kCAAlignmentCenter // centered text

let bgView = UIView(frame: textRect)
bgView.backgroundColor = UIColor.blueColor()
bgView.layer.mask = textMask // mask the view to the textMask
view.addSubview(bgView)

Answer 3

我创建自定义 maskLabel。

检查答案 https://stackoverflow.com/a/47105664/7371852

这就是结果。