自定义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);

ThemeTalkerBean 这个bean就是用来保存每个item中edittext输入的内容的。最好提交的时候，提交bean里面的信息就行了。