[안드로이드] 6자리 블록으로 만들어진 인증번호 입력 만들기(자동 넘김, 자동 지움)

안드로이드 앱개발 프로젝트에서 인증번호의 레이아웃을 예쁘게(?) 만들 필요가 생겨서 만들게 되었습니다. 각 6개의 editText를 만들어 인증번호를 입력받으며 각 한 자리를 입력 받으면 다음 칸으로 넘어가고 지우면 바로 뒤의 editText로 돌아가게 만들었습니다.

일단 아래와 같이 클래스를 만들어줍니다.

import android.os.Bundle
import android.view.KeyEvent
import android.view.View
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.core.widget.addTextChangedListener
import com.connple.weat.R
import kotlinx.android.synthetic.main.activity_test.*

class TestActivity : AppCompatActivity() {
    private var cert: String = ""
    private lateinit var certNum: Array<EditText>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        certNum = arrayOf(
            sign_certNum_1,
            sign_certNum_2,
            sign_certNum_3,
            sign_certNum_4,
            sign_certNum_5,
            sign_certNum_6
        )
        setContentView(R.layout.activity_test)
        setCertNumOnTextChangedListener()
        onDelKeyListener()
        activity_test_button.setOnClickListener(onClickButtonListener())

    }

     private fun onClickButtonListener(): View.OnClickListener? {
        return View.OnClickListener {
            if (cert.length != 6)
                Toast.makeText(applicationContext, "인증번호를 전부 입력해주세요.", Toast.LENGTH_SHORT).show()
            else {
                for (i in 0..5) cert += certNum[i].text
                Toast.makeText(applicationContext, cert, Toast.LENGTH_SHORT).show()
            }
        }
    }

    private fun onDelKeyListener() {
        for (idx in 1..5) certNum[idx].setOnKeyListener { view: View, i: Int, keyEvent: KeyEvent ->
            if (i == KeyEvent.KEYCODE_DEL) {
                certNum[idx - 1].requestFocus()
            }
            false
        }
    }

    private fun setCertNumOnTextChangedListener() {
        for (idx in 0 until certNum.size - 1) certNum[idx].addTextChangedListener {
            if (certNum[idx].length() == 1) {
                certNum[idx + 1].requestFocus()
                certNum[idx + 1].text = null
            }
        }
    }
}

그리고 아래와 같이 레이아웃을 만들어줍니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/activity_sign_certNum"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">


        <EditText
            android:id="@+id/sign_certNum_1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="6dp"
            android:background="@drawable/cert_num"
            android:maxLength="1"
            android:inputType="number"
            android:gravity="center"
            android:textSize="22sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toLeftOf="@id/sign_certNum_2"
            android:nextFocusRight="@id/sign_certNum_2" />

        <EditText
            android:id="@+id/sign_certNum_2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="6dp"
            android:background="@drawable/cert_num"
            android:maxLength="1"
            android:inputType="number"
            android:gravity="center"
            android:textSize="22sp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/sign_certNum_1"
            app:layout_constraintRight_toLeftOf="@+id/sign_certNum_3"
            android:nextFocusRight="@id/sign_certNum_3" />

        <EditText
            android:id="@+id/sign_certNum_3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="6dp"
            android:background="@drawable/cert_num"
            android:maxLength="1"
            android:inputType="number"
            android:gravity="center"
            android:textSize="22sp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/sign_certNum_2"
            app:layout_constraintRight_toLeftOf="@+id/sign_certNum_4"
            android:nextFocusRight="@id/sign_certNum_4" />

        <EditText
            android:id="@+id/sign_certNum_4"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="6dp"
            android:background="@drawable/cert_num"
            android:maxLength="1"
            android:inputType="number"
            android:gravity="center"
            android:textSize="22sp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/sign_certNum_3"
            app:layout_constraintRight_toLeftOf="@+id/sign_certNum_5"
            android:nextFocusRight="@id/sign_certNum_5" />

        <EditText
            android:id="@+id/sign_certNum_5"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="6dp"
            android:background="@drawable/cert_num"
            android:maxLength="1"
            android:inputType="number"
            android:gravity="center"
            android:textSize="22sp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/sign_certNum_4"
            app:layout_constraintRight_toLeftOf="@+id/sign_certNum_6"
            android:nextFocusRight="@id/sign_certNum_6" />

        <EditText
            android:id="@+id/sign_certNum_6"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="6dp"
            android:layout_marginEnd="20dp"
            android:background="@drawable/cert_num"
            android:gravity="center"
            android:inputType="number"
            android:maxLength="1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/sign_certNum_5"
            app:layout_constraintRight_toRightOf="parent"
            android:textSize="22sp" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <Button
        android:id="@+id/activity_test_button"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="20dp"
        android:layout_marginHorizontal="20dp"
        android:text="입력"
        app:layout_constraintTop_toBottomOf="@+id/activity_sign_certNum"
        android:background="@drawable/all_round" />
</androidx.constraintlayout.widget.ConstraintLayout>

setCertNumOnTextChangeListener()의 for문에서 각 editText에 텍스트리스너를 붙여서 입력값의 변화를 관찰 한 후 입력되었을 때 다음 칸으로 포커스를 넘깁니다.

onDelKeyListener()에서는 for문에서 각 editText에 백 스페이스 키를 입력했을 때 바로 뒤의 칸으로 가도록 합니다.

그리고 onClickButtonListener()에서 cert의 길이를 확인한 후 길이가 6이 아니면 토스트로 알려주고 6이라면 cert를 출력합니다.

이상입니다.

많은 도움 되셨길 바랍니다!!

이웃, 공감은 블로거에게 큰 힘이 됩니다. ㅠㅠ