在EditText上使用ImageSpan（表情符号）。在使用SwiftKey键盘时无法正常工作。

Question

我正在制作一个简单的聊天应用程序，我希望在编写消息时在edittext上显示表情符号。

我有以下内容来识别将被ImageSpan替换为图像的字符（仅在EditText中插入表情符号时调用此内容）：

for (index = start; index < start+num_chars; index++) {
        if (index + 1 > editable.length())
            continue;  
          if(emoticons.containsKey(editable.subSequence(index, index + 1).toString())){
            int length=1; 

            Drawable drawable = context.getResources().getDrawable(emoticons.get(editable.subSequence(index, index + 1).toString()));
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();


            int size=Utils.GetDipsFromPixel(context, (int)(textSize*1.3));

            Drawable d = new BitmapDrawable(Bitmap.createScaledBitmap(bitmap, size, size, true));
            int dWidth = d.getIntrinsicWidth();
            int dHeight = d.getIntrinsicHeight();

            d.setBounds(0 , -dHeight, dWidth, 0);
            ImageSpan span;
            span = new ImageSpan(d,ImageSpan.ALIGN_BASELINE);
            editable.setSpan(span, index, index + length,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

            index += length - 1;
          }

      }

我正在使用SPAN_EXCLUSIVE_EXCLUSIVE标签设置跨度，但是我在SwiftKey键盘上遇到了问题，因为当我在edittext中插入表情符号时，图片后面写的所有内容都会保留在图片下方（就像SPAN_EXCLUSIVE_INCLUSIVE一样）。在Android默认键盘中，我没有遇到这个问题。

我只希望WhatsApp应用程序在EditText上使用相同的表情符号行为。

有什么建议吗？我需要改变我的代码吗？

编辑： "editable"变量被传递到该方法。它是txtMessage.getText()值，其中txtMessage是一个EditText。

谢谢！

编辑：只跨度一部分的代码！这适用于多行！我认为问题在于使用Drawable-> Bitmap-> ResizedBitmap-> Drawable。

public static final HashMap<String, Integer> emoticons = new HashMap();
static {
    emoticons.put("\ue415", R.drawable.e415);
    emoticons.put("\ue056", R.drawable.e056);
    emoticons.put("\ue057", R.drawable.e057);
...
public static Spannable getSmiledText(Context context, Spannable editable,
        int start, int num_chars, float textSize) {

    int index;
    for (index = start; index < start + num_chars; index++) {
        if (index + 1 > editable.length())
            continue;
        if (EmojiLayout.emoticons.containsKey(editable.subSequence(index,
                index + 1).toString())) {
            int length = 1;

            Bitmap smiley = BitmapFactory.decodeResource(context.getResources(), ((Integer) EmojiLayout.emoticons.get(editable.subSequence(index,
                    index + 1).toString())));
            int size = Utils.GetDipsFromPixel(context,
            (int) (textSize * 1.37));

            Bitmap scaledbmp=Bitmap.createScaledBitmap(
                    smiley, size, size, false);
            ImageSpan span;
            span = new ImageSpan(scaledbmp);
            Log.d("EmojiLayout", "Index: " + String.valueOf(index) + "To: "
                    + String.valueOf(index + length));
            editable.setSpan(span, index, index + length,
                    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            index += length - 1;
        }
    }
    return editable;
}

- Igor

---

将此缺陷发送给开发人员，看看他们会说什么。 - Ron

Answer 1

使用这个::

    public static CharSequence addSmileySpans(Context ch, CharSequence your_recieved_message)
{
    //smilyRegexMap = new HashMap<Integer, String>();

private static final HashMap<String, Integer> smilyRegexMap = new HashMap<String, Integer>();
smilyRegexMap.put( ">:-\\(" , R.drawable.fb_grumpy);
        smilyRegexMap.put( ">:\\(" , R.drawable.fb_grumpy);
        smilyRegexMap.put( ">:-O" , R.drawable.fb_upset);
        smilyRegexMap.put( ":-\\)" , R.drawable.fb_smile);
        smilyRegexMap.put( ":\\)",R.drawable.fb_smile);
        smilyRegexMap.put( ":-\\]" , R.drawable.fb_smile);
        smilyRegexMap.put( ":-\\(", R.drawable.fb_frown);




    System.out.println("==In Spannable Function..........");
    SpannableStringBuilder builder = new SpannableStringBuilder(your_recieved_message);

    System.out.println("==================Size of Smily  : "+ smilyRegexMap.size());

    @SuppressWarnings("rawtypes")
    Iterator it = smilyRegexMap.entrySet().iterator();
    while (it.hasNext()) {
        @SuppressWarnings("rawtypes")
        Map.Entry pairs = (Map.Entry) it.next();




        Pattern mPattern = Pattern.compile((String) pairs.getKey(),Pattern.CASE_INSENSITIVE);
        Matcher matcher = mPattern.matcher(your_recieved_message);

        while (matcher.find()) {

                Bitmap smiley = BitmapFactory.decodeResource(ch.getResources(), ((Integer) pairs.getValue()));
                Object[] spans = builder.getSpans(matcher.start(), matcher.end(), ImageSpan.class);
                if (spans == null || spans.length == 0) {
                    builder.setSpan(new ImageSpan(smiley), matcher.start(), matcher.end(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                }
        }
    }
    return builder;
}

- Gautam Vasoya

---

是的！！！我也遇到了Swiftkey的同样问题，但是通过这种方法，您已经解决了带有表情符号的列表视图项的换行问题！！！现在我只需要改善滚动速度，因为我有470个表情符号！有什么建议可以提高滚动速度吗？ - Igor

我已经编辑了你的代码，使其仅跨越字符串的一部分。我已经在第一条消息中发布了它。 - Igor

我正在使用对话框视图来显示表情符号。我已经发布了带有图片和代码的新答案。也许这可以帮助你... - Gautam Vasoya

Answer 2

您只需要使用ImageSpan构建一个可变文本，然后像CommonsWare在这个帖子中建议的那样将该可变文本设置为TextView或EditText。 您也可以尝试使用A-IV的解决方案：

private static final HashMap<String, Integer> emoticons = new HashMap();
    static {
        emoticons.put(":*", R.drawable.emo_im_kiss);
        emoticons.put(":-D", R.drawable.emo_im_glad);
        emoticons.put(":)", R.drawable.emo_im_happy);
        emoticons.put(":-(", R.drawable.emo_im_sad);
        ...
    }

    public static Spannable getSmiledText(Context context, String text) {

    SpannableStringBuilder builder = new SpannableStringBuilder(text);
    int index;

    for (index = 0; index < builder.length(); index++) {
        for (Entry<String, Integer> entry : emoticons.entrySet()) {
            int length = entry.getKey().length();
            if (index + length > builder.length())
                continue;
            if (builder.subSequence(index, index + length).toString().equals(entry.getKey())) {
                builder.setSpan(new ImageSpan(context, entry.getValue()), index, index + length,
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                index += length - 1;
                break;
            }
    }
    }
    return builder;
    }

- K_Anas

---

我已经尝试了这个解决方案，但我的问题是每次在EditText中插入表情符号时都要这样做，而我只想更改新插入的表情符号字符。我必须将txtMessage.getText() (Spannable)传递给方法，这样我才能仅更改新字符。如果我每次插入表情符号都要检查所有字符，那么你发送的方法是低效的。 - Igor

我尝试将ImageSpan设置为一个SpannableStringBuilder，但结果还是一样...使用SwiftKey键盘时，我无法在ImageSpan后面直接撰写内容，因为所有字符都被ImageSpan遮挡了.... :-( - Igor

Answer 3

尝试这种方式，希望能帮助您解决问题。

    private static LinkedHashMap<String,Integer> emojisHashMap;

    public static LinkedHashMap<String, Integer> getEmojisHashMap() {
        if (emojisHashMap == null || emojisHashMap.size() == 0) {
            emojisHashMap = new LinkedHashMap<String, Integer>();

            emojisHashMap.put(":=q", R.drawable.smiley1);
            emojisHashMap.put(":=w", R.drawable.smiley2);
            emojisHashMap.put(":=e", R.drawable.smiley3);
            emojisHashMap.put(":=r", R.drawable.smiley4);

            return emojisHashMap;
        } else {
            return emojisHashMap;
        }

    }

    public Spannable getSmiledText(CharSequence text) {
        SpannableStringBuilder builder;

        try {
            builder = (SpannableStringBuilder) text;
        }catch (Exception e){
            builder = new SpannableStringBuilder(text);
        }
        if (getEmojisHashMap().size() > 0) {
            int index;
            for (index = 0; index < builder.length(); index++) {
                if (Character.toString(builder.charAt(index)).equals(":")) {
                    for (Map.Entry<String, Integer> entry : getEmojisHashMap().entrySet()) {
                        int length = entry.getKey().length();
                        if (index + length > builder.length())
                            continue;
                        if (builder.subSequence(index, index + length).toString().equals(entry.getKey())) {
                            builder.setSpan(new ImageSpan(getContext(), entry.getValue()), index, index + length, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                            index += length - 1;
                            break;
                        }
                    }
                }
            }
        }
        return builder;
    }

- Haresh Chhelana

Answer 4

在表情符号的XML文件中添加图像按钮

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#dddddd"
    android:padding="10dp" >

    <ImageButton
        android:id="@+id/btn_smile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_smile" />

    <ImageButton
        android:id="@+id/btn_kiss"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_kiss" />

    <ImageButton
        android:id="@+id/btn_wink"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_wink" />

    <ImageButton
        android:id="@+id/btn_cry"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_cry" />

    <ImageButton
        android:id="@+id/btn_grumpy"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_grumpy" />

    <ImageButton
        android:id="@+id/btn_upset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_upset" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#dddddd"
    android:padding="10dp" >

    <ImageButton
        android:id="@+id/btn_frown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_frown" />

    <ImageButton
        android:id="@+id/btn_tougn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_tounge" />

    <ImageButton
        android:id="@+id/btn_grin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_grin" />

    <ImageButton
        android:id="@+id/btn_gasp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_gasp" />

    <ImageButton
        android:id="@+id/btn_glasses"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_glasses" />

    <ImageButton
        android:id="@+id/btn_unsure"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:padding="10dp"
        android:src="@drawable/fb_unsure" />
</LinearLayout>
</LinearLayout>

//========================================================

在对话框类中放置此代码

    private class SmileyMenu extends Dialog implements android.view.View.OnClickListener{

    private Chat cht;
    Context con;
    public String MyStatus1="";
    public SmileyMenu(Chat cht) {
        super(cht);
        this.con = cht;
        this.cht = cht;
    }



    @Override
    protected void onStart() {
        // TODO Auto-generated method stub
        super.onStart();


        setTitle("Select Smileys :");

        setContentView(R.layout.smily_menu);

        ImageButton btnSmile = (ImageButton)findViewById(R.id.btn_smile);
        ImageButton btnkiss = (ImageButton)findViewById(R.id.btn_kiss);
        ImageButton btnwink = (ImageButton)findViewById(R.id.btn_wink);
        ImageButton btncry = (ImageButton)findViewById(R.id.btn_cry);
        ImageButton btngrupy = (ImageButton)findViewById(R.id.btn_grumpy);
        ImageButton btnupset = (ImageButton)findViewById(R.id.btn_upset);
        ImageButton btnfrown = (ImageButton)findViewById(R.id.btn_frown);
        ImageButton btngrin = (ImageButton)findViewById(R.id.btn_grin);
        ImageButton btngasp = (ImageButton)findViewById(R.id.btn_gasp);
        ImageButton btnglass = (ImageButton)findViewById(R.id.btn_glasses);
        ImageButton btnunsure = (ImageButton)findViewById(R.id.btn_unsure);
        ImageButton btndevil = (ImageButton)findViewById(R.id.btn_devil);
        ImageButton btnheart = (ImageButton)findViewById(R.id.btn_heart);
        ImageButton btnpacman = (ImageButton)findViewById(R.id.btn_pacman);
        ImageButton btn42 = (ImageButton)findViewById(R.id.btn_42);


        btnSmile.setOnClickListener(this);
        btnkiss.setOnClickListener(this);
        btnwink.setOnClickListener(this);
        btncry.setOnClickListener(this);
        btngrupy.setOnClickListener(this);
        btnupset.setOnClickListener(this);
        btnfrown.setOnClickListener(this);
        btngrin.setOnClickListener(this);
        btngasp.setOnClickListener(this);
        btnglass.setOnClickListener(this);
        btnunsure.setOnClickListener(this);
        btndevil.setOnClickListener(this);
        btnheart.setOnClickListener(this);
        btnpacman.setOnClickListener(this);
        btn42.setOnClickListener(this);




    }



    @Override
    public void onClick(View v) {


        switch (v.getId()) {

        case R.id.btn_smile:
            cht.setMyText(":-)");
            break;

        case R.id.btn_kiss:
            cht.setMyText(":-*");
            break;

        case R.id.btn_wink:
            cht.setMyText(";-)");
            break;

        case R.id.btn_cry:
            cht.setMyText(":'(");
            break;

        case R.id.btn_grumpy:
            cht.setMyText(">:-(");
            break;

        case R.id.btn_upset:
            cht.setMyText(">:-O");
            break;

        case R.id.btn_frown:
            cht.setMyText(":-(");
            break;

        case R.id.btn_tougn:
            cht.setMyText(":-p");
            break;

        case R.id.btn_grin:
            cht.setMyText(":-D");
            break;

        case R.id.btn_gasp:
            cht.setMyText(":-O");
            break;

        case R.id.btn_glasses:
            cht.setMyText("8-)");
            break;

        case R.id.btn_unsure:
            cht.setMyText(":-/");
            break;

        case R.id.btn_devil:
            cht.setMyText("3:-)");
            break;

        case R.id.btn_heart:
            cht.setMyText("<3");
            break;

        case R.id.btn_pacman:
            cht.setMyText(":v");
            break;

        case R.id.btn_42:
            cht.setMyText(":42:");
            break;

        default:
            Toast.makeText(con, "Sorryyyyyy", Toast.LENGTH_SHORT).show();
            break;
        }

        dismiss();
    }
}

//==================

运行时单击表情菜单按钮的图像

=====================================================

你可以试试这个，也许对你有帮助。祝你好运。

- Gautam Vasoya

---

我的问题是关于如何提高消息列表视图的速度，因为列表适配器必须每次显示消息时查找表情符号。我已经实现了某种类型的缓存，但用户可以在应用程序配置中更改字体大小，因此我需要重新计算表情符号的大小，使它们与文本具有相同的高度。无论如何，还是谢谢！ - Igor