编辑 OTP 的文本，每个字母位于不同的位置 [英] Edit text for OTP with Each letter in separate positions

问题描述

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

I'm working on a application which asks for OTP when user want to reset his password for which I need a text like the one in attached Image... What I thought to proceed with is individual editText for each of the letter, All of them arranged in linear layout of horizontal orientation with some margin and max length as 1 so only one letter can be entered in each editText... Is that a right Approach?? Any Suggestions??

推荐答案

在所有这些答案之后，我没有找到我想要的，因为考虑到 UI/UX，元素的删除存在缺陷，以至于返回上一个 EditText，当前 EditText 不应为空.

After all of these answers, I didn't find what I wanted as considering the UI/UX, the deletion of element was flawed in such a way that to go back to previous EditText, current EditText should not be empty.

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

Here's the solution I've implemented in Kotlin which works for Deletion by the Delete Key, pressed on the keyboard. Also, the delete function is implemented as such that when the current EditText is empty and Delete key is pressed, it switches back to previous EditText and delete its element also.

1. 这样调用函数:

1. Call the functions as such:

//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))

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

Now, paste these two classes in your current class

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
    }

}

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

Further, to disable the visible cursor, you can either use android:cursorVisible="false" in your EditText tag in the Layout or can use the java function setCursorVisible(false).

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

Edit: I'm using stock widget EditTexts so if you want to display a box around them, just create a drawable layout and set it as background of EditTexts and give them a padding of 5dp. This will create a box and will make it look cooler.

这篇关于编辑 OTP 的文本，每个字母位于不同的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！