Android
TextInputLayout

소개

비고

compile 'com.android.support:design:25.3.1'

기본 사용법

TextInputLayout 의 기본 사용법입니다.
설명 섹션에 설명 된대로 build.gradle 파일에 종속성을 추가하십시오.

예:

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

     <EditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:hint="@string/username"/>
 
 </android.support.design.widget.TextInputLayout>

오류 처리

TextInputLayout 을 사용하여 setError 및 setErrorEnabled 메소드를 사용하여 머티리얼 디자인 지침 에 따라 오류 메시지를 표시 할 수 있습니다.

EditText 아래에 오류를 표시하려면 다음을 사용하십시오.

TextInputLayout til = (TextInputLayout) findViewById(R.id.username);
til.setErrorEnabled(true);
til.setError("You need to enter a name");

TextInputLayout 에서 오류를 사용하려면 xml 또는 til.setErrorEnabled(true); 에서 app:errorEnabled="true" 를 사용할 수 있습니다 til.setErrorEnabled(true); 위에 표시된대로.

당신은 얻을 것이다 :

문자 계수 추가하기

TextInputLayout에는 그 안에 정의 된 EditText에 대한 문자 카운터 가 있습니다.
카운터는 EditText 아래에 렌더링됩니다.

setCounterEnabled() 및 setCounterMaxLength 메서드를 사용하면됩니다.

TextInputLayout til = (TextInputLayout) findViewById(R.id.username);
til.setCounterEnabled(true);
til.setCounterMaxLength(15);

또는 xml의 app:counterEnabled 및 app:counterMaxLength 속성

<android.support.design.widget.TextInputLayout
    app:counterEnabled="true"
    app:counterMaxLength="15">

    <EditText/>

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

비밀번호 공개 여부 전환

입력 암호 유형을 사용하면 passwordToggleEnabled 속성을 사용하여 전체 텍스트를 표시하거나 숨길 수있는 아이콘을 활성화 할 수도 있습니다 .

다음 속성을 사용하여 동일한 기본값을 사용자 정의 할 수도 있습니다.

• passwordToggleDrawable : 기본 눈 모양 아이콘을 변경하려면
• passwordToggleTint : 암호 가시성 전환 가능 드로잉에 색조를 적용합니다.
• passwordToggleTintMode : 배경 색조를 적용하는 데 사용되는 혼합 모드를 지정합니다.

예:

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleContentDescription="@string/description"
        app:passwordToggleDrawable="@drawable/another_toggle_drawable"
        app:passwordToggleEnabled="true">

            <EditText/>

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

TextInputEditText

TextInputEditText 는 '추출'모드에 있을 때 IME에서 힌트를 표시하는 추가 수정 기능이있는 EditText 입니다.

추출 모드 는 공간이 너무 작을 때 (예 : 스마트 폰의 경치) EditText를 클릭 할 때 키보드 편집기가 전환되는 모드입니다.
이 경우 텍스트를 편집하는 동안 EditText 를 사용하면 IME가 편집중인 것을 알 수 없다는 것을 알 수 있습니다.

TextInputEditText 는 사용자 장치의 IME가 추출 모드 인 동안 힌트 텍스트를 제공하여이 문제를 해결합니다.

예:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Description"
    >
    <android.support.design.widget.TextInputEditText
        android:id="@+id/description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

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

TextInputLayout의 모양 사용자 정의

styles.xml 에서 사용자 정의 스타일을 정의하여 TextInputLayout 및 포함 된 EditText 의 모양을 사용자 정의 할 수 있습니다. 정의 된 스타일은 TextInputLayout 스타일 또는 테마로 추가 할 수 있습니다.

힌트 모양 사용자 정의 예 :

styles.xml :

<!--Floating label text style-->  
<style name="MyHintStyle" parent="TextAppearance.AppCompat.Small">  
    <item name="android:textColor">@color/black</item>
</style>

<!--Input field style-->  
<style name="MyEditText" parent="Theme.AppCompat.Light">  
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>  

스타일을 적용하려면 다음과 같이 TextInputLayout 및 EditText를 업데이트하십시오.

<android.support.design.widget.TextInputLayout  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/MyHintStyle">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/Title"
        android:theme="@style/MyEditText" />

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

TextInputLayout 의 액센트 색상을 사용자 정의하는 예제입니다. 강조 색상은 EditText 의 기준선 색상과 부동 힌트 텍스트의 텍스트 색상에 영향을줍니다.

styles.xml :

<style name="TextInputLayoutWithPrimaryColor" parent="Widget.Design.TextInputLayout">
    <item name="colorAccent">@color/primary</item>
</style> 

레이아웃 파일 :

<android.support.design.widget.TextInputLayout
            android:id="@+id/textInputLayout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TextInputLayoutWithPrimaryColor">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/textInputEditText_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/login_hint_password"
                android:inputType="textPassword" />

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