重學Android-EditText的進階操作

語言: CN / TW / HK

theme: juejin highlight: a11y-dark


EditText的進階使用

EditText 是我們常用的輸入框控制元件,平常我們只是使用它輸入文字,這裡記錄一些它不太常見的操作和一些解決方案。

一、焦點的自動獲取

如果一個頁面內定義了EditText,那麼有可能我們進入此頁面的時候會自動彈起軟鍵盤,(分機型,有的會彈,有的不彈)。如果我們需要彈軟鍵盤,我們制定給 EditText 設定

xml android:focusable="true" android:focusableInTouchMode="true"

但是如果我們不想這個頁面進去就彈出軟鍵盤,我們可以給根佈局或者 EditText 的父佈局設定 focusable 。

二、游標和背景的控制

預設的 EditText 是帶下劃線和粗游標的,我們可以對它們進行簡單的修改 ```xml android:background="@null" //去掉了下劃線

android:textCursorDrawable="@null" //去掉游標的顏色 ```

自定義游標的顏色和寬度: ```xml

<size android:width="2dp" />

<solid android:color="#BDC7D8" />

```

使用自定義游標 xml android:textCursorDrawable="@drawable/edittext_cursor"

三、限制小數點位數

我們可以通過監聽 EditText 的文字變化的方式來改變文字值,我們還能通過 DigitsKeyListener 的方式監聽文字的改變。

3.1 TextWatcher的方式

我們可以通過監聽 EditText 的文字變化,比如我們只想要小數點後面2位數,我們就監聽文字變化,點後面的2位數,如果多了就把他刪除掉。

```java public class MoneyTextWatcher implements TextWatcher { private EditText editText; private int digits = 2;

public MoneyTextWatcher(EditText et) {
    editText = et;
}
public MoneyTextWatcher setDigits(int d) {
    digits = d;
    return this;
}


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

}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
    //刪除“.”後面超過2位後的資料
    if (s.toString().contains(".")) {
        if (s.length() - 1 - s.toString().indexOf(".") > digits) {
            s = s.toString().subSequence(0,
                    s.toString().indexOf(".") + digits+1);
            editText.setText(s);
            editText.setSelection(s.length()); //游標移到最後
        }
    }
    //如果"."在起始位置,則起始位置自動補0
    if (s.toString().trim().substring(0).equals(".")) {
        s = "0" + s;
        editText.setText(s);
        editText.setSelection(2);
    }

    //如果起始位置為0,且第二位跟的不是".",則無法後續輸入
    if (s.toString().startsWith("0")
            && s.toString().trim().length() > 1) {
        if (!s.toString().substring(1, 2).equals(".")) {
            editText.setText(s.subSequence(0, 1));
            editText.setSelection(1);
            return;
        }
    }
}

@Override
public void afterTextChanged(Editable s) {

}

}

```

使用:

```java //預設兩位小數 mEditText.addTextChangedListener(new MoneyTextWatcher(mEditText1));

//手動設定其他位數,例如3 mEditText.addTextChangedListener(new MoneyTextWatcher(mEditText1).setDigits(3); ```

3.2 DigitsKeyListener的方式

```java public class ETMoneyValueFilter extends DigitsKeyListener {

public ETMoneyValueFilter(int d) {
    super(false, true);
    digits = d;
}

private int digits = 2;  //預設顯示二位數的小數點

public ETMoneyValueFilter setDigits(int d) {
    digits = d;
    return this;
}

@Override
public CharSequence filter(CharSequence source, int start, int end, Spanned dest, int dstart, int dend) {
    CharSequence out = super.filter(source, start, end, dest, dstart, dend);

    if (out != null) {
        source = out;
        start = 0;
        end = out.length();
    }

    int len = end - start;

    if (len == 0) {
        return source;
    }

    //以點開始的時候,自動在前面新增0
    if (source.toString().equals(".") && dstart == 0) {
        return "0.";
    }
    //如果起始位置為0,且第二位跟的不是".",則無法後續輸入
    if (!source.toString().equals(".") && dest.toString().equals("0")) {
        return "";
    }

    int dlen = dest.length();

    for (int i = 0; i < dstart; i++) {
        if (dest.charAt(i) == '.') {
            return (dlen - (i + 1) + len > digits) ?
                    "" :
                    new SpannableStringBuilder(source, start, end);
        }
    }

    for (int i = start; i < end; ++i) {
        if (source.charAt(i) == '.') {
            if ((dlen - dend) + (end - (i + 1)) > digits)
                return "";
            else
                break;  
        }
    }

    return new SpannableStringBuilder(source, start, end);
}

} ```

其實是和 TextWatcher 類似的方式,那麼使用的時候我們這樣使用: ```java //預設兩位小數 mEditText.setFilters(new InputFilter[]{new MoneyValueFilter()});

//手動設定其他位數,例如3 mEditText.setFilters(new InputFilter[]{new MoneyValueFilter().setDigits(3)}); ```

在Kotlin程式碼中是這樣使用: kotlin et_input.filters = arrayOf(ETMoneyValueFilter().setDigits(3))

這樣就可以實現小數點後面二位數的控制,還順便加入了.的判斷,自動加0的操作。

四、EditText的Search操作

當此 EditText 軟鍵盤彈起的時候,右下角的確定變為搜尋,我們需要給 EditText 設定一個屬性: xml android:imeOptions="actionSearch"

然後給軟鍵盤設定一個監聽 ```java //點選軟鍵盤搜尋按鈕 etSearch.setOnKeyListener(new View.OnKeyListener() {

        @Override
        public boolean onKey(View v, int keyCode, KeyEvent event) {

            if (keyCode == KeyEvent.KEYCODE_ENTER) {
                // 先隱藏鍵盤
                ((InputMethodManager) getSystemService(INPUT_METHOD_SERVICE))
                        .hideSoftInputFromWindow(TransactionHistorySearchActivity.this.getCurrentFocus()
                                .getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);

                if (isSearch){
                    isSearch = false;
                    if (!TextUtils.isEmpty(etSearch.getText().toString()))
                        searchHistory(etSearch.getText().toString());
                }

            }
            return false;
        }
    });

```

這裡使用一個flag來判斷,是因為部分機型會回撥2次。所以為了統一效果,我們使用攔截判斷只調用一次。

當然Search的邏輯如果你使用 Kotlin + DataBinding 來實現,那麼就更簡單了。

```kotlin //執行搜尋 fun doSearch() { KeyboardUtils.hideSoftInput(mActivity) scrollTopRefresh() }

    //搜尋的刪除
    fun searchDel() {
        mViewModel.mKeywordLiveData.value = ""
        doSearch()
    }

```

```xml

            <ImageView
                android:layout_width="@dimen/d_16dp"
                android:layout_height="@dimen/d_16dp"
                android:layout_marginLeft="@dimen/d_12dp"
                android:src="@drawable/search_icon"
                binding:clicks="@{click.doSearch}" />

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/d_12dp"
                android:layout_weight="1"
                android:background="@color/transparent"
                android:hint="大家都在搜"
                android:imeOptions="actionSearch"
                android:singleLine="true"
                android:text="@={viewModel.mKeywordLiveData}"
                android:textColor="@color/black"
                android:textColorHint="@color/gray_99"
                android:textSize="@dimen/d_14sp"
                binding:onKeyEnter="@{click.doSearch}"
                binding:typefaceMedium="@{true}" />

            <ImageView
                android:layout_width="@dimen/d_16dp"
                android:layout_height="@dimen/d_16dp"
                android:layout_marginRight="@dimen/d_10dp"
                android:src="@drawable/search_delete"
                android:visibility="gone"
                binding:clicks="@{click.searchDel}"
                binding:isVisibleGone="@{!TextUtils.isEmpty(viewModel.MKeywordLiveData)}" />

        </LinearLayout>

```

主要的 Binding Adapter 方法為 onKeyEnter ,它實現了軟鍵盤的搜尋。

下面是自定義BindingAdapter的方法: ```kotlin var _viewClickFlag = false var _clickRunnable = Runnable { _viewClickFlag = false }

/* * Edit的確認按鍵事件 / @BindingAdapter("onKeyEnter") fun EditText.onKeyEnter(action: () -> Unit) { setOnKeyListener { _, keyCode, _ -> if (keyCode == KeyEvent.KEYCODE_ENTER) { KeyboardUtils.closeSoftKeyboard(this)

        if (!_viewClickFlag) {
            _viewClickFlag = true
            action()
        }
        removeCallbacks(_clickRunnable)
        postDelayed(_clickRunnable, 1000)
    }
    [email protected] false
}

} ```

和上面Java的實現方式類似,同樣的做了防抖的操作。為了部分機型連續呼叫多次的問題。

效果:

五、焦點與軟鍵盤的自由控制

上面說到的焦點,不自動彈出軟鍵盤,如果我想自由的控制焦點與軟鍵盤怎麼辦?

一個例子來說明,比如我們的需求,點選 EditText 的時候彈出彈框提示使用者注意事項,當點選確定或者取消之後再繼續輸入。分解步驟如下:

  1. 我們點選EditText不能彈出軟鍵盤
  2. 監聽焦點獲取之後彈出彈框
  3. 彈框完成之後我們需要手動的給EditText焦點
  4. 獲取焦點之後需要設定游標與軟鍵盤

程式碼邏輯如下: ```java mBankAccountEt.setShowSoftInputOnFocus(false); mBankAccountEt.setOnFocusChangeListener((v, hasFocus) -> { if (hasFocus && !isShowedBankAccountNotice) { showBankAccountNoticePopup(); } });

 private void showBankAccountNoticePopup() {
    BasePopupView mPopupView = new XPopup.Builder(mActivity)
            .moveUpToKeyboard(false)
            .hasShadowBg(true)
            .asCustom(new BankNameNoticePopup(mActivity, () -> {
                isShowedBankAccountNotice = true;
                mBankAccountEt.setShowSoftInputOnFocus(true);

                //需要把焦點設定回EditText
                mBankAccountEt.setFocusable(true);
                mBankAccountEt.setFocusableInTouchMode(true);
                mBankAccountEt.requestFocus();
                mBankAccountEt.setSelection(mBankAccountEt.getText().toString().length());

                KeyboardUtils.showKeyboard(mBankAccountEt);
            }));

    if (mPopupView != null && !mPopupView.isShow()) {
        mPopupView.show();
    }
}

```

彈框就不給大家展示了,非常簡單的彈窗,定義使用的彈窗庫,邏輯都在完成的回撥中。

KeyboardUtils工具類,控制EditText的軟鍵盤展示與隱藏 ```java / * 顯示鍵盤 * / public static void showKeyboard(View view) { InputMethodManager imm = (InputMethodManager) view.getContext().getSystemService(Context.INPUT_METHOD_SERVICE); if (imm != null) { view.requestFocus(); imm.showSoftInput(view, 0); } }

/*
* 隱藏鍵盤
* */
public static void hideKeyboard(View view){
    InputMethodManager imm = (InputMethodManager) view.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);
    if (imm != null) {
        imm.hideSoftInputFromWindow(view.getWindowToken(),0);
    }
}

```

效果:

六、RV + EditText複用的問題

不知道大家有沒有在RV中使用過 EditText ,Item中如果有 EditText 那麼在滾出螢幕之後 再拉回來可能剛才輸入的文字就消失了,或者換成不是剛才輸入的文字了,是因為快取複用,可能複用了別的Item上面的 EditText 控制元件。

有幾種解決方法如下:

方法一: 強制的停用Recyclerview的複用

java helper.setIsRecyclable(false); 但是RV就無法快取與回收了,如果你的Item數量就是固定的並且不多,那麼使用這個方法是最好的。

方法二: 通過監聽焦點來新增或移除Edittext的TextChangedListener

```java @Override protected void convert(BaseViewHolder helper, EdittextInRecyclerViewOfBean item) { EditText editText = helper.getView(R.id.et); editText.setText(item.getNum() + "");

TextWatcher textWatcher = new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {

    }

    @Override
    public void afterTextChanged(Editable s) {
        //這裡處理資料
        if (TextUtils.isEmpty(s.toString())) {
            item.setNum(0);
        } else {
            item.setNum(Integer.parseInt(s.toString()));
        }
    }
};

editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus){
            editText.addTextChangedListener(textWatcher);
        }else {
            editText.removeTextChangedListener(textWatcher);
        }
    }
});

}

```

方法三: 通過view的setTag()方法解決

```java @Override protected void convert(BaseViewHolder helper, EdittextInRecyclerViewOfBean item) { TextWatcher textWatcher = new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) {

    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {

    }

    @Override
    public void afterTextChanged(Editable s) {
        if (TextUtils.isEmpty(s.toString())) {
            item.setNum(0);
        } else {
            item.setNum(Integer.parseInt(s.toString()));
        }
    }
};

EditText editText = helper.getView(R.id.et);
//為了避免TextWatcher在呼叫settext()時被呼叫,提前將它移除
if (editText.getTag() instanceof TextWatcher) {
    editText.removeTextChangedListener((TextWatcher) editText.getTag());
}
editText.setText(item.getNum() + "");
//重新新增上TextWatcher監聽
editText.addTextChangedListener(textWatcher);
//將TextWatcher繫結到EditText
editText.setTag(textWatcher);

}

```

方法四: 為每個EditText的繫結位置 ```java public class EditTextInRecyclerViewAdapter extends RecyclerView.Adapter { private List mList = new ArrayList<>();

public void setData(List<EdittextInRecyclerViewOfBean> list) {
    this.mList = list;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_edittext, parent, false);
    return new ViewHolder(v, new ITextWatcher());
}

@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
    ViewHolder viewHolder = (ViewHolder) holder;
    viewHolder.mITextWatcher.bindPosition(position);
    viewHolder.mEditText.setText(mList.get(position).getNum()+"");
}

@Override
public int getItemCount() {
    return mList.size();
}

class ViewHolder extends RecyclerView.ViewHolder {
    EditText mEditText;
    ITextWatcher mITextWatcher;

    private ViewHolder(View v, ITextWatcher watcher) {
        super(v);
        this.mEditText = v.findViewById(R.id.et);
        this.mITextWatcher = watcher;
        this.mEditText.addTextChangedListener(watcher);
    }
}

class ITextWatcher implements TextWatcher {
    private int position;

    private void bindPosition(int position) {
        this.position = position;
    }

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

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
    }

    @Override
    public void afterTextChanged(Editable s) {
        if (TextUtils.isEmpty(s.toString())) {
            mList.get(position).setNum(0);
        } else {
            mList.get(position).setNum(Integer.parseInt(s.toString()));
        }
    }
}

}

```

方法五: 構造方法中新增TextChanged ```java class PicViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

var ivPic: ImageView = itemView.findViewById(R.id.ivPic)
var etScore: EditText = itemView.findViewById(R.id.etScore)
var tvTitle: TextView = itemView.findViewById(R.id.tvTitle)
var myTextWatcher: MyTextWatcher = MyTextWatcher()

init {
    etScore.addTextChangedListener(myTextWatcher)
}

fun updateView(picItem: PicItem) {
    myTextWatcher.picItem = picItem
    ivPic.setImageResource(picItem.picResId)
    tvTitle.text = picItem.title
    if (picItem.score == null) {
        etScore.hint = "請輸入分數"
        etScore.setText("")
    } else {
        etScore.setText(picItem.score)
    }
}

}

class MyTextWatcher: TextWatcher {

lateinit var picItem:PicItem

override fun afterTextChanged(s: Editable?) {
    picItem?.apply {
        score=s?.toString()
    }
}

override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
}

override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
}

} ```

方法六: 讓產品改需求,不要使用EditText,或者我們乾脆使用TextView,然後點選Item彈出輸入框的彈框方式來實現。

後記

總結了很多 EditText 不常見的一些問題與解決方案,不知道大家有沒有遇到別的問題,或者一些 EditText 的騷操作,都可以評論區留言補充哦!

關於 EditText 的分享就到這裡了,後面如果有補充我會繼續更新!

完結.

我正在參與掘金技術社群創作者簽約計劃招募活動,點選連結報名投稿