Android輸入框中加入清除按鈕
在Android的輸入框中加入清除按鈕,是很常見的設計,本文介紹如何建立一個控制元件,在輸入框中加入清除按鈕。
我們來看看實現這個控制元件都需要做什麼:
- 清除按鈕在輸入框中有內容時出現
- 清除按鈕必須出現在輸入框內
- 點選清除按鈕,清除輸入框中的所有內容
- 清除按鈕的顏色必須與主題一致
實現第一點,我們可以通過加入TextWatcher來監聽EditText的變化,在onFocusChangeListener方法中處理清除按鈕是否可見。
實現第二點,我們需要使用compound drawable作為清除按鈕,然後在 OnTouch listener中處理點選事件。
開始實現我們的EditText
我們使用AppCompatEditText作為基類
public class ClearableEditText extends AppCompatEditText implements View.OnTouchListener, View.OnFocusChangeListener, TextWatcher {
接著加入建構函式
public ClearableEditText(final Context context) { super(context); init(context); } public ClearableEditText(final Context context, final AttributeSet attrs) { super(context, attrs); init(context); } public ClearableEditText(final Context context, final AttributeSet attrs, final int defStyleAttr) { super(context, attrs, defStyleAttr); init(context); }
實現init方法
- 建立drawable,併為其加入Touch、Focus事件處理
- 加入TextChangedListener,監聽EditText內容變化
private void init(final Context context) { final Drawable drawable = ContextCompat.getDrawable(context, R.drawable.abc_ic_clear_mtrl_alpha); final Drawable wrappedDrawable = DrawableCompat.wrap(drawable); //Wrap the drawable so that it can be tinted pre Lollipop DrawableCompat.setTint(wrappedDrawable, getCurrentHintTextColor()); mClearTextIcon = wrappedDrawable; mClearTextIcon.setBounds(0, 0, mClearTextIcon.getIntrinsicHeight(), mClearTextIcon.getIntrinsicHeight()); setClearIconVisible(false); super.setOnTouchListener(this); super.setOnFocusChangeListener(this); addTextChangedListener(this); }
我們預設使用setClearIconVisible(false)隱藏了清除按鈕,在輸入文字時才會顯示
private void setClearIconVisible(final boolean visible) { mClearTextIcon.setVisible(visible, false); final Drawable[] compoundDrawables = getCompoundDrawables(); setCompoundDrawables( compoundDrawables[0], compoundDrawables[1], visible ? mClearTextIcon : null, compoundDrawables[3]); }
加入Listener
private Drawable mClearTextIcon; private OnFocusChangeListener mOnFocusChangeListener; private OnTouchListener mOnTouchListener; @Override public void setOnFocusChangeListener(final OnFocusChangeListener onFocusChangeListener) { mOnFocusChangeListener = onFocusChangeListener; } @Override public void setOnTouchListener(final OnTouchListener onTouchListener) { mOnTouchListener = onTouchListener; }
實現Listener
最後我們來實現3個Listener,先來看focus Listener
@Override public void onFocusChange(final View view, final boolean hasFocus) { if (hasFocus) { setClearIconVisible(getText().length() > 0); } else { setClearIconVisible(false); } if (mOnFocusChangeListener != null) { mOnFocusChangeListener.onFocusChange(view, hasFocus); } }
在獲取焦點時,判斷輸入框中內容是否大於0,有內容則顯示清除按鈕。
接著我們來看onTouch方法:
@Override public boolean onTouch(final View view, final MotionEvent motionEvent) { final int x = (int) motionEvent.getX(); if (mClearTextIcon.isVisible() && x > getWidth() - getPaddingRight() - mClearTextIcon.getIntrinsicWidth()) { if (motionEvent.getAction() == MotionEvent.ACTION_UP) { setText(""); } return true; } return mOnTouchListener != null && mOnTouchListener.onTouch(view, motionEvent); }
在這裡,我們首先檢查了清除按鈕是否為顯示狀態,然後判斷點選的範圍是否在清除按鈕內,如果在範圍內的話,在ACTION_UP時清空輸入框內容,否則執行mOnTouchListener的onTouch方法。
最後,我們實現TextWatcher:
@Override public final void onTextChanged(final CharSequence s, final int start, final int before, final int count) { if (isFocused()) { setClearIconVisible(s.length() > 0); } } @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void afterTextChanged(Editable s) { }
判斷輸入框中的字數,大於0則顯示清除按鈕,否則隱藏。
如果你使用的是AutoCompleteTextView,我們也可以使用同樣的方法新增清除按鈕:
public class ClearableAutoCompleteTextView extends AppCompatAutoCompleteTextView implements View.OnTouchListener, View.OnFocusChangeListener, TextWatcher {
該控制元件的原始碼已上傳到Github: ClearableEditText
本文譯自:Giving your Edit Texts the All Clear
相關文章
- 輸入框點選按鈕清除輸入的所有字元的封裝字元封裝
- 原生前端:input標籤 number型別輸入框如何清除上下加減按鈕?前端型別
- input輸入框加入限制只能輸入正整數,輸入其他字元會自動清除字元
- iOS清除輸入框內陰影iOS
- hbuilder mui如何監聽搜尋框點選清除按鈕UI
- VUE 實現 Studio 管理後臺(十三):按鈕點選輸入控制元件,input 輸入框系列Vue控制元件
- 窗體(文字框,按鈕,單選按鈕,標籤)
- js.ui中的datepicker 元件增加清除按鈕JSUI元件
- Python文字框與按鈕Python
- Input 輸入框中 只能輸入正整數
- 一個頁面內放入文字框和按鈕,實現文字框和按鈕輸繫結,輸入圓半徑,計算圓面積並彈窗計算結果顯示出來。(js)JS
- Java選擇框和單選按鈕Java
- 前端面試:H5 如何清除Input輸入框多次輸入的歷史記錄?前端面試H5
- 安卓Android 按鈕案例安卓Android
- Flutter 密碼輸入框 驗證碼輸入框Flutter密碼
- react輸入框輸入中文bugReact
- Xamarin iOS教程之使用按鈕接接收使用者輸入iOS
- 讓 Android 輸入框只能輸入固定長度的中英文Android
- C#中的輸入框函式C#函式
- Android自定義方形驗證碼輸入框Android
- 微軟win10操作中心將加入Flow快捷按鈕微軟Win10
- input 輸入框只能輸入數字
- 從一次輸入框無法輸入的bug,談如何限制輸入框輸入型別型別
- imemode 控制輸入法,控制輸入框的輸入法
- 按鈕上面的按鈕 (轉)
- Ladda – 把載入提示效果整合到按鈕中
- Android--按鈕點選事件Android事件
- Android 點選按鈕跳轉Android
- Vue使用antd中input元件去驗證輸入框輸入內容Vue元件
- JavaScript操作文字框、單選按鈕、下拉框、核取方塊JavaScript
- layUI layer彈框按鈕 : 確認,取消,關閉事件UI事件
- react中 Ender鍵 觸發事件數(輸入框)React事件
- 按鈕
- flutter TextField 輸入框元件Flutter元件
- 自定義UITextView輸入框UITextView
- 輸入框過濾操作
- input只能輸入文字框
- Android ListView中按鈕監聽器設定及優化AndroidView優化