快捷導(dǎo)航

Android 優(yōu)雅的實現(xiàn)通用格式化編輯

更新時間：2021年03月22日 09:47:17 作者：張坤的筆記

這篇文章主要介紹了Android 優(yōu)雅的實現(xiàn)通用格式化編輯，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下

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

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

使用

格式化編輯手機號

布局：

<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 = '-')

格式化編輯身份證號

布局:

<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

實現(xiàn)原理

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

var formatChar: Char = ' '

val formatCharIndexList = ArrayList<Int>()

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

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

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
   }
  }
 }
 ...
}