Android EditText 自定義帶刪除按鈕
阿新 • • 發佈:2019-01-10
EditText裡面帶刪除按鈕在各種App裡面已經很常見了,如下:
所需的圖片資源:
下面直接貼上全部程式碼:
public class ClearEditText extends EditText implements OnFocusChangeListener,
TextWatcher {
private Drawable mClearDrawable;
private boolean hasFoucs;
public ClearEditText(Context context) {
this(context, null );
}
public ClearEditText(Context context, AttributeSet attrs) {
this(context, attrs, android.R.attr.editTextStyle);
}
public ClearEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init () {
// 獲取EditText的DrawableRight,假如沒有設定我們就使用預設的圖片
mClearDrawable = getCompoundDrawables()[2];
if (mClearDrawable == null) {
mClearDrawable = getResources().getDrawable(
R.drawable.nickname_delete);
}
mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(),
mClearDrawable.getIntrinsicHeight());
setClearIconVisible(false );
setOnFocusChangeListener(this);
addTextChangedListener(this);
}
/**
* 因為我們不能直接給EditText設定點選事件,所以我們用記住我們按下的位置來模擬點選事件 當我們按下的位置 在 EditText的寬度 -
* 圖示到控制元件右邊的間距 - 圖示的寬度 和 EditText的寬度 - 圖示到控制元件右邊的間距之間我們就算點選了圖示,豎直方向就沒有考慮
*/
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
//監聽手指的按下、滑動、擡起來達到圖片的點選,按住效果
switch (action) {
case MotionEvent.ACTION_DOWN:
if (getCompoundDrawables()[2] != null && getText().length() > 0) {
boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())
&& (event.getX() < ((getWidth() - getPaddingRight())));
if (touchable) {
setIconChange(R.drawable.nickname_delete2);
}
}
break;
case MotionEvent.ACTION_MOVE:
if (getCompoundDrawables()[2] != null && getText().length() > 0) {
boolean touchable = (event.getX() > (getWidth() - getTotalPaddingRight()) && (event
.getX() < ((getWidth() - getPaddingRight()))))
&& (event.getY() > 0 && event.getY() < getHeight() + 100);
if (touchable) {
setIconChange(R.drawable.nickname_delete2);
} else {
setIconChange(R.drawable.nickname_delete);
}
}
break;
case MotionEvent.ACTION_UP:
if (getCompoundDrawables()[2] != null && getText().length() > 0) {
setIconChange(R.drawable.nickname_delete);
boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight())
&& (event.getX() < ((getWidth() - getPaddingRight())))
&& (event.getY() > 0 && event.getY() < getHeight());
if (touchable) {
this.setText("");
}
}
break;
}
return super.onTouchEvent(event);
}
/**
* 當ClearEditText焦點發生變化的時候,判斷裡面字串長度設定清除圖示的顯示與隱藏
*/
@Override
public void onFocusChange(View v, boolean hasFocus) {
this.hasFoucs = hasFocus;
if (hasFocus) {
setClearIconVisible(getText().length() > 0);
} else {
setClearIconVisible(false);
}
}
/**
* 設定清除圖示的顯示與隱藏,呼叫setCompoundDrawables為EditText繪製上去
*
* @param visible
*/
protected void setClearIconVisible(boolean visible) {
Drawable right = visible ? mClearDrawable : null;
setCompoundDrawables(getCompoundDrawables()[0],
getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
}
/**
* 設定清除圖示的點選效果變化
*/
private void setIconChange(int res) {
mClearDrawable = getResources().getDrawable(res);
mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(),
mClearDrawable.getIntrinsicHeight());
setCompoundDrawables(getCompoundDrawables()[0],
getCompoundDrawables()[1], mClearDrawable,
getCompoundDrawables()[3]);
}
/**
* 當輸入框裡面內容發生變化的時候回撥的方法TextWatcher
*/
@Override
public void onTextChanged(CharSequence s, int start, int count, int after) {
if (hasFoucs) {
//當edittext裡面有內容時顯示刪除圖示
setClearIconVisible(s.length() > 0);
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
}
@Override
public void afterTextChanged(Editable s) {
}
}
註釋已經寫的差不多了,這裡就不多說了。使用方法(跟正常EditText一樣使用):
在xml中:
<控制元件所在包路徑.ClearEditText
android:id="@+id/clear_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="11"
android:hint="請輸入您的手機號"
android:inputType="numberDecimal"
android:maxEms="11"
android:maxLength="11"
android:paddingBottom="12dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="12dp"
android:singleLine="true"
android:text=""
android:textColor="#000000"
android:textColorHint="#bbbbbb"
android:textSize="16sp" />