Android EditText 输入框

相信大家对于 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

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.