Custom gradient UILabel with an outline

UPDATE: I changed a few things in KSLabel and uploaded it to github. This post is still relevant, but a little outdated. KSLabel now supports dynamic outline and gradient colors. Be sure to read the updated blog post after reading this post.

I have run into this problem a couple of times before. My friend and designer creates a beautiful image of an interface for me and I take a look at it and immediately realize that there is text with an outline and/or gradient.

The Problem

I sigh on the inside because I know it can’t be inserted in the app as an image. The text needs to be localized and IMHO it’s not nice to localize images. I know that text outlines are the most basic thing for someone who is used to Photoshop and the like, but creating those for an iOS app can be a pain.

With my newest game – MatchBalls! – that happened again. He created artwork and I tried to make it work without the outline, but it did not come out the way it was supposed to look. The design as a whole depends on the outline. So I decided I needed a dedicated class to do what I want for future use.

The Solution

I went to write my own UILabel subclass KSLabel which is supposed to free me from future headaches. I want it to optionally create text with a gradient and/or an outline. So here is what I did.

Step 1: Subclass UILabel. duh!

Step 2: Add properties drawOutline and drawGradient to make the gradient and the outline optional.

Step 3: Override -(void)drawTextInRect:(CGRect)rect.

This is where the work is done. First we let our parent class UILabel draw the text as it would normally do. We create an image using that shape and fill the shape with our gradient. If we want to draw an outline around that text, we save that image for later. Then we draw an outline around that shape with a 4px border. Sadly that kills the gradient because the outline is drawn 4px inwards and 4px outwards of that shape. But hey, thats why we saved the the gradient image before. Now we can just slam that on top of the outline and we have our final outlined gradient text.

Update: The last version was a bit outdated. Since ARC does not handle CG objects I have to release those manually: CGImageRelease(alphaMask);.

Step 4: Test-drive it.

The Result

Here is what text with a gradient and an outline looks like. This screen is shown right before a game of MatchBalls starts and it works like a charm. The “MatchBalls” at the top of the screen is an image – THE image – I wanted to mimic with my code (except for the arc). I think it works quite nicely.

I’m a nice guy, so you can just download the complete class KSLabel on github.

BTW: I love the font. Another good pick by my designer. The font is called Ballpark Weiner and you can download it here.

The Future

I would actually like to enhance my code by make the colors and the outline thickness variable. For this project that was not necessary so I didn’t. I will definitely update this post when I’ve had the time to make the class more reusable. Maybe I’ll even open up a GitHub account. Been wanting to do that for quite some time.

If you enjoyed this post, how about leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply

Your email address will not be published.