Overriding Emoji Graphics
Asked Answered
S

3

14

I want to override the emoji icons with my own custom graphics (only within my app).

From what I've read so far, one possible solution is to create a custom font extension which overrides the desired unicode characters. Preferable I would like to maintain inter-operability with CATextLayer.

Edit: Looks like custom fonts won't be my solution; fonts must be defined in gray-scale. Next possibility: Creating a custom CALayer, chunking the string into segments based on emoji code, and doing the type setting + graphics rendering manually (i.e. with core graphics and core text)

Edit: Also looking to maintain smooth scrolling performance in a table views.

Saintjust answered 25/11, 2011 at 22:25 Comment(1)
May be this would help you - #1226014Immoderacy
R
2

I have devoted a lot of time trying to do the same. Your best bet is to replace the unicode values for the emoji in your NSString eg. \uE100 etc. with a placeholder string. You could replace the emoji encodings with an HTML Tag and use either UIWenViews or DTCoreText to draw the image inline. I have done this, it works too, but it will be a little slow (Specially if you want to display this Label in table views.)

Here is a little starter:

Make a dictionary with UIImages as objects and placeholder strings as keys:

        self.emoticonDict = [[NSMutableDictionary alloc] initWithObjectsAndKeys:@"happyEmoticon.png",    @":)",
                         @"sadEmoticon.png",      @":(",
                         @"testImg.png",          @"\uE100",
                         nil];


__block NSString *text1 = [NSString stringWithFormat:@"<html><p>%@</p></html>",text];
    [self.emoticonDict enumerateKeysAndObjectsUsingBlock: ^(id key, id obj, BOOL *stop) {
        text1 = [text1 stringByReplacingOccurrencesOfString:key withString:[NSString stringWithFormat:@"<img height= 15 width= 15 src=\"%@\">",obj]];
    }];

You can at this point load this HTML into a UIWebView and you will have what you want.

[myWebView loadData:_htmlData MIMEType:@"text/html" textEncodingName:@"utf-8"  baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];//do create the webview first

If the slow speed of a UIWebView is a concern, you can read ahead. In either case do look at the note towards the end of this answer.

To create a DTAttributedLabel, we do the following: First we build a NSattributedString using the DTHTMLAttributedStringBuilder:

NSAttributedString *temp = [[[DTHTMLAttributedStringBuilder alloc] initWithHTML:text1
                                                    options:@{
                                     DTDefaultFontFamily: @"Helvetica",
                                     DTDefaultFontSize:@15,};
                                     documentAttributes:nil]
                                     generatedAttributedString];

Then you can use a DTAttributedLabel instance to display temp.

 self.tempLabel.attributedString = temp;//create a DTAttributedLabel Instance called tempLabel before this, I had it as a property

My objective was to generate text label's really fast (Table Views) while supporting custom emoticons. DTAttributedLabels are fast (much faster than a UIWebView) NOTE: I also made a custom font where I had mapped the unicode values for the emojis to a custom glyph. To my surprise, still the default emojis were displayed. I would like to claim here that whenever iOS (CoreText) comes across a character whose value lies in the Emoji section, it draws it using the AppleColorEmoji font by default. The lack of documentation on how Apple Color Emoji font is actually drawn on iOS actually makes it difficult for me to prove this, but this seems to be a plausible explanation. If you drop an emoji from the character palette app onto a file in textEdit, then select it and try to change the font, you see that it doesn't happen. Similarly, if you type some text, then select it and try to change it's font to Apple Color Emoji, you'll see it doesn't happen. When I decompiled the Apple Color Emoji font, I didn't find character mappings or glyphs for textual characters (except 0-9). Somehow, even if you set a label's font as Apple Color Emoji, the font for the textual (non-emoji) part of your label's text is set to something else.

Kindly feel free to comment and share your knowledge since this region around the Apple Color Emoji font still remains very unclear.

Reaper answered 18/6, 2013 at 13:37 Comment(1)
Awesome. It's been a long time since I've touched this problem and haven't been working on iOS for months. But you've got my upvote!Saintjust
G
0

One solution would be to use the UITextField or TextView delegate and listen to the user's input. When they type an emoji character, pop in a UIImageView inline with the text, and delete the emoji icon with the input.

Grandsire answered 25/11, 2011 at 23:59 Comment(4)
Thanks for the suggestions. Unfortunately, in my case I need to avoid using UIKit objects, as they suffer from choppy scrolling performance .Saintjust
@Saintjust If you're getting scrolling performance issues just from including a few UIViews then you are probably doing something ill-advised, like tweaking the backing CALayer. Can you elaborate?Salesclerk
Hello Conrad. I've done extensive testing using UIViews in tableCells. I could never get the table cell to scroll perfectly smoothly. There would always been frame skipping and occasionally low overall frame rate. What I do is collapse the view hierarchy into one drawRect:, or more recently creating a composition of CALayers. If you have some sample code of a complicated tableViewCell constructed entirely of UIViews with excellent scrolling performance I would really like to see it!Saintjust
Gonna go back on what I said up here. It's definitely possible to get good performance on UIViews. But there's a bunch of tricks and default settings you need to know about.Saintjust
D
0

There's a few mentions of this issue on Apple's private devforums (which you have access to if you're a registered member of the iOS developer program).

It sounds like the potential solution would be to explicitly set the font for whatever you're trying to display.

Drumlin answered 26/11, 2011 at 6:15 Comment(3)
I have access to the forums, but can't find anything. Even searching for emoji returns zero search results.Saintjust
Some links could be useful, @Michael?Spirometer
Hi @Emil... here's one (first couple responses in that thread talk about setting a font); I wonder if the KeyboardEmojiEverywhere plist flag would work within a single application's plist? If it doesn't, I'd recommend filing a feature request at bugreporter.apple.com.Drumlin

© 2022 - 2024 — McMap. All rights reserved.