안드로이드 TextInputLayout 알아보기

 TextInputLayout 개요

TextInputLayout은 EditText에 입력된 텍스트를 기반으로 View가 유동적으로 반응하기 위해서 고안된 레이아웃입니다. 기본적으로 LinearLayout을 상속받고 있으며, 그냥 EditText가 아닌 TextInputEditText를 자식으로 감싸서 사용합니다. 실제 작동 화면 및 XML과 Java 문서를 통해 대표적인 기능들을 살펴보도록 하겠습니다. 

 1. 준비 작업 

TextInputLayout은 design 라이브러리가 있어야 사용 가능합니다. 

design 라이브러리가 없다면 Build.gradle 파일에 최신 버전의 라이브러리를 추가해줍시다.

dependencies { implementation 'com.android.support:design:27.1.1' }

 2. XML 문서 작성

TextInputLayout으로 TextInputEditText를 감싸줍니다.

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.design.widget.TextInputLayout>

 3. 대표적인 기능 알아보기

3-1. 라벨 메시지 띄우기

EditText에 포커스가 주어질 때 EditText의 힌트가 TextInputLayout으로 이동해 라벨 메시지로 표시됩니다. 

How To? 

▶ 자식 EditText에 힌트를 설정합니다. 

<android.support.design.widget.TextInputEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="아이디 입력"/>

3-2. 텍스트 글자수 세기

입력된 텍스트의 글자수를 세어 EditText 하단에 표시해줍니다.

만약 제한된 범위를 초과하면 라벨 메시지, EditText, 카운터 메시지 등의 색이 변하여 글자수가 초과되었음을 사용자가 인지할 수 있게 합니다.

How To? 

▶ TextInputLayout에 정의된 아래의 메소드를 사용합니다.

1) setCounterEnabled(boolean enabled) : true면 카운터를 사용함. 기본 값은 false. 

2) setCounterMaxLength(int maxLength) : 텍스트 길이의 최대값 설정. 0보다 같거나 작으면 최대값이 보이지 않음(입력된 텍스트의 길이 값만 보임). 기본 값은 -1. 

TextInputLayout inputLayout = findViewById(R.id.input_layout);

inputLayout.setCounterEnabled(true);
inputLayout.setCounterMaxLength(10);

3-3. 에러 메시지 표시하기 

사용자가 개발자의 의도를 벗어났을 때 에러 메시지를 띄워 알려줄 수 있습니다. 예컨대 사용하면 안 되는 문자를 사용했거나(특수 문자 등), 반드시 필요한 문자를 사용하지 않았을 경우(이메일 주소에서의 "@" 등)에 활용할 수 있겠습니다.    

How To? 

▶ TextInputLayout에 정의된 아래의 메소드를 사용합니다.

1) setError(CharSequence error) : 특정 상황 발생시 입력한 에러 메시지를 띄워줍니다. 

2) setError(null) : 에러 상황에서 벗어났을 때 에러 메시지를 지워주는 역할을 합니다.  

*) setErrorEnabled(boolean enbled) : 에러 메시지 기능을 사용할지에 대한 여부를 결정합니다. 기본적으로 false이지만, setError의 에러 메시지가 null이 아닌 경우 자동적으로 true로 설정됩니다. 아래 예제에서는 생략하였습니다.   

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final TextInputLayout inputLayout = findViewById(R.id.input_layout);

    // getEditText() 메소드로 간편하게 불러올 수 있음
    EditText editText = inputLayout.getEditText();

    editText.addTextChangedListener(new TextWatcher() {
        @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 (s.toString().contains("#")) {
                inputLayout.setError("특수 문자는 사용할 수 없습니다.");
            } else {
                inputLayout.setError(null); // null은 에러 메시지를 지워주는 기능
            }

        }
    });
}

참고로 위 예제에선 편의상 "#"을 예로 들어 설명하였지만 자바 정규식을 활용하면 더 간편하게 여러 문자를 제한할 수 있겠습니다.  

3-4. 비밀번호 위장 여부 표시 버튼 

비밀번호의 위장 여부를 설정해주는 토글 버튼을 EditText 끝 부분에 달아줍니다. 

EditText의 inputType이 textPassword로 설정되어 있어야 정상적으로 작동합니다. 

(일반 텍스트만 보여주는 EditText에서는 버튼 자체가 나타나지 않습니다.) 

How To? 

▶ TextInputLayout에 정의된 아래의 메소드를 사용합니다.

1) setPasswordVisibilityToggleEnabled(boolean enabled) : 토글 버튼 사용 여부 결정. 기본 값은 false. 

TextInputLayout inputLayout = findViewById(R.id.input_layout);

inputLayout.setPasswordVisibilityToggleEnabled(true);

 참조

// 개발자 문서 

https://developer.android.com/reference/android/support/design/widget/TextInputLayout