UILabels with Neon-Effect

For a customer project I needed to have a Neon glow on some text. Being the geek that I am I would not want to settle for simple creating the effect in Photoshop since I wanted to be able to smoothly scale the text. Custom drawing comes to mind, but where?

One might be tempted to first consider create a new UIView for this effect, but then you’d have to also add all those properties that UILabel has on top of what it inherits from UIView. Second idea was to create a UILabel category, but my experiments have shown if I override a standard method like drawRect in my category then this overrides it for all UILabels.

(Background Photo “Seattle by Night” by Alan Bauer)

So the final – and successful – decision was to subclass UILabel: DTGlowingLabel was born.

I recently had discovered that the shadow function used in CGContext drawing has an additional parameter to adjust blurriness which regular UILabels don’t have. If you use CGSizeZero to have no offset over the drawn text and choose a big blur value then you get exactly this effect. Having different colors for a thing outline, the filling and the glow just serves to increase the effect why retaining some readability.

DTGlowingLabel.h

@interface DTGlowingLabel : UILabel {
}
 
@end

DTGlowingLabel.m

#import "DTGlowingLabel.h"
 
@implementation DTGlowingLabel
 
- (void) drawRect:(CGRect)rect
{
	CGContextRef ctx = UIGraphicsGetCurrentContext();
 
	UIColor *insideColor = [UIColor colorWithRed:69.0/255.0 green:254.0/255.0 blue:0 alpha:1];
	UIColor *outlineColor = [UIColor colorWithRed:22.0/255.0 green:145.0/255.0 blue:0 alpha:0.8];
	UIColor *blurColor = [UIColor colorWithRed:104.0/255.0 green: 248.0/255.0 blue:0 alpha:0.7];
 
	CGContextSetStrokeColorWithColor(ctx, outlineColor.CGColor);
	CGContextSetFillColorWithColor(ctx, insideColor.CGColor);
	CGContextSetLineWidth(ctx, self.font.pointSize/60.0);
	CGContextSetShadowWithColor(ctx, CGSizeMake(0, 0), self.font.pointSize / 10.0, blurColor.CGColor);
	CGContextSetTextDrawingMode(ctx, kCGTextFillStroke);
 
	[self.text drawInRect:self.bounds withFont:self.font lineBreakMode:self.lineBreakMode alignment:self.textAlignment];
}
 
@end

Having this as a subclass of UILabel allows you to use all the external parameters of it like self.font. Also it makes sense to use self.font.pointSize to adjust the level of blurriness so that the effect is not overblown for very small font sizes. Finally the UIKit text drawing additions give us the drawInRect method which works very well on the current graphics context without having to flip the text matrix like you need to do for regular Quartz text drawing.

The implementation above currently does not take into consideration the set text color. This could be remedied by manipulating the current text color by making it slightly lighter for the glow color and darker for the outline. This exercise I am leaving for your homework.

Categories: Recipes