在实际开发的时候,应用的登录界面和注册界面通常会用到这个,我说的就是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里面的信息就行了。