Android
TextInputLayout

Introduktion

Anmärkningar

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

Grundläggande användning

Det är den grundläggande användningen av TextInputLayout .
Se till att lägga till beroendet i build.gradle filen som beskrivs i kommentarerna.

Exempel:

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

Hantera fel

Du kan använda TextInputLayout att visa felmeddelanden enligt riktlinjerna för materialdesign med hjälp av setError och setErrorEnabled .

För att visa felet under EditText använder du:

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

För att aktivera fel i TextInputLayout du eithr använda app:errorEnabled="true" i xml eller til.setErrorEnabled(true); som visas ovan.

Du får:

Lägga till teckenräkning

Den TextInputLayout har en teckenräknare för en Edittext definieras i det.
Räknaren kommer att visas under EditText.

setCounterEnabled() och setCounterMaxLength :

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

eller app:counterEnabled och app:counterMaxLength attribut i xml.

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

    <EditText/>

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

Lösenordets synlighet växlar

Med en inmatad lösenordstyp kan du också aktivera en ikon som kan visa eller dölja hela texten med attributet passwordToggleEnabled .

Du kan också anpassa samma standard med hjälp av dessa attribut:

• passwordToggleDrawable : för att ändra standardögonikonen
• passwordToggleTint : för att applicera en nyans på lösenordets synlighet för att kunna dra ut.
• passwordToggleTintMode : för att ange blandningsläget som används för att tillämpa bakgrundsfärgen.

Exempel:

<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 är ett EditText med en extra fix för att visa en ledtråd i IME i "extrakt" -läge .

Extract-läget är det läge som tangentbordsredigeraren byter till när du klickar på ett EditText när utrymmet är för litet (till exempel liggande på en smartphone).
I det här fallet, med ett EditText när du redigerar texten, kan du se att IME inte ger dig antydan till vad du redigerar

TextInputEditText åtgärdar det här problemet som ger antydanstext medan användarens enhets IME är i Extract-läge.

Exempel:

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

Anpassa utseendet på TextInputLayout

Du kan anpassa utseendet på TextInputLayout och dess inbäddade EditText genom att definiera anpassade stilar i dina styles.xml . De definierade stilarna kan antingen läggas till som stilar eller teman till din TextInputLayout .

Exempel för anpassning av antydan till antydan:

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>  

För att tillämpa stil uppdaterar du TextInputLayout Och EditText enligt följande

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

Exempel för att anpassa accentfärgen för TextInputLayout . Accentfärgen påverkar färgen på baslinjen för EditText och EditText för den flytande antydningstexten:

styles.xml :

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

layoutfil:

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