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.

12 thoughts on “Custom gradient UILabel with an outline

  1. Rony

    Hey thanks for that works like a charm! my designer friend also asked me the same question. keep it up!

  2. Harsh

    I have been looking for giving strokes to the UILabel and I spent weeks on this but your code is so easy to implement, it just took 5 minutes to implement :-)

    Thanks!

  3. Kris

    Well done, sir. That’s extremely easy to use. Thank you so much, for sharing the source code.

  4. Lakshmi Ventrapragada

    Hey..!
    Its good…
    Superb..
    I just blindly follow u r steps..
    Simply it works.
    Thank You so much for sharing your wealth….

  5. Kai Post author

    You’re very welcome, thanks for commenting! It makes me happy to see my work being useful to others. I would like to see it ‘in action’ if possible… So, if you would like, you could share the name (and app store link) of your app.

  6. Russ

    This is some great code, but I’ve noted that when I use it, if the app is backgrounded and later restored, the labels get redrawn with the text color set to white – so both the outline and the text color are white. Have you had this happen?

  7. Russ

    Hmm, I think it might be related to this line:

    // Outline color
    self.textColor = [UIColor whiteColor];

    I think you need to store the current self.textColor in a variable before this line, then set self.textColor back to the stored value at the end of your “if (drawOutline)” block

  8. Kai Post author

    Ah, I’m guessing that you use the label without a gradient, right? I’ve never done that, so I’ve never seen that behavior. But it seems like it could occur. I will dig into this when I have the time – I will also update the blog post and hopefully migrate the code to github (been wanting to do that for quite a while).

    Thanks for the info! I appreciate it :)

  9. Kai Post author

    I fixed it and created a repo on github for KSLabel. I even got around to add some (long overdue) updates to the code. Now you can set the outline color and the gradient colors (2) and don’t have to change anything in KSLabel. No it is way more reusable.

    Check it out at https://github.com/vigorouscoding/KSLabel

  10. Ilya

    Such an amazing work! It’s very useful.
    But there is another KSLabel in CocoaPods. So sad. Would be great to see your subclass there.

  11. Kai Post author

    Thanks Ilya! Now that you mention it, I would have liked my KSLabel to be on CocoaPods… Next time I release something I will check there first to make sure there are no name clashes.

  12. Seb

    I have been stuck on this for quite a while and your solution solved my problem. Thanks a lot !

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">