Sunday, January 06, 2013

Using Unicode and Emoji In Your Interface

In my newly released iOS app, FM Towers USA—map of most of the FM radio stations in the United States—I had the problem of wanting to customize the popup indicator which appears when you select a pin on the map, but I didn't want to work too hard on it. All the MKAnnotation protocol in MapKit allows is returning strings for the title and subtitle.

I could spend a lot of time adding custom overlays and hit testing to how I deal with Map Kit, or I could just insert a few colorful Emoji characters into my strings.  (Unfortunately, I don't know how to get Blogger to encode the blue diamond character for view even on OS X or iOS.) 

- (NSString *)title
NSString* result = result = [NSString stringWithFormat:@"%@ 🔷 %.1f", self.callSign, self.frequency.floatValue];
return result;
You might notice that I even made use of the Emoji characters in the images I generated for my map pins. Thus the guitar emoji became the catch-all icon for music like rock, rockabilly, R&B, while the cow represented the various country genres—I wish their was an Emoji cowboy hat. Hey, it's free, quality colorful scalable artwork, I'd rather use it than draw it.

And sometimes, making use of the huge number of characters in standard Unicode can save a lot of time, let's say you need to display chemical formula like H₂SO₄ well,  you might think you'd need a complicated NSAttributedString to insert the subscript codes, but no, all you need is to use the subscripted number characters. Or maybe you want to say 4 1/2, but want to make it pretty, well let me introduce to you the vulgar half character with 4½. I don't know why it's vulgar, it's so beautiful and elegant and has a few cousins ¼ ¾ ⅓ ⅔ ⅕ ⅖ ⅗ ⅘ ⅜ ⅝ ⅞ ⅐ ⅑ ⅒, all of which you can just insert into your source code or localization files.

So, the next time you need an image lain out within a string, look under the Special Characters palette found at the end of Xcode's Edit menu. [Update: I've just realized that iOS 5 has many fewer, and much uglier Emoji style characters, so if you target that platform, please check out the results in the simulator.]