编辑 OTP 的文本，每个字母位于不同的位置

Question

我正在开发一个应用程序，当用户想要重置他的密码时要求 OTP它们以 水平 方向的线性布局排列，具有一定的边距和最大长度为 1，因此每个 editText 中只能输入一个字母…这是正确的 方法吗？ 有什么建议么？？

原文由 Moulesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在所有这些答案之后，考虑到 UI/UX，我没有找到我想要的，元素的删除存在缺陷，以至于要回到以前的 EditText ，当前的 EditText 不应该是空的。

这是我在 Kotlin 中实现的解决方案，它适用于按键盘上的 Delete 键进行删除。此外，删除功能是这样实现的，当当前的 EditText 为空并按下 Delete 键时，它会切换回之前的 EditText 并删除其元素。

1. 像这样调用函数：

    //GenericTextWatcher here works only for moving to next EditText when a number is entered
   //first parameter is the current EditText and second parameter is next EditText
   editText1.addTextChangedListener(GenericTextWatcher(editText1, editText2))
   editText2.addTextChangedListener(GenericTextWatcher(editText2, editText3))
   editText3.addTextChangedListener(GenericTextWatcher(editText3, editText4))
   editText4.addTextChangedListener(GenericTextWatcher(editText4, null))

   //GenericKeyEvent here works for deleting the element and to switch back to previous EditText
   //first parameter is the current EditText and second parameter is previous EditText
   editText1.setOnKeyListener(GenericKeyEvent(editText1, null))
   editText2.setOnKeyListener(GenericKeyEvent(editText2, editText1))
   editText3.setOnKeyListener(GenericKeyEvent(editText3, editText2))
   editText4.setOnKeyListener(GenericKeyEvent(editText4,editText3))

1. 现在，将这两个类粘贴到您当前的类中

   class GenericKeyEvent internal constructor(private val currentView: EditText, private val previousView: EditText?) : View.OnKeyListener{
       override fun onKey(p0: View?, keyCode: Int, event: KeyEvent?): Boolean {
           if(event!!.action == KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_DEL && currentView.id != R.id.editText1 && currentView.text.isEmpty()) {
               //If current is empty then previous EditText's number will also be deleted
               previousView!!.text = null
               previousView.requestFocus()
               return true
           }
           return false
       }


   }

   class GenericTextWatcher internal constructor(private val currentView: View, private val nextView: View?) : TextWatcher {
       override fun afterTextChanged(editable: Editable) { // TODO Auto-generated method stub
           val text = editable.toString()
           when (currentView.id) {
               R.id.editText1 -> if (text.length == 1) nextView!!.requestFocus()
               R.id.editText2 -> if (text.length == 1) nextView!!.requestFocus()
               R.id.editText3 -> if (text.length == 1) nextView!!.requestFocus()
               //You can use EditText4 same as above to hide the keyboard
           }
       }

       override fun beforeTextChanged(
           arg0: CharSequence,
           arg1: Int,
           arg2: Int,
           arg3: Int
       ) { // TODO Auto-generated method stub
       }

       override fun onTextChanged(
           arg0: CharSequence,
           arg1: Int,
           arg2: Int,
           arg3: Int
       ) { // TODO Auto-generated method stub
       }

   }

此外，要禁用可见光标，您可以在布局中的 EditText 标记中使用 android:cursorVisible="false" ，也可以使用 java 函数 setCursorVisible(false) 。

编辑：我正在使用库存小部件 EditTexts 所以如果你想在它们周围显示一个框，只需创建一个可绘制布局并将其设置为 EditTexts 的背景并给它们一个填充5dp。这将创建一个盒子，让它看起来更酷。

原文由 Lalit Fauzdar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

当您想要以更少的努力获得类似的东西时，只需使用 PinEntryEditText 库。

原文由 Kishan Solanki 发布，翻译遵循 CC BY-SA 4.0 许可协议