1. 程式人生 > >Android EditText 自定義帶刪除按鈕

Android EditText 自定義帶刪除按鈕

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" />