带取消（清除）按钮的编辑框

最新推荐文章于 2022-10-29 16:35:16 发布

MySunshineSmile

最新推荐文章于 2022-10-29 16:35:16 发布

阅读量996

点赞数 1

分类专栏： Android 文章标签： android edittext 自定义取消清除

本文链接：https://blog.csdn.net/bingyanyang/article/details/50718375

版权

Android 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文仅限给小白以及自己做个笔记：

在做应用时，肯定会用到自定义UI，根据需求做了个点取消按钮的编辑框，并且有以下监听：

1、当编辑框中没有内容的话，取消按钮不显示。

2、当编辑框内的内容从有到无的时候，取消按钮也会从有到无显示。

3、当编辑框内的内容从无到有的时候，取消按钮也会从无到有显示。

4、点击取消按钮，清除编辑框内的内容，同时取消按钮也将消失。

上图看效果：（图一）

（图二）

所谓的编辑框其实整体是一个布局，布局里有一个edittext和一个imageview。

代码：

首先定义布局（为了效果好看一点有自定义的drawable也一起上了）：

输入框布局 widget_edittext_del.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/loginscreen_id_password_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:background="@drawable/selector_loginscreen_edittext"
    android:orientation="horizontal" >

    <EditText
        android:id="@+id/edittext_del_id_edit"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#00ffffff"
        android:ellipsize="end"
        android:paddingLeft="15dp"
        android:singleLine="true"
        android:textColor="#000000"
        android:textSize="15sp" />

    <ImageView
        android:id="@+id/edittext_del_id_del"
        android:layout_width="40dp"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:src="@drawable/edittext_delete"
        android:visibility="invisible" />

</LinearLayout>

selector_loginscreen_edittext.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true" android:drawable="@drawable/shape_edit_focus_bg"/>
<item android:drawable="@drawable/shape_edit_bg"/>
</selector>

shape_edit_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="20dp"/>
    <stroke android:width="0.5dp" android:color="#e3e3e3"/>
    <solid android:color="#ffffff"/>
</shape>

shape_edit_focus_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="20dp"/>
    <stroke android:width="0.5dp" android:color="#0285f1"/>
    <solid android:color="#ffffff"/>
</shape>

主界面xml activity_main.xml：

java代码：

private EditText edtInput;
   private ImageView imgDel;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       edtInput = (EditText) findViewById(R.id.edittext_del_id_edit);
       imgDel = (ImageView) findViewById(R.id.edittext_del_id_del);
       setTextChangeDelListener(edtInput, imgDel);

   }

   private void setTextChangeDelListener(final EditText edt,final ImageView img){
       setClickListener(edt, img);
       setFocusChangeListener(edt, img);
       setTextChangeListener(edt, img);
   }

   /**
   * 设置ImageView的点击监听
   * @param edt
   * @param img
   */
   private void setClickListener(final EditText edt, final ImageView img){
       img.setOnClickListener(new OnClickListener() {

           @Override
           public void onClick(View v) {
               // TODO Auto-generated method stub
               edt.setText("");
               img.setVisibility(View.INVISIBLE);
           }
       });
   }

   /**
   * 设置ImageView的点击监听
   * @param edt
   * @param img
   */
   private void setFocusChangeListener(final EditText edt, final ImageView img){
       edt.setOnFocusChangeListener(new OnFocusChangeListener() {

           @Override
           public void onFocusChange(View v, boolean hasFocus) {
               // TODO Auto-generated method stub
               if(hasFocus && !edt.getText().toString().trim().equals("")){
                   img.setVisibility(View.VISIBLE);
               }else{
                   img.setVisibility(View.INVISIBLE);
               }
           }
       });
   }

   /**
   * 设置EditText文字变化监听
   * @param edt
   * @param img
   */
   public static void setTextChangeListener(final EditText edt,final ImageView img){

       edt.addTextChangedListener(new TextWatcher() {

           @Override
           public void onTextChanged(CharSequence s, int start, int before, int count) {
               // TODO Auto-generated method stub
               if(!edt.getText().toString().trim().equals("")){
                   img.setVisibility(View.VISIBLE);
               }else{
                   img.setVisibility(View.INVISIBLE);
               }
           }

           @Override
           public void beforeTextChanged(CharSequence s, int start, int count,
                   int after) {
               // TODO Auto-generated method stub

           }

           @Override
           public void afterTextChanged(Editable s) {
               // TODO Auto-generated method stub

           }
       });
   }
}