相信大家对于 QQ 或者微信很熟悉吧，我们发送文本的时候可以连同表情一起发送

带表情的 EditText 简单实现

Android 要让 EditText 能够输入表情有两种简单的实现方式

1. 使用 SpannableString
2. 使用 Html 类

就像前面 TextView 做点赞列表一样，使用第一种 SpannableString 似乎是明智的首选

我们就来写一个范例来制作一个可以输入表情的 EditText

我们先来看一下最终效果图，点击添加表情即可完成表情添加

1. 创建一个 空的 Android 项目 cn.twle.android.EditText

2. 修改 res/values/strings.xml 添加几个字符串

   <?xml version="1.0" encoding="utf-8" ?>
   <resources>
       <string name="app_name">EditText</string>
       <string name="add">添加表情</string>
   </resources>
   

3. 下载 /static/i/android/cry.png 放到 res/drawable 目录下

4. 修改 activity_main.xml 添加一个 EditText

   <?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" >
   
       <Button
           android:id="@+id/add" 
           android:text="@string/add"
           android:layout_width="wrap_content" 
           android:layout_height="wrap_content" />
   
       <EditText
           android:id="@+id/hello"
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" />
   
   </LinearLayout>
   

5. 修改 MainActivity.java

   package cn.twle.android.edittext;
   
   import android.graphics.drawable.Drawable;
   import android.support.v7.app.AppCompatActivity;
   import android.os.Bundle;
   import android.text.Spannable;
   import android.text.SpannableString;
   import android.text.style.ImageSpan;
   import android.view.View;
   import android.widget.Button;
   import android.widget.EditText;
   
   public class MainActivity extends AppCompatActivity {
   
       private  Button btn_add;
       private  EditText hello;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
   
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           btn_add = (Button) findViewById(R.id.add);
           hello = (EditText) findViewById(R.id.hello);
   
           btn_add.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View v) {
                   SpannableString spanStr = new SpannableString("imge");
                   Drawable drawable = MainActivity.this.getResources().getDrawable(R.drawable.cry);
   
                   drawable.setBounds(0,0,drawable.getIntrinsicWidth(),drawable.getIntrinsicHeight());
                   ImageSpan span = new ImageSpan(drawable,ImageSpan.ALIGN_BASELINE);
                   spanStr.setSpan(span,0,4, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
   
                   int cursor = hello.getSelectionStart();
                   hello.getText().insert(cursor, spanStr);
               }
           });
       }
   }
   

运行范例效果如下

带删除按钮的 EditText

经常能在各个 App 的搜索框上看到这样的文本框，比如微信上的搜索框就是这样的

当输入内容后，右面会出现这样一个小叉叉的图标，点击后会清空输入框中的内容

Android 的 EditText 没有没有属性来实现这样的功能，也就说，我们要自己来实现了

思路

我们首先来看一下这个搜索框是怎么操作的？

1. 首先是一个正常的输入框，在我们输入任何字符之前都不会出现 ×
2. 当输入框里有字符后，就会出现 ×
3. 点击 × 可以清空输入框里的所有字符

因此我们的实现思路应该是这么样的

1. 新建一个类继承自 EditText，并设置 addTextChangedListener 然后重写 TextWatcher() 里的抽象方法用于监听输入框变化的

2. 然后调用 setCompoundDrawablesWithIntrinsicBounds() 设置小叉叉的图片

3. 最后重写 onTouchEvent() 方法，如果点击区域是小叉叉图片的位置，清空文本

因为我们还没学到事件处理，所以你只要知道这些方法就可以了

实现

我们写一个 demo 来实现上面的思路

1. 创建一个 空的 Android 项目 cn.twle.android.EditText

2. 下载 /static/i/android/close.png 放到 res/drawable 目录下

3. 在 MainActivity.java 的同一个目录下创建一个文件 EditTextWithDel.java

   package cn.twle.android.edittext;
   
   import android.content.Context;
   import android.graphics.Rect;
   import android.graphics.drawable.Drawable;
   import android.text.Editable;
   import android.text.TextWatcher;
   import android.util.AttributeSet;
   import android.util.Log;
   import android.view.MotionEvent;
   import android.support.v7.widget.AppCompatEditText;
   
   public class EditTextWithDel extends AppCompatEditText {
   
       private final static String TAG = "EditTextWithDel";
       private Drawable imgInable;
       private Drawable imgAble;
       private Context mContext;
   
       public EditTextWithDel(Context context) {
           super(context);
           mContext = context;
           init();
       }
   
       public EditTextWithDel(Context context, AttributeSet attrs) {
           super(context, attrs);
           mContext = context;
           init();
       }
   
       public EditTextWithDel(Context context, AttributeSet attrs, int defStyleAttr) {
           super(context, attrs, defStyleAttr);
           mContext = context;
           init();
       }
   
       private void init() {
           imgInable = mContext.getResources().getDrawable(R.drawable.close);
           addTextChangedListener(new TextWatcher() {
               @Override
               public void onTextChanged(CharSequence s, int start, int before, int count) {
               }
   
               @Override
               public void beforeTextChanged(CharSequence s, int start, int count, int after) {
               }
   
               @Override
               public void afterTextChanged(Editable s) {
                   setDrawable();
               }
           });
           setDrawable();
       }
   
       // 设置删除图片
       private void setDrawable() {
           if (length() < 1)
               setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
           else
               setCompoundDrawablesWithIntrinsicBounds(null, null, imgInable, null);
       }
   
       // 处理删除事件
       @Override
       public boolean onTouchEvent(MotionEvent event) {
           if (imgInable != null && event.getAction() == MotionEvent.ACTION_UP) {
               int eventX = (int) event.getRawX();
               int eventY = (int) event.getRawY();
               Log.e(TAG, "eventX = " + eventX + "; eventY = " + eventY);
               Rect rect = new Rect();
               getGlobalVisibleRect(rect);
               rect.left = rect.right - 100;
               if (rect.contains(eventX, eventY))
                   setText("");
           }
           return super.onTouchEvent(event);
       }
       @Override
       protected void finalize() throws Throwable {
           super.finalize();
       }
   }
   

4. 修改 activity_main.xml 添加一个 cn.twle.android.edittext.EditTextWithDel

   <?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" >
   
       <cn.twle.android.edittext.EditTextWithDel
           android:id="@+id/search"
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" />
   
   </LinearLayout>
   

运行范例效果如下

参考文档

1. Android 官方文档 EditView