안드로이드 스튜디오 비밀번호 확인 - andeuloideu seutyudio bimilbeonho hwag-in

Intro

보통 회원가입을 할 때, 비밀번호를 입력받고, 한 번 더 확인하는 차원에서 다시한번 입력받는다.

그리고 그 두 입력이 일치하는 경우에만 회원가입에 성공할 수 있다.

이번에는 안드로이드에서 그 기능을 구현해보려고 한다.

요구사항

- 비밀번호 입력란과 비밀번호 확인란을 만든다.

- 비밀번호 입력과 확인란의 문자열이 같을 경우 "일치합니다", 다를 경우 "일치하지 않습니다"라는 문구를 띄운다.

- 비밀번호가 일치할 경우에만 '가입하기' 버튼을 활성화 시킨다.

- x 를 누르면 문자열이 전부 지워진다. (선택)

1. 먼저 뷰를 위한 xml 코드를 작성해준다.

이건 예시이다.

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

    <ImageButton
        android:id="@+id/pw_back"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginTop="47dp"
        android:background="#00000000"
        android:src="@drawable/ic_back"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        style="@style/SigntitleTextView"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:text="회원가입"/>

    <TextView
        style="@style/SignimporTextView"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:text="비밀번호 입력"/>

    <TextView
        style="@style/SignexTextView"
        android:id="@+id/ex1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="200dp"
        android:text="비밀번호조건문:어쩌구저쩌구"/>

    <EditText
        android:id="@+id/edit_up_pw"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/ex1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="1dp"
        android:hint="비밀번호 입력"
        />

    <ImageButton
        android:id="@+id/clear_text4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#00000000"
        android:src="@drawable/ic_clear"
        app:layout_constraintEnd_toEndOf="@id/edit_up_pw"
        app:layout_constraintBottom_toBottomOf="@id/edit_up_pw"
        android:layout_marginBottom="10dp"
        />

    <TextView
        style="@style/SignimporTextView"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="296dp"
        android:text="비밀번호 확인"/>

    <TextView
        style="@style/SignexTextView"
        android:id="@+id/pw_confirm"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="360dp"
        android:text="똑같이쓰세용"/>

    <EditText
        android:id="@+id/edit_up_pw2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/pw_confirm"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginTop="1dp"
        android:hint="비밀번호 입력"
        />

    <ImageButton
        android:id="@+id/clear_text5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#00000000"
        android:src="@drawable/ic_clear"
        app:layout_constraintEnd_toEndOf="@id/edit_up_pw2"
        app:layout_constraintBottom_toBottomOf="@id/edit_up_pw2"
        android:layout_marginBottom="10dp"
        />

    <Button
        style="@style/BtnStyle"
        android:id="@+id/sign_up_btn2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:enabled="false"
        android:text="가입하기" />


</androidx.constraintlayout.widget.ConstraintLayout>

참고로, 마지막의 버튼 스타일은 따로 구현해 준 것이다.

style 태그를 이용해 속성에 스타일을 적용하는 방법은 아래의 포스팅을 참고하자.

[Android/Kotiln] style.xml(스타일 및 테마)를 활용하여 속성 설정하기

xml 파일에서 속성을 정의하다 보면 반복되는 코드들이 눈에 뜬다. 같은 버튼을 만든다고 할 때, 매번 긴 코드를 반복해서 복사+붙여넣기를 하면 가독성이 떨어지기 마련이다. 이럴 땐, styles.xml를

hu-coding.tistory.com

2. 비밀번호 확인 여부 및 버튼 활성화를 위한 코드를 작성해준다.

 edit_up_pw2.addTextChangedListener(object : TextWatcher {
            //입력이 끝났을 때
            //4. 비밀번호 일치하는지 확인
            override fun afterTextChanged(p0: Editable?) {
                if(edit_up_pw1.getText().toString().equals(edit_up_pw2.getText().toString())){
                    pw_confirm.setText("비밀번호가 일치합니다.")
                    pw_confirm.setTextColor(colorMain)
                    // 가입하기 버튼 활성화
                    sign_up_btn2.isEnabled=true
                }
                else{
                    pw_confirm.setText("비밀번호가 일치하지 않습니다.")
                    pw_confirm.setTextColor(red)
                    // 가입하기 버튼 비활성화
                    sign_up_btn2.isEnabled=false
                }
            }
            //입력하기 전
            override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {

            }
            //텍스트 변화가 있을 시
            override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
                if(edit_up_pw1.getText().toString().equals(edit_up_pw2.getText().toString())){
                    pw_confirm.setText("비밀번호가 일치합니다.")
                    pw_confirm.setTextColor(colorMain)
                    // 가입하기 버튼 활성화
                    sign_up_btn2.isEnabled=true
                }
                else{
                    pw_confirm.setText("비밀번호가 일치하지 않습니다.")
                    pw_confirm.setTextColor(red)
                    // 가입하기 버튼 비활성화
                    sign_up_btn2.isEnabled=false
                }
            }
        })

• - addTextChangedListner를 이용해서 editText에 입력관련 이벤트 처리를 해준다.
• - 해당 리스너 안에서 텍스트를 입력하기 전, 텍스트 변화가 있을 시, 입력이 끝났을 때에 해당하는 함수를 오버라이드 해준다.
• - 해당하는 함수 안에 if문을 이용해 두 edittext의 값이 일치하는지 확인해준다.
• - 일치한다면 "비밀번호가 일치합니다" 문구를 띄우고, '가입하기' 버튼을 활성화 시켜준다.