안드로이드 이메일, 비밀번호 입력 폼 (머테리얼 디자인) [Android, JAVA]

 

회원가입을 위한 간단한 이메일 / 비밀번호 입력 폼을 구현하려고 한다.

사실 머테리얼 디자인에서 텍스트 필드를 활용하면 정말 쉽게 구현할 수 있다.

Material Design

요로코롬 많은 부분을 쉽게 세팅할 수 있으니 꼭 독스를 읽어보자.

 

xml 세팅

머테리얼 디자인의 텍스트 필드를 보면, TextInputEditText를 TextInputLayout이 감싸는 구조이다.

입력과 관련된 부분은 editText가, 이외 부분들은 layout을 만지면 된다.

따라서 만약 비활성화 시키고 싶다면, setEnabled(false)를 감싸고 있는 Layout에 걸면 된다!

• hint : 도움말 -> 입력되면 라벨로 이동
• endIconMode = "clear_text" : 입력 맨 끝에 x표시로 다 지우는 아이콘
• endIconMode="password_toggle" : 입력 맨 끝에 눈표시 (클릭시 입력 현황이 보이게)

<!--이메일-->
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField_SignUpEmail"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/signup_email"
    android:padding="2dp"
    app:boxBackgroundColor="@color/white"
    app:endIconMode="clear_text"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:singleLine="true"/>
</com.google.android.material.textfield.TextInputLayout>


<!--비밀번호-->
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField_SignUpPassword"
    android:layout_width="@dimen/long_button"
    android:layout_height="wrap_content"
    android:hint="@string/signup_password"
    android:inputType="textPassword"
    android:padding="2dp"
    app:boxBackgroundColor="@color/white"
    app:endIconMode="password_toggle">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:singleLine="true"/>
</com.google.android.material.textfield.TextInputLayout>

 

입력 구현 (검증)

이제 이메일 / 비밀번호의 입력을 검증하려고 한다.

editText에다 입맛에 맛는 TextWatcher를 구현하여 붙여주면 된다.

주목할 부분은 afterTextChanged 부분인데, 이 부분을 통해 실시간으로 입력값이 editText에 들어오면 조건에 맞는지 - 아닌지 검사할 수 있게 된다.

이메일 패턴은 정규식을 통해 검사하였다.

 

또한 메테리얼 디자인에서 제공하는 setError() 함수를 통해 원하는 에러메세지를 띄울 수도 있다.

여기서 setErrorEnabled를 껐다-켰다 하지 않으면 에러메시지가 발생 이후에 소멸되어도 그 공간을 그대로 차지해버리게 된다.

public class EmailWatcher implements TextWatcher {

    private final TextInputLayout emailTextLayout;
    private TextView dupCheckTextView;
    private final String errorMsg;

    public EmailWatcher(TextInputLayout textInputLayout, TextView textView, String errorMsg){
        this.emailTextLayout = textInputLayout;
        this.dupCheckTextView = textView;
        this.errorMsg = errorMsg;
    }
    public EmailWatcher(TextInputLayout textInputLayout, String errorMsg){
        this.emailTextLayout = textInputLayout;
        this.errorMsg = errorMsg;
    }
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    }
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {

    }

    @Override
    public void afterTextChanged(Editable s) {
        if(!validateEmail(s.toString())){
            emailTextLayout.setError(errorMsg);
            emailTextLayout.setErrorEnabled(true);
        }
        else{
            emailTextLayout.setError(null);
            emailTextLayout.setErrorEnabled(false);
        }
        if(dupCheckTextView != null){
            dupCheckTextView.setVisibility(View.INVISIBLE);
        }
    }

    public boolean validateEmail(String s){
        String emailPattern = "[a-zA-Z0-9._-]+@[a-z]+\\.+[a-z]+";
        return s.matches(emailPattern);
    }
}

 

비밀번호의 검증도 비슷하게 조건함수를 변화시켜주면 된다.

이후 프래그먼트에서 이런 식으로 사용하면 된다.

binding.textFieldSignUpEmail.getEditText()
    .addTextChangedListener(new EmailWatcher(binding.textFieldSignUpEmail,
                                             binding.textViewDupChecked, getResources().getString(R.string.signup_error_email)));

 

나아가 이런 식으로 구현한다면, 모든 입력이 검증되었는지의 여부를 굳이 변수를 선언해서 관리하지 않고, 각각의 입력 레이아웃들의 에러가 있는지 없는지 확인하는 방법으로 쉽게 체크할 수 있다.

if(!dupChecked ||
   binding.textFieldSignUpEmail.getError() != null ||
   binding.textFieldSignUpPassword.getError() != null ||
   binding.textFieldSignUpPasswordDup.getError() != null){
    Snackbar.make(binding.getRoot(),getResources().getString("모든 절차를 통과하셔야 합니다."),Snackbar.LENGTH_SHORT).show();
    return;
}

 

결과

 

전문가가 아니라 정확하지 않은 지식이 담겨있을 수 있습니다.
언제든지 댓글로 의견을 남겨주세요!