問題描述

我正在開發一個應用程序，當用戶想要重置他的密碼時要求 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))

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 的文本，每個字母位于不同的位置的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！