1. 程式人生 > >安卓自定義帶刪除圖示的輸入框EditView

安卓自定義帶刪除圖示的輸入框EditView

在安卓中我們使用預設的Editview是隻能輸入文字的,但是想要刪除,我們得利用輸入法的刪除按鈕來一個個刪除,現在在好多應用當中,會在輸入框的最後出現一個刪除圖片,點選就清空了所有的資料,這個很方便。下面我們來實現一下。

先看下效果圖:


我們這裡實現的是,當輸入框有文字是,才會出現這個刪除圖示。當輸入為空是,就會消失,其實就是自定義一個Ediiview:

 

/**
 * 輸入文字框 右邊有自帶的刪除按鈕 當有輸入時,顯示刪除按鈕,當無輸入時,不顯示刪除按鈕。
 * 
 * 
 */
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) {
		// 這裡構造方法也很重要,不加這個很多屬性不能再XML裡面定義
		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) {
			// throw new
			// NullPointerException("You can add drawableRight attribute in XML");
			mClearDrawable = getResources().getDrawable(R.drawable.button_login_delete);
		}

		mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth(), mClearDrawable.getIntrinsicHeight());
		// 預設設定隱藏圖示
		setClearIconVisible(false);
		// 設定焦點改變的監聽
		setOnFocusChangeListener(this);
		// 設定輸入框裡面內容發生改變的監聽
		addTextChangedListener(this);
	}

	/**
	 * 因為我們不能直接給EditText設定點選事件,所以我們用記住我們按下的位置來模擬點選事件 當我們按下的位置 在 EditText的寬度 -
	 * 圖示到控制元件右邊的間距 - 圖示的寬度 和 EditText的寬度 - 圖示到控制元件右邊的間距之間我們就算點選了圖示,豎直方向就沒有考慮
	 */
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		if (event.getAction() == MotionEvent.ACTION_UP) {
			if (getCompoundDrawables()[2] != null) {

				boolean touchable = event.getX() > (getWidth() - getTotalPaddingRight()) && (event.getX() < ((getWidth() - getPaddingRight())));

				if (touchable) {
					this.setText("");
				}
			}
		}

		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]);
	}

	/**
	 * 當輸入框裡面內容發生變化的時候回撥的方法
	 */
	@Override
	public void onTextChanged(CharSequence s, int start, int count, int after) {
		if (hasFoucs) {
			setClearIconVisible(s.length() > 0);
		}
	}

	@Override
	public void beforeTextChanged(CharSequence s, int start, int count, int after) {

	}

	@Override
	public void afterTextChanged(Editable s) {

	}

}

我們在使用的時候,只要替換Editview,換成我們自定義的就行了:
<com.test.view.ClearEditText
                    android:id="@+id/edit_user"
                    android:layout_width="1px"
                    android:layout_height="fill_parent"
                    android:layout_marginLeft="10.0dip"
                    android:layout_marginRight="15.0dip"
                    android:layout_weight="3"
                    android:background="@android:color/white"
                    android:hint="賬號/郵箱/手機號碼"
                    android:inputType="textPersonName"
                    android:maxLength="30"
                    android:paddingLeft="10.0dip"
                    android:singleLine="true"
                    android:textSize="16.0sp" />


這樣就會有我們想要的效果了。完整demo我就不提供了。