Android
TextInputLayout

Wprowadzenie

Uwagi

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

Podstawowe użycie

Jest to podstawowe użycie TextInputLayout .
Pamiętaj o dodaniu zależności do pliku build.gradle zgodnie z opisem w sekcji uwag.

Przykład:

 <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>

Obsługa błędów

Za pomocą TextInputLayout można wyświetlać komunikaty o błędach zgodnie z wytycznymi dotyczącymi projektowania materiałów przy użyciu metod setError i setErrorEnabled .

Aby wyświetlić błąd poniżej EditText użyj:

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

Aby włączyć błąd w TextInputLayout , możesz użyć app:errorEnabled="true" w xml lub til.setErrorEnabled(true); jak wyżej.

Otrzymasz:

Dodawanie liczenia znaków

TextInputLayout ma zdefiniowany licznik znaków dla EditText.
Licznik zostanie wyrenderowany poniżej EditText.

Wystarczy użyć setCounterEnabled() i setCounterMaxLength :

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

lub atrybuty app:counterEnabled i app:counterMaxLength w app:counterMaxLength XML.

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

    <EditText/>

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

Widoczność hasła Przełącza

Wprowadzając typ hasła, możesz także włączyć ikonę, która może wyświetlać lub ukrywać cały tekst za pomocą atrybutu passwordToggleEnabled .

Możesz również dostosować te same wartości domyślne, używając tych atrybutów:

• passwordToggleDrawable : aby zmienić domyślną ikonę oka
• passwordToggleTint : aby zastosować odcień do przełączania widoczności hasła, który można rysować.
• passwordToggleTintMode : aby określić tryb mieszania używany do zastosowania odcienia tła.

Przykład:

<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 to EditText z dodatkową poprawką do wyświetlania podpowiedzi w edytorze IME w trybie „wyodrębniania” .

Tryb wyodrębniania to tryb, w którym edytor klawiatury przełącza się po kliknięciu przycisku Edytuj tekst, gdy przestrzeń jest zbyt mała (na przykład poziomo na smartfonie).
W takim przypadku, używając EditText podczas edytowania tekstu, możesz zobaczyć, że edytor IME nie daje ci wskazówki co edytujesz

TextInputEditText rozwiązuje ten problem, podając tekst podpowiedzi, gdy edytor IME urządzenia użytkownika jest w trybie wyodrębniania.

Przykład:

<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>

Dostosowywanie wyglądu TextInputLayout

Możesz dostosować wygląd TextInputLayout i jego osadzonego EditText poprzez zdefiniowanie niestandardowych stylów w styles.xml . Zdefiniowane style można dodać jako style lub motywy do TextInputLayout .

Przykład dostosowywania wyglądu podpowiedzi:

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>  

Aby zastosować styl, zaktualizuj TextInputLayout i EditText w następujący sposób

<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>  

Przykład dostosowania koloru akcentu TextInputLayout . Kolor akcentu wpływa na kolor linii bazowej EditText i kolor tekstu dla pływającej podpowiedzi:

styles.xml :

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

plik układu:

<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>