格式化編輯的需求一般是從編輯手機(jī)號(hào)開始的，UI 給出的效果不是11個(gè)連續(xù)的數(shù)字，而是采用3、4、4的形式，每段中間會(huì)空一個(gè)字符。在技術(shù)實(shí)現(xiàn)的時(shí)候，一般會(huì)自定義一個(gè)控件 TelEditText 實(shí)現(xiàn)功能，隨著項(xiàng)目迭代，格式化編輯的需求可能會(huì)增加，比如說(shuō)身份證號(hào)、自定義的優(yōu)惠券碼等，這個(gè)時(shí)候再給每種情況自定義一個(gè)控件就沒必要了，通過一個(gè)控件實(shí)現(xiàn)多種格式化編輯需求是更好的方案。

其實(shí)還可以更進(jìn)一步，格式化編輯的核心邏輯就是給 EditText 添加一個(gè) TextWatcher，通過 TextWatcher 中的文本變化回調(diào)來(lái)調(diào)整 EditText 中的文本，所以自定義 EditText 并不是必須的，對(duì)于開發(fā)者需要調(diào)用的字段和方法，可以通過擴(kuò)展函數(shù)的方式提供。

使用

格式化編輯手機(jī)號(hào)

布局：

<androidx.appcompat.widget.AppCompatEditText
    android:id="@+id/etPhone"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="number" />

代碼:

// format is ' '
etPhone.setFormatRules(3, 4, 4)

// format is '-'
etPhone.setFormatRules(3, 4, 4, formatChar = '-')

格式化編輯身份證號(hào)

布局:

<androidx.appcompat.widget.AppCompatEditText
    android:id="@+id/etIDNumber"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:digits="@string/digits_id_number"/>

資源:

<string name="digits_id_number">0123456789xX</string>

代碼:

etIDNumber.setFormatRules(6, 4, 4, 4)

設(shè)置監(jiān)聽

etPhone.setOnFormatEditListener { isComplete, text ->
    if (isComplete) { // 編輯完成
        // 使用 toast 顯示移除格式化的文本
        Toast.makeText(this, text, Toast.LENGTH_SHORT).show()
    }
}

移除格式化的文本

etPhone.textWithFormatRemoved

實(shí)現(xiàn)原理

自定義一個(gè) TextWatcher，定義一個(gè)字段 formatChar，值為格式化字符，默認(rèn)是空格。定義一個(gè)字段 formatCharIndexList，值為 EditText 文本中格式化字符所在位置的列表，比如對(duì)于格式化編輯手機(jī)號(hào)， formatCharIndexList 中的值為 [3, 8]，既在 EditText 文本中格式化字符的位置應(yīng)該是3和8。

var formatChar: Char = ' '

val formatCharIndexList = ArrayList<Int>()

EditText 文本發(fā)生變化后，如果 EditText 文本的最后一個(gè)字符為格式化字符，則刪除最后一個(gè)字符；然后遍歷 EditText 文本中的每一個(gè)字符，如果該字符的位置等于格式化字符位置但不是格式化字符，則在該位置插入一個(gè)格式化字符，如果該字符的位置不等于格式化字符的位置但又是格式化字符，則刪除該格式化字符。

調(diào)用 insertFormatChar 或者 deleteChar 后，afterTextChanged 又會(huì)立即回調(diào)一次，可能會(huì)引起多次添加或刪除，導(dǎo)致格式化錯(cuò)誤。所以每次 afterTextChanged 回調(diào)最多進(jìn)行一次操作，如果后續(xù)還需要操作，放在下一次 afterTextChanged 回調(diào)中進(jìn)行。

override fun afterTextChanged(s: Editable?) {
    val value = s?.toString() ?: return
    if (value.isEmpty()) return
  
    if (value.last() == formatChar) {
        deleteChar(s, value.lastIndex)
        return
    }
  
    value.forEachIndexed { index, c ->
       if (formatCharIndexList.contains(index)) {
            if (c != formatChar) {
                insertFormatChar(s, index)
                return
            }
        } else {
            if (c == formatChar) {
                deleteChar(s, index)
                return
            }
        }
    }
    ...
}

項(xiàng)目地址

format-edit，覺得用起來(lái)很爽的，請(qǐng)不要吝嗇你的 Star ！