Custom smileys in ios

Question

I am creating a chat application,in which I have to add my own smileys(custom) as the existing smileys/emoji icons.Is that possible? Any body has an idea then please help me.

Thank in advance

Answer 1

I am currently researching about the same. There are a few methods that you can look into but considering the fact that you are developing a chat application, I believe you would be using a UITableView and scrolling performance would be a huge concern to you. If the method you use turns out to be too complex, the scrolling would be extremely jittery, specially on older devices ( I am not sure whether you are targeting iPhone4 ).

I have identified the following options:

1) You could load each message as a UIWebView and make use of HTML to insert images wherever you need custom emoticons. This seems to be the easiest way there is but it is also a slow method. I haven't been looking into this too much and keep it as a last option.

2) You could use a UILabel subclass. You can meddle around with these codes, most of them scan for text prefixes like "http://" or "www." and insert a UIButton with a target action there. You could instead put a UIImageView in that place. Here are a few good projects to guide you in this direction.

Look at Nimbus attributed Label (slightly complex). and TTTAttributedLabel. The best (Simplest) of all is FancyLabel. This one is a really neat and easy implementation of a smart label.

3) You could look at NSAttributedStrings. I'm sorry I don't have much experience with them. Somethig similar can be found here, a project called DTCoreText. It would really help you if you go ahead and try to understand what they are trying to do. Look for a tutorial on DTCoreText too. I believe this will help you more than anything else. Remember to clone the DTCoreText git from github. It doesn't work if you just download the zip.

4) The most complex method in my head, also probably the most performant, is to manually calculate the size of the Label by determining what lines have emoticons (since they would be a little larger than the ordinary character) and then substitute them with (sufficient) spaces in the NSString. I would draw the NSString as a UILabel or using the following method : [textX drawInRect:theRect withFont:font lineBreakMode:UILineBreakModeClip alignment:UITextAlignmentCenter];. Then I would manually insert each emoticon as a CALayer at the correct position.

For performance related queries on various drawing methods I suggest you see floriankugler blog on layer-trees-vs-flat-drawing-graphics-performance-across-ios-device-generations , a wonderful article indeed which compares several drawing methods. It suggests using CALayers instead of drawRect or simple UIView hierarchy methods.

5) If you still get jitters in scrolling you could probably be brave and try to render text in OpenGL. I am also reading further in this and it seems to be a very, very difficult task. My app still jitters and I could use any help I could get.

6) One of my colleagues also suggested making a custom font by embedding PNGs in the TTF like apple has done to create the apple Emoji font. Again I am of little help there. If anything it seems like a very difficult method.

I apologize for not being able to give as many links as I'd have wanted but I simply don't have enough reputation at this time. :P