我們常常在App的輸入界面上看到:
當我們輸入內容後,右面會出現這樣一個小叉叉的圖標,我們點擊後會清空輸入框中的內容!
實現起來其實也很簡單:
爲EditText設置addTextChangedListener,然後重寫TextWatcher()裏的抽象方法,這個用於監聽輸入框變化的;然後setCompoundDrawablesWithIntrinsicBounds設置小叉叉的圖片;最後,重寫onTouchEvent方法,如果點擊區域是小叉叉圖片的位置,清空文本!
實現代碼如下:
public class EditTextWithDel extends EditText { private final static String TAG = "EditTextWithDel"; private Drawable imgInable; private Drawable imgAble; private Context mContext; public EditTextWithDel(Context context) { super(context); mContext = context; init(); } public EditTextWithDel(Context context, AttributeSet attrs) { super(context, attrs); mContext = context; init(); } public EditTextWithDel(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mContext = context; init(); } private void init() { imgInable = mContext.getResources().getDrawable(R.drawable.delete_gray); addTextChangedListener(new TextWatcher() { @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void afterTextChanged(Editable s) { setDrawable(); } }); setDrawable(); } // 設置刪除圖片 private void setDrawable() { if (length() < 1) setCompoundDrawablesWithIntrinsicBounds(null, null, null, null); else setCompoundDrawablesWithIntrinsicBounds(null, null, imgInable, null); } // 處理刪除事件 @Override public boolean onTouchEvent(MotionEvent event) { if (imgInable != null && event.getAction() == MotionEvent.ACTION_UP) { int eventX = (int) event.getRawX(); int eventY = (int) event.getRawY(); Log.e(TAG, "eventX = " + eventX + "; eventY = " + eventY); Rect rect = new Rect(); getGlobalVisibleRect(rect); rect.left = rect.right - 100; if (rect.contains(eventX, eventY)) setText(""); } return super.onTouchEvent(event); } @Override protected void finalize() throws Throwable { super.finalize(); } }