Android
TextInputLayout

Invoering

Opmerkingen

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

Basis gebruik

Het is het basisgebruik van de TextInputLayout .
Zorg ervoor dat u de afhankelijkheid toevoegt aan het bestand build.gradle zoals beschreven in de opmerkingen.

Voorbeeld:

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

Fouten afhandelen

U kunt de TextInputLayout gebruiken om foutmeldingen TextInputLayout te geven volgens de richtlijnen voor materiaalontwerp met de methoden setError en setErrorEnabled .

Om de fout onder het EditText-gebruik te tonen:

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

Om fout in de TextInputLayout in te schakelen, kunt u eithr app:errorEnabled="true" in xml of til.setErrorEnabled(true); zoals hierboven getoond.

U verkrijgt:

Tellen van tekens toevoegen

De TextInputLayout heeft een karakter teller voor een EditText gedefinieerd binnen het.
De teller wordt weergegeven onder de EditText.

Gebruik gewoon de setCounterEnabled() en setCounterMaxLength :

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

of de app:counterEnabled en app:counterMaxLength attributen in de xml.

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

    <EditText/>

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

Wachtwoordzichtbaarheid Schakelt

Met een invoerwachtwoordtype kunt u ook een pictogram inschakelen dat de hele tekst kan tonen of verbergen met behulp van het attribuut passwordToggleEnabled .

U kunt ook dezelfde standaard aanpassen met behulp van deze kenmerken:

• passwordToggleDrawable : om het standaard oogpictogram te wijzigen
• passwordToggleTint : om een tint toe te passen op het teken van de zichtbaarheidsschakelaar.
• passwordToggleTintMode : om de overvloeimodus op te geven die wordt gebruikt om de achtergrondtint toe te passen.

Voorbeeld:

<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

De TextInputEditText is een EditText met een extra fix om een hint weer te geven in de IME in de 'extract'-modus .

De Extract-modus is de modus waarnaar de toetsenbordeditor overschakelt wanneer u op een EditText klikt wanneer de ruimte te klein is (bijvoorbeeld liggend op een smartphone).
In dit geval kunt u met een EditText terwijl u de tekst bewerkt, zien dat de IME u geen hint geeft van wat u bewerkt

De TextInputEditText lost dit probleem op met hint-tekst terwijl de IME van het apparaat van de gebruiker in de Extract-modus staat.

Voorbeeld:

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

Het uiterlijk van de TextInputLayout aanpassen

U kunt het uiterlijk van de TextInputLayout en de ingesloten EditText door aangepaste stijlen in uw styles.xml . De gedefinieerde stijlen kunnen worden toegevoegd als stijlen of thema's aan uw TextInputLayout .

Voorbeeld voor het aanpassen van de hintweergave:

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>  

Om Style toe te passen, werkt u uw TextInputLayout en EditText als volgt bij

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

Voorbeeld om de accentkleur van de TextInputLayout . De accentkleur beïnvloedt de kleur van de basislijn van de EditText en de tekstkleur voor de zwevende EditText :

styles.xml :

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

layout bestand:

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