Android
TextInputLayout

Einführung

Bemerkungen

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

Grundlegende Verwendung

TextInputLayout ist die grundlegende Verwendung des TextInputLayout .
build.gradle Sie sicher, dass Sie die Abhängigkeit in der Datei build.gradle , wie im Abschnitt "Anmerkungen" beschrieben.

Beispiel:

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

Fehler behandeln

Mit dem TextInputLayout können Sie Fehlermeldungen gemäß den Richtlinien für das Materialdesign mit den Methoden setError und setErrorEnabled .

Um den Fehler unter dem EditText anzuzeigen, verwenden Sie:

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

Um einen Fehler im TextInputLayout , können Sie entweder app:errorEnabled="true" in xml oder til.setErrorEnabled(true); wie oben gezeigt.

Sie erhalten:

Zeichenzählung hinzufügen

Der TextInputLayout hat einen Zeichenzähler für einen EditText darin definiert.
Der Zähler wird unter dem EditText dargestellt.

Verwenden setCounterEnabled() setCounterMaxLength Methoden setCounterEnabled() und setCounterMaxLength :

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

oder die app:counterEnabled und app:counterMaxLength Attribute in der XML- app:counterMaxLength .

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

    <EditText/>

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

Passwort-Sichtbarkeit wechselt

Mit einem Eingabepassworttyp können Sie auch ein Symbol aktivieren, das den gesamten Text mithilfe des Attributs passwordToggleEnabled anzeigen oder ausblenden kann .

Sie können denselben Standard auch mit diesen Attributen anpassen:

• passwordToggleDrawable : um das standardmäßige Augensymbol zu ändern
• passwordToggleTint : Um dem Zeichen für die Sichtbarkeit von Kennwörtern einen Farbton zuzuweisen, kann ein Zeichen gesetzt werden.
• passwordToggleTintMode : Zum Angeben des Mischmodus für die Hintergrundfarbe.

Beispiel:

<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

Der TextInputEditText ist ein EditText mit einem zusätzlichen Fix, um einen Hinweis im IME anzuzeigen, wenn sich der Modus "Extrahieren" befindet .

Der Modus "Extrahieren" ist der Modus, in den der Tastatureditor wechselt, wenn Sie auf einen EditText klicken, wenn der Platz zu klein ist (z. B. Querformat auf einem Smartphone).
EditText Sie während der Bearbeitung des Textes einen EditText Sie in diesem Fall, dass der IME Ihnen keinen Hinweis darauf gibt, was Sie bearbeiten

Der TextInputEditText behebt dieses Problem, indem er einen TextInputEditText bereitstellt, während sich der IME des Benutzergeräts im Extraktionsmodus befindet.

Beispiel:

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

Anpassen der Darstellung des TextInputLayout

Sie können das Erscheinungsbild des TextInputLayout und des eingebetteten EditText indem Sie benutzerdefinierte Stile in Ihrer styles.xml . Die definierten Stile können entweder als Stile oder Designs zu Ihrem TextInputLayout .

Beispiel zum Anpassen des Hinweisaussehens:

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>  

Um den Style anzuwenden, aktualisieren Sie TextInputLayout und EditText wie folgt

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

Beispiel zum Anpassen der Akzentfarbe des TextInputLayout . Die Akzentfarbe beeinflusst die Farbe der Grundlinie des EditText und die EditText für den schwebenden EditText :

styles.xml :

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

Layoutdatei:

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