ioscocoa-touchuiviewuilabelcalayer

Display UIView with a UILabel text mask


I'm trying to add a UIView to a UILabel, so that the text is the view's mask, enabling me to do things like animated text backgrounds (much like the slide to unlock label on the lockscreen).

The way I was planning on doing it was using the mask property on the view's layer to mask it to the shape of the text. However, I cannot find a way to get the UILabel's text shape as a CALayer.

Is this even possible? I can only find solutions that override the -(void)drawRect: method in the UILabel, but this wouldn't give me much flexibility.


Solution

  • UIView added the maskView property in iOS 8.0. Now, just create a UILabel to use as a mask for a UIView:

    Objective-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];
    

    Swift 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)
    

    This creates a crisp UILabel with UIColor.blueColor() color taken from overlayView.