Android EditText 输入框
相信大家对于 QQ 或者微信很熟悉吧,我们发送文本的时候可以连同表情一起发送
带表情的 EditText 简单实现
Android 要让 EditText 能够输入表情有两种简单的实现方式
- 使用 SpannableString
- 使用 Html 类
就像前面 TextView 做点赞列表一样,使用第一种 SpannableString 似乎是明智的首选
我们就来写一个范例来制作一个可以输入表情的 EditText
我们先来看一下最终效果图,点击添加表情即可完成表情添加
-
创建一个 空的 Android 项目
cn.twle.android.EditText
-
修改
res/values/strings.xml
添加几个字符串<?xml version="1.0" encoding="utf-8" ?> <resources> <string name="app_name">EditText</string> <string name="add">添加表情</string> </resources>
-
下载 /static/i/android/cry.png 放到
res/drawable
目录下 -
修改
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>
-
修改
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 没有没有属性来实现这样的功能,也就说,我们要自己来实现了
思路
我们首先来看一下这个搜索框是怎么操作的?
- 首先是一个正常的输入框,在我们输入任何字符之前都不会出现 ×
- 当输入框里有字符后,就会出现 ×
- 点击 × 可以清空输入框里的所有字符
因此我们的实现思路应该是这么样的
-
新建一个类继承自 EditText,并设置
addTextChangedListener
然后重写 TextWatcher() 里的抽象方法用于监听输入框变化的 -
然后调用
setCompoundDrawablesWithIntrinsicBounds()
设置小叉叉的图片 -
最后重写
onTouchEvent()
方法,如果点击区域是小叉叉图片的位置,清空文本
因为我们还没学到事件处理,所以你只要知道这些方法就可以了
实现
我们写一个 demo 来实现上面的思路
-
创建一个 空的 Android 项目
cn.twle.android.EditText
-
下载 /static/i/android/close.png 放到
res/drawable
目录下 -
在
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(); } }
-
修改
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>
运行范例效果如下