自定義EditText的使用(一鍵刪除)|ListView item中多edittext問題

在實際開發的時候，應用的登錄界面和註冊界面通常會用到這個，我說的就是EditText末尾處的那個叉號，當輸入EditText中的內容不符合自己的意願，想全部刪除的時候，可以點擊那個叉號實現一鍵刪除EditText裏面的全部內容。效果圖如下：

當然，EditText裏的內容爲null的時候，這個叉號是不能顯示的，只有輸入內容才允許顯示。
有些人會有疑問，包括我一開始的時候也是，爲啥要用自定義？直接在xml裏設置圖片資源，先隱藏，再判斷當EditText不爲null的時候再將叉號顯示出來，不也能實現這樣的效果？
答案是：確實也能實現效果，但是沒有考慮到複用性。你想想，一個應用的登錄界面和註冊界面可能會有很多EditText，然後每一個EditText你都需要在xml設置好圖片資源先隱藏，然後再判斷是不是null，而且還得響應點擊事件，代碼量會不會很大，是不是在重複一些沒必要的代碼？

所以，用到自定義EditText，這樣的好處就是，不僅在當前項目可以用，以後在別的項目，遇到這個需求的時候，也可以拿過來直接用，起到了完美封裝的作用~~
OK了！廢話不多說了！自定義EditText代碼如下：

public class MyEditText extends EditText implements View.OnFocusChangeListener , TextWatcher {
    private Drawable mClearDrawable;
    public MyEditText(Context context) {
            this(context,null);
    }

    public MyEditText(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.editTextStyle);
    }

    public MyEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mClearDrawable = getResources().getDrawable(R.drawable.close);//設置一鍵清除EditText裏內容的叉號資源圖片
        mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());
        setClearIconVisible(false);
        this.setOnFocusChangeListener(this);
        this.addTextChangedListener(this);
    }
    /**
     * 當輸入框裏面內容發生變化的時候回調的方法
     */
    @Override
    public void onTextChanged(CharSequence s, int start, int count, int after) {
        setClearIconVisible(s.length() > 0);
    }
    /**
     * 設置清除圖標的顯示與隱藏，調用setCompoundDrawables爲EditText繪製上去
     */
    protected void setClearIconVisible(boolean visible) {
        Drawable right = visible ? mClearDrawable : null;
        setCompoundDrawables(getCompoundDrawables()[0],
                getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
    }
    /**
     * 因爲我們不能直接給EditText設置點擊事件，所以我們用記住我們按下的位置來模擬點擊事件
     * 當我們按下的位置在EditText的寬度 - 圖標到控件右邊的間距 - 圖標的寬度和
     * EditText的寬度 - 圖標到控件右邊的間距之間我們就算點擊了圖標，豎直方向沒有考慮
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (getCompoundDrawables()[2] != null) {
            if (event.getAction() == MotionEvent.ACTION_UP) {
                boolean touchable = event.getX() > (getWidth() - getPaddingRight() - mClearDrawable.getIntrinsicWidth())
                        && (event.getX() < ((getWidth() - getPaddingRight())));
                if (touchable) {
                    this.setText("");
                }
            }
        }
        return super.onTouchEvent(event);
    }
    /**
     * 當ClearEditText焦點發生變化的時候，判斷裏面字符串長度設置清除圖標的顯示與隱藏
     */
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            setClearIconVisible(getText().length() > 0);
        } else {
            setClearIconVisible(false);
        }
    }

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

    }

    @Override
    public void afterTextChanged(Editable s) {

    }
}

——————————————————————————————————————————————————————————
下面看一下小程序中是如何實現的。也很簡單，不解釋。清空的功能主要就是動態傳遞一個空字符串過去就行了哈哈哈~
wxml

<view class='input_container'>
  <image class='icon_search' src='../../image/icon_search.png' bindtap='searchContent'></image>
  <input placeholder='輸入內容' bindinput='getValue' value='{{inputValue}}' confirm-type='search' bindconfirm='search'></input>
  <image class='icon_delete' src='../../image/icon_delete.png' bindtap='clearValue' hidden='{{!showDeleteIcon}}' ></image>
</view>

wxss:

.input_container {
  display: -webkit-flex;
  display: flex;
  height: 24px;
  border: 1px solid #ccc;
  align-items: center;
  margin: 20px;
  padding-left: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.icon_search {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

input {
  height: 20px;
  flex: 1;
  font-size: 14px;
}

.icon_delete {
  width: 20px;
  height: 20px;
  padding-right: 20px;
}

js:

var value = '';
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    showDeleteIcon: false,//是否顯示叉號圖標
    inputValue: ''//input中的值
  },

  //判斷輸入框是否有值
  getValue: function (e) {
    value = e.detail.value
    if (value != '') {
      this.setData({
        showDeleteIcon: true
      });
    } else {
      this.setData({
        showDeleteIcon: false
      });
    }
  },

  //清空輸入框中的值
  clearValue: function () {
    this.setData({
      inputValue: '',
      showDeleteIcon: false
    });
  },

  //搜索
  search:function(e){
      wx.showToast({
        title: e.detail.value,
      })
  },
})

效果圖如下：

——————————————————————————————————————————————————————————————
下面說一下ListView item項中多edittext的問題，下面以一個Edittext爲例進行說明。多個同理。
有時候,我們項目需求會遇到ListView中多edittext同時提交的需求。當用到ListView複用上下滾動時，難免會出現輸入框已經輸入過的內容出現錯亂的情況。

主要就是在adapter的getView()中數據綁定的地方進行設置：

        //綁定數據
        final ThemeTalkerBean bean = list.get(position);
        //爲了保存已經輸入過的信息，需要先清除監聽
        if (item.et_talker_name.getTag() instanceof TextWatcher) {
            item.et_talker_name.removeTextChangedListener((TextWatcher) item.et_talker_name.getTag());
        }


        TextWatcher talkerWatcher = new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }

            @Override
            public void afterTextChanged(Editable s) {
                if (TextUtils.isEmpty(s)) {
                    bean.setTalkerName("");
                } else {
                    bean.setTalkerName(s.toString());
                }
            }
        };
        item.et_talker_name.addTextChangedListener(talkerWatcher);
        item.et_talker_name.setTag(talkerWatcher);