Android -- EditText(三) 自动清空按钮的输入框

Android – EditText(三) 带自动清空按钮的输入框

目标：未输入时与普通EditText没两样，一旦检测到有内容输入，在输入框内部右侧显示清除图标，点击该图标时则清空输入框内所有内容，同时图标隐藏，然后往复。

效果：

代码解析：

1. 布局：(只要设置id，宽高就可以)

    <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:padding="@dimen/padding_10"
       android:orientation="horizontal">
   
            <com.example.toollibs.OverWriteClass.EditTextDelIcon                        	android:id="@+id/etDel"                                                    	android:layout_width="wrap_content"                                   		android:layout_height="wrap_content"
               android:layout_weight="1"
               android:layout_gravity="center_vertical"
               android:ellipsize="middle"
               android:singleLine="true"
               android:paddingLeft="@dimen/padding_5"
               android:paddingTop="@dimen/padding_3"
               android:paddingBottom="@dimen/padding_3"
               android:background="@drawable/edit_text_frame" />
   
            <Button
               android:id="@+id/bEnter"
               android:layout_width="wrap_content"
               android:layout_height="35dp"
               android:layout_gravity="center_vertical"
               android:layout_marginLeft="@dimen/margin_5"
               android:text="Enter"
               android:textColor="@color/colorWhite"
               android:background="@drawable/selector_button"/>
       LinearLayout>
   

2. 应用：(与EditText使用相同)

   private EditTextDelIcon etDel;
   
   etDel = findViewById(R.id.etDel);
   String temp = etDel.getText().toString();//获取输入框内容
   

3. 自定义类：

   1. EditTextDelIcon.java (带清空图标的EditText, 图标可多种格式：png, jpg, svg…)

      public class EditTextDelIcon extends android.support.v7.widget.AppCompatEditText {
          private Context context;
          private Drawable icon;
      
          public EditTextDelIcon(Context context, AttributeSet attrs) {
              super(context, attrs);
              this.context = context;
              Init();
          }
      
          private void Init() {
              //set delete icon; 
              icon = context.getResources().getDrawable(R.drawable.ic_del_icon);
              //set text change listener;
              addTextChangedListener(new TextWatcher() {
                  @Override
                  public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
      
                  }
      
                  @Override
                  public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
      
                  }
      
                  @Override
                  public void afterTextChanged(Editable editable) {
                      SetDrawable();
                  }
              });
      
          }
      
          private void SetDrawable() {
              if (length() < 1) {
                  setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
              } else {
                  setCompoundDrawablesWithIntrinsicBounds(null, null, icon, null);
              }
          }
      
          @Override
          public boolean onTouchEvent(MotionEvent event) {
              if (icon != null && event.getAction() == MotionEvent.ACTION_UP) {
                  int eventX = (int) event.getRawX();
                  int eventY = (int) event.getRawY();
                  Rect rect = new Rect();
                  getGlobalVisibleRect(rect);
                  rect.left = rect.right - 24;//图标宽度
                  if (rect.contains(eventX, eventY)) {
                      setText("");//clear contents
                  }
              }
              return super.onTouchEvent(event);
          }
      
          @Override
          protected void finalize() throws Throwable {
              super.finalize();
          }
      }
      

   2. SVG 删除图标：(ic_del_icon.xml, 系统自带的一个svg)

      <vector xmlns:android="http://schemas.android.com/apk/res/android"
          android:width="24dp"
          android:height="24dp"
          android:viewportWidth="24"
          android:viewportHeight="24"
          android:tint="?attr/colorControlNormal">
        <path
            android:fillColor="#595959"
            android:pathData="M14.59,8L12,10.59 9.41,8 8,9.41 10.59,12 8,14.59 9.41,16 12,13.41 14.59,16 16,14.59 13.41,12 16,9.41 14.59,8zM12,2C6.47,2 2,6.47 2,12s4.47,10 10,10 10,-4.47 10,-10S17.53,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8z"/>
      vector>
      

   

   3. edit_text_frame.xml (自定义输入框外框)

      
      <shape xmlns:android="http://schemas.android.com/apk/res/android"
          android:shape="rectangle">
          <stroke android:color="@color/colorGery"
              android:width="1dp"/>
          <corners android:radius="10dp"/>
      shape>
      

   4. selector_button.xml (button 点击效果)

      
      <selector xmlns:android="http://schemas.android.com/apk/res/android">
          <item android:state_pressed="false">
              <shape android:shape="rectangle">
                  <stroke android:color="@color/colorPrimary"
                      android:width="1dp"/>
                  <solid android:color="@color/colorPrimary"/>
                  <corners android:radius="15dp"/>
              shape>
          item>
      
          <item android:state_pressed="true">
              <shape android:shape="rectangle">
                  <stroke android:color="@color/colorTY_Half"
                      android:width="1dp"/>
                  <solid android:color="@color/colorTY_Half"/>
                  <corners android:radius="15dp"/>
              shape>
          item>
      selector>