betacode

Руководство Android TextInputLayout

View more Tutorials:

  1. Android TextInputLayout
  2. Floating Hint
  3. Character Counting
  4. Password Visibility Toggle
  5. Floating Label Error
  6. TextInputLayout Styles

1- Android TextInputLayout

TextInputLayout это компонент интерфейса содержащий поле ввода текста (Text Input Field) и поддерживает поле ввода текста визуально. Если EditText используется сейчас, удостоверьтесь что его android:background это @null, чтобы TextInputLayout может настроить подходящий для него фон.
Текст подсказки(hint text) автоматически появляется, когда пользователь focus в EditText.
 
Поле пароля (Password field) с ImageView на правой стороне позволяет отобразить пароль.
 
TextInputLayout это подкласс LinearLayout, поэтому он может расставлять дочерние View на одном ряду или в одном столбце. Один из его дочерних View это поле ввода текста (Text input field), например EditText, другие дочерние View играют роль визуальной поддержки.
Примечание: Вы так же можете расположить TextInputLayout сплетенно, чтобы получить более сложный компонент интерфейса.

Library:

TextInputLayout не имеется наготове в стандартной библиотеке Android, поэтому чтобы использовать его, вам нужно установить его в ваш project из Palette окна дизайна или объявить данную библиотеку вручную.
После установки данной библиотеки из Palette вы увидите как она объявлена в файле build.gradle (Module: app): 
implementation 'com.google.android.material:material:1.0.0'

2- Floating Hint

Текст подсказки (hint text) автоматически появляется когда пользователь focus в EditText это базовая функция поддержки у TextInputLayout, вы можете использовать его без написания дополнительных строк Java кодов.
Перетащите TextInputLayout в интерфейс, по умолчанию он будет содержать дочерний View это TextInputEditText, это класс-потомок у 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>
И это полученный результат:
Атрибуты связанные с функцией "Floating Hint" включают:
  • app:hintEnabled   (Default true)
  • app:hintAnimationEnabled   (Default true)
  • app:hintTextAppearance

app:hintEnabled

Атрибут app:hintEnabled используется чтобы enable/disable (включать/выключать) функцию "Floating Hint" у TextInputLayout. Ее значение по умолчанию это true.

app:hintAnimationEnabled

Атрибут app:hintAnimationEnabled определяет появляется ли анимационный эффект при появлении текста подсказки (Hint text) или нет. Значение по умолчанию true.

app:hintTextAppearance

Настроить цвет, размер, стиль ... для текста подсказки (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 так же поддерживает функцию подсчета символов, это одна из часто используемых функций в приложениях.
Перетащите TextInputLayout в интерфейс, по умолчанию он содержит TextInputEditText:
Далее: Настройте значение для нескольких атрибутов TextInputLayout.
  • app:counterEnabled = "true"
  • app:counterMaxLength: Это необязательный атрибут для определения максимального количества символов в тексте, данное значение используется для отчетов. Пользователь так же может ввести текст с большим количеством символов.
<?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>
И результат, который вы получите:
Примечание: Используйте атрибут android:maxLength для Input Field (EditText,..) если вы хотите ограничить количество символов текста, который будет гарантированным.

4- Password Visibility Toggle

Перетащите TextInputLayout в интерфейс, по умолчанию он имеет готовый TextInputEditText это дочерний View. Потом, настройте атрибут android:inputType = "textPassword" для TextInputEditText.
Настройте значения для следующих атрибутов:
  • app:passwordToggleEnabled
  • app:passwordToggleDrawable
  • app:passwordToggleContentDescription
  • app:passwordToggleTint
  • app:passwordToggleTintMode

app:passwordEnabled

Атрибут app:passwordEnabled="true" необходим, чтобы вы могли включить функцию скрыть/отобразить пароль для TextInputLayout, другие атрибуты упомянутые выше являются только опциями. 

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

Одна из других функций TextInputLayout это отображение Label оповещающий ошибки пользователю. Но чтобы использовать данную функцию, вам нужно написать дополнтельный Java код для управления скрытием/отображением Label.
OK, ниже является простой пример:
Интерфейс примера:
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

Атрибут style это опция TextInputLayout, он позволяет вам настроить стиль для TextInputLayout. Имеются некоторые готовые стили в библиотеке Android, которые готовые для вашего использования.
  • 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:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.