Androidで画像を絵文字のように表示する

AndroidのTextViewを拡張して、EmojiTextViewというクラスをつくりました。

絵文字データを独自のタグでDBに保存しており、APIで絵文字の独自タグで取得してしてAndroid内の絵文字画像とマッピングするコードを書いたので、公開いたします。

EmojiTextView.java

package jp.sharakova.android.emoji;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.text.Html;
import android.text.Html.ImageGetter;
import android.util.AttributeSet;
import android.widget.TextView;

public class EmojiTextView extends TextView {
	private Context context;

	public EmojiTextView(Context context) {
		super(context);
		this.context = context;
	}

	public EmojiTextView(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.context = context;
	}

	public EmojiTextView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		this.context = context;
	}

	public void setEmojiText(String text) {
		text = EmojiUtils.convertTag(text);
		CharSequence spanned = Html.fromHtml(text, emojiGetter, null);
		setText(spanned);
	}

	private ImageGetter emojiGetter = new ImageGetter()
	{
        	public Drawable getDrawable(String source){
        		int id = getResources().getIdentifier(source, "drawable", context.getPackageName());
            
        		Drawable emoji = getResources().getDrawable(id);
        		int w = (int)(emoji.getIntrinsicWidth() * 1.25);
        		int h = (int)(emoji.getIntrinsicHeight() * 1.25);
        		emoji.setBounds(0, 0, w, h);
        		return emoji;
        	}
	};		
}

利用方法は、setEmojiTextに弊社で利用している、絵文字の独自タグごと文字列を設定します。
絵文字の独自タグ(今回は%%i:1%%などのフォーマット)をAndroidの絵文字とマッピングするには、独自タグから<img src="e001">のようにe001はdrawable内にある画像名に変換する必要があります。
ちょっとダサいコードですが、絵文字変換部分は、このような形で実装しております。

EmojiUtils.java

package jp.sharakova.android.emoji;

public class EmojiUtils {

	public static String convertTag(String str){
		return str
		.replaceAll("<", "&lt;")
		.replaceAll("%%i:1%%","<img src=\"e001\"/>")
		.replaceAll("%%i:2%%","<img src=\"e002\"/>")
		.replaceAll("%%i:3%%","<img src=\"e003\"/>")
		.replaceAll("%%i:4%%","<img src=\"e004\"/>")
		.replaceAll("%%i:5%%","<img src=\"e005\"/>")
		.replaceAll("%%i:6%%","<img src=\"e006\"/>")
		.replaceAll("%%i:7%%","<img src=\"e007\"/>")
        ・・・・・・・・
		.replaceAll("%%ix:97%%","")
		.replaceAll("%%ix:98%%","")
		.replaceAll("%%ix:99%%","")
		.replaceAll("%%ix:100%%","")
		;
	}
}

layoutファイルで、TextViewから今回作ったEmojiTextViewに切り替える必要があるので、
layoutファイルはこのような感じになります。TextViewを継承しているので、TextViewで設定可能な項目はそのまま利用できます。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<jp.sharakova.android.emoji.EmojiTextView
　　android:id="@+id/EmojiTextView1"  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    />
</LinearLayout>

実際に、サンプル的にActivityを書いてみます。

EmojiTextViewSampleActivity.java

package jp.sharakova.android.emoji;

import android.app.Activity;
import android.os.Bundle;

public class EmojiTextViewSampleActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        EmojiTextView emojiTextView = (EmojiTextView)findViewById(R.id.EmojiTextView1);
        
        String emojiText = "絵文字テスト%%i:3%%、こんどは、%%i:85%%";
        emojiTextView.setEmojiText(emojiText);
    }
}

%%i:3%%、%%i:85%%の部分が、drawable無いにある画像に置き換わって表示されるのがわかると思います。

今回のソース・絵文字データはすべてgithubでダウンロードいただけますので、そちらで確認をお願いいたします。

https://github.com/sharakova/EmojiTextView