Die Anleitung zu Android TextInputLayout

View more Tutorials:

1- Android TextInputLayout

TextInputLayout ist ein Interface-Komponente, die ein Texteingabefeld (Text Input Field) visuell enthält und unterstützt. Wenn  EditText verwendet wird, stellen Sie sicher, dass der  android:background   @null ist, damit  TextInputLayout den entsprechenden Hintergrund dafür festlegen kann. 
Der Hinweistext (hint text) wird automatisch angezeigt, wenn der Benutzer auf EditText fokussiert (focus).
 
In einem Kennwortfeld (Password field) mit einem ImageView rechts kann das Kenntwort angezeigt werden.
 
TextInputLayout ist eine Unterklasse von  LinearLayout, sodass die untergeordneten  View in einer Zeile oder Spalte angeordnet werden können. Wenn eine der untergeordneten  View ein Texteingabefeld wie  EditText ist, spielt die sonstigen anderen Untergeordneten  View eine Rolle als die visuelle Hilfsmittel.
Hinweis: Sie können auch  TextInputLayout verschachteln, um eine komplexere Interface zu erhalten.

Library:

TextInputLayout ist in der Standardbibliothek von  Android nicht verfügbar. Daher müssen Sie es über die Palette vom Design-Fenster in Ihr Projekt installieren oder diese Bibliothek manuell deklarieren.
Nach der Installation der Bibliothek aus  Palette wird sie in der Datei  build.gradle (Module: app) ​​​​​​​deklariert:
implementation 'com.google.android.material:material:1.0.0'
 

2- Floating Hint

Der Hinweistext (hint text), der automatisch angezeigt wird wenn sich der Benutzer auf einen  EditText fokussiert ( focus), ist die grundlegende Unterstützungsfunktion von TextInputLayout, die Sie verwenden können, ohne zusätzliche Code Zeilen Java schreiben zu müssen. 
Ziehen Sie ein  TextInputLayout in die Interface und legen Sie es dort ab. Standardmäßig enthält es eine untergeordnete  View mit dem Name von  TextInputEditText. Das ist eine untergeordnete Klasse von  EditText.
<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginLeft="16dp"
    android:layout_marginTop="50dp"
    android:layout_marginEnd="16dp"
    android:layout_marginRight="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Username" />

</com.google.android.material.textfield.TextInputLayout>
Und hier ist die Ergebnisse:
Einige Attribut im Zusammenhang mit der Funktion  "Floating Hint" sind:
  • app:hintEnabled   (Default true)
  • app:hintAnimationEnabled   (Default true)
  • app:hintTextAppearance

app:hintEnabled

Das Attribut  app:hintEnabled wird verwendet, um die Funktion "Floating Hint" von  TextInputLayout zu enable/disable (aktivieren/deaktivieren). Der Standardwert ist  true.

app:hintAnimationEnabled

Das Attribut  app:hintAnimationEnabled gibt an, ob eine Animation angezeigt wird, wenn der Hinweistext schwebt. Der Standardwert ist  true.

app:hintTextAppearance

Legen Sie die Farbe, Größe and Stil ... für den Hinweistext (Hint text).
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Large"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Medium"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Small"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Body1"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Body2"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display1"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display2"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display3"
  • app:hintTextAppearance="@style/TextAppearance.AppCompat.Display4"
  • ...

3- Character Counting

TextInputLayout unterstützt auch die Funktion der Zeichenauszählung. Das ist auch eine der am häufigsten verwendeten Funktionen in verschiedenen Anwendungen.
Ziehen Sie ein  TextInputLayout in die Interface und legen Sie es dort ab. Standardmäßig enthältet es ein  TextInputEditText:
Zunächst: Legen Sie den Wert für einige Attribute von  TextInputLayout ​​​​​​​fest.
  • app:counterEnabled = "true"
  • app:counterMaxLength: Dies ist ein optionales Attribut, um die maximale Anzahl von Zeichen dex Textes anzugeben. Dieser Wert wird für die Berichte verwendet. Der Benutzer kann weiterhin einen Text mit mehr Zeichen eingeben.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ECE9E9"
    tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout21"
        app:counterEnabled="true"
        app:counterMaxLength="10"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username" />

    </com.google.android.material.textfield.TextInputLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
Und hier ist die Ergebnisse, die Sie erhalten
Achtung: Verwenden Sie das Attribut  android:maxLength für  Input Field (EditText,..) wenn Sie die Anzahl der Zeichen vom Text einschränken möchten und es wird guarantiert.

4- Password Visibility Toggle

Ziehen Sie  TextInputLayout in die Interface und legen Sie es dort ab. Standardmäßig hat es bereits  TextInputEditText für eine untergeordnete  View . Danach setzen Sie das Attribut  android:inputType = "textPassword" für  TextInputEditText.
Legen Sie die Werte für die folgenden Attribute fest:
  • app:passwordToggleEnabled
  • app:passwordToggleDrawable
  • app:passwordToggleContentDescription
  • app:passwordToggleTint
  • app:passwordToggleTintMode

app:passwordEnabled

Das Attribut  app:passwordEnabled="true" ist notwendig damit Sie die Funktion zum Ausblenden/Anzeigen vom Kennwort für  TextInputLayout aktivieren. Die oben erwähnten sonstigen Attribute sind nur optional.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ECE9E9"
    tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:passwordToggleEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword" />
    </com.google.android.material.textfield.TextInputLayout>
    
</androidx.constraintlayout.widget.ConstraintLayout>

5- Floating Label Error

Ein weitere Funktion von  TextInputLayout ist die Anzeige einer Label von der Fehleranmeldung für den Benutzer. Allerdings sollten Sie die zusätzlichen Code Java zur Steuerung des Ausblenden/Anzeigen von Laben schreiben um diese Funktion nutzen zu können.
OK, Hier ist ein einfaches Beispiel:
Die Interface vom Beispiel:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ECE9E9"
    tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout_user_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:hintTextAppearance="@style/TextAppearance.AppCompat.Medium"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Username" />
    </com.google.android.material.textfield.TextInputLayout>

    <EditText
        android:id="@+id/editText51"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout_user_name" />

</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package com.example.inputtextlayoutexample;

import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.textfield.TextInputLayout;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.setupFloatingLabelError();
    }

    private void setupFloatingLabelError() {
        final TextInputLayout textInputLayoutUserName = (TextInputLayout) findViewById(R.id.textInputLayout_user_name);

        textInputLayoutUserName.getEditText().addTextChangedListener(new TextWatcher() {
            // ...
            @Override
            public void onTextChanged(CharSequence text, int start, int count, int after) {
                if (text.length() == 0 ) {
                    textInputLayoutUserName.setError("Username is required");
                    textInputLayoutUserName.setErrorEnabled(true);
                } else if (text.length() < 5 ) {
                    textInputLayoutUserName.setError("Username is required and length must be >= 5");
                    textInputLayoutUserName.setErrorEnabled(true);
                } else {
                    textInputLayoutUserName.setErrorEnabled(false);
                }
            }
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count,
                                          int after) {
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }
}

6- TextInputLayout Styles

Das Attribut  style ist ein Auswahl von  TextInputLayout. Es erlaubt Sie, das Stil für  TextInputLayout zu setzen. Es gibt einige verfügbaren Stile in der Bibliothek Android, die Sie bereits benutzen.
  • style="@style/Widget.Design.TextInputLayout"
  • style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
  • style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
  • style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
  • style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
  • ...
style ="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
style ="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"

View more Tutorials: