Android白虹剑之EditView之表情秀

传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.youkuaiyun.com/leverage_1229

白虹剑

        殷天正从身旁包袱中取出一口长剑，对张无忌道：“这柄白虹剑送了给你，这剑虽不如老贼尼的倚天剑有名，但也是江湖上罕见的利器。”说着伸指在剑刃上一弹，那剑陡地弯了过来，随即弹直，嗡嗡作响，声音清越。

        今天我们学习如何在Android平台“白虹剑”EditView中插入表情图像，类似于我们在实际生活中用QQ聊天和发送短信时插入表情的操作。下面给出该情景的案例：

1案例技术要点

(1)java.lang.reflect.Field：利用Reflect相关技术获取资源文件夹下表情图片Id。
(2)android.text.SpannableString：提供一个总体文本是不可变的，但是支持局部对象（它所标记的）可以附加或分离。
(3)android.text.style.ImageSpan：为SpannableString附加Bitmap对象。
(4)SpannableString类setSpan(...)：设置Bitmap、显示文本内容和显示样式。
(5)Spanned.SPAN_EXCLUSIVE_EXCLUSIVE：表示在当前文本前端和后端新增字符均不采用当前显示效果。

2案例代码陈列

2.1工程包目录

2.2AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.android.edittext"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".EditTextMainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

2.3strings.xml

<resources>
    <string name="app_name">EditText输入表情图像</string>
    <string name="btn">添加表情</string>
</resources>

2.4main.xml

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

    <EditText android:id="@+id/et"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" />
    <Button android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/btn" />

</LinearLayout>

2.5EditTextMainActivity.java

package com.android.edittext;

import java.lang.reflect.Field;
import java.util.Random;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.style.ImageSpan;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;

/**
 * EditText案例一：输入表情图像（类似QQ）
 * @author lynnli1229
 */
public class EditTextMainActivity extends Activity {
    private EditText et;
    private Button btn;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        et = (EditText) findViewById(R.id.et);
        btn = (Button) findViewById(R.id.btn);
        btn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //随机生成1-9之间的一个数，用于标示表情图像的文件名
                int faceId = new Random().nextInt(9) + 1;
                try {
                    Field field = R.drawable.class.getDeclaredField("face" + faceId);
                    int resourceId = Integer.parseInt(field.get(null).toString());
                    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), resourceId);
                    ImageSpan imageSpan = new ImageSpan(EditTextMainActivity.this, bitmap);
                    SpannableString spannableString = new SpannableString("face");
                    spannableString.setSpan(imageSpan, 0, 4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                    et.append(spannableString);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        });
    }

}

3案例效果展示