安卓自定義帶刪除圖示的輸入框EditView
阿新 • • 發佈:2019-02-17
在安卓中我們使用預設的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我就不提供了。