betacode

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

  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"

Pуководства Android

Show More

Pуководства Android

Show More

Новейшие статьи

    Show More