How to mask a UILabel in iOS - Objective-C - objective-c

Question

I want to sub-class a UIView and place four UILabels over top one another ; top label will be the MASK, 2nd label will be a normal label with text, the 3rd label is a label with solid background with no text. the bottom label will the same as the top 2nd label with a different color font. when i sent the width of the third label it will cover up the bottom label showing a partial view of the text. I want to have the 2nd text be one color while the uncoverd bottom label display another color font.
Is this possibe? If someone can explain how to mask in objective-C that will help too.
I trying to build a UIView that acts like a progress bar, as the bar fill to 60%, I want to top text to show in white font color, when the bottom text shows in a different color.

Answer 1

You could do it with two UILabels, one on the bottom, and one embedded in another view on top.
UILabel *bottomLabel = ...;
[self.view addSubview:bottomLabel];
UIView *topContainer = [[UIView alloc] initWithFrame:bottomLabel.frame];
topContainer.clipsToBounds = YES;
topContainer.opaque = NO;
topContainer.backgroundColor = [UIColor clearColor];
UILabel *topLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, bottomLabel.frame.size.width, bottomLabel.frame.size.height)];
topLabel.text = bottomLabel.text;
topLabel.opaque = NO;
topLabel.backgroundColor = [UIColor clearColor];
[topContainer addSubview:topLabel];
[self.view addSubview:topContainer];
Then, when you want to change the progress, you'd set the width of topContainer. This should clip topLabel.

Answer 2

Rather than using four UILabels, why not subclass UILabel and draw it yourself in the drawRect: method? It would look something like:
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
// Set the mask
CGContextClipToMask(context, self.bounds, /* mask image */);
// Draw the text in a different font
[self.text drawInRect:rect withFont:/* alternate font */];
// Draw a solid background
CGContextSetRGBFillColor(context, ...);
CGContextFillRect(context, rect);
// Draw the text normally
[super drawRect:rect];
}
You could make the masking image and the alternate font properties of your subclass, for convenience.