Статьи

Библиотека поддержки дизайна Android: TextInputLayout — плавающая метка

Март 2, 2019

Библиотека поддержки дизайна Android представила несколько важных новых виджетов, которые помогают разработчику создавать согласованный пользовательский интерфейс, следуя рекомендациям по дизайну материалов.

Одним из новых компонентов, поставляемых библиотекой поддержки дизайна Android, является TextInputLayout, который используется для анимации меток EditText . Чтобы выполнить эту работу, TextInputLayout использует атрибут EditText, называемый hint Чтобы показать, как использовать TextInputLayout и EditText , мы создадим приложение для Android, подобное показанному ниже:

android_textinputlayout_tutorial

Используя TextInputLayout и оборачивая EditText внутри TextInputLayout, можно контролировать эту подсказку, чтобы она исчезала, как только пользователь начинает писать текст, и «перемещается» в положение метки:

android_textinputlayout android_textinputlayout_tutorial1

Еще одной важной особенностью является обработка ошибок. С TextInputLayout можно показывать сообщения об ошибках рядом с EditText.

Как использовать TextInputLayout и EditText

Как сказано выше, TextInputLayout оборачивает EditText, чтобы он управлял поведением EditText . Предположим, у нас есть три разных EditText и три TextInputLayout. Сосредоточив внимание на первом из этого EditText, этот должен быть обернут TextInputLayout, чтобы мы могли иметь плавающую метку.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main" tools:context=".MainActivity">
 
    <android.support.design.widget.TextInputLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" android:id="@+id/til1">
 
     <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/edtName"
        android:ems="10"
        android:hint="@string/hintName"/>
    </android.support.design.widget.TextInputLayout>
 
    <android.support.design.widget.TextInputLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/til2"
        android:layout_below="@id/til1"
        android:layout_marginTop="20dp">
 
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/edtSurname"
            android:ems="10"
            android:hint="@string/hintSurname"/>
    </android.support.design.widget.TextInputLayout>
 
    <android.support.design.widget.TextInputLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/til3"
        android:layout_below="@id/til2"
        android:layout_marginTop="20dp">
 
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/edtPhone"
            android:ems="10"
            android:hint="@string/hintPhone"
            android:inputType="phone"/>
    </android.support.design.widget.TextInputLayout>
 
 
    <Button
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:id="@+id/btn"
            android:text="@string/btnConfirm"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:elevation="2dp"
            />
 
</RelativeLayout>

android:hint — это плавающая метка, которой управляет TextInputLayout. С этим макетом и простым действием можно получить приложение, показанное выше.

Проверка формы Android

Еще одно интересное использование TextInputLayout — проверка формы . Как сказано выше, этот компонент обрабатывает сообщения об ошибках, так что они появляются рядом с EditText .

Эта функция очень полезна, когда приложение должно проверить некоторые данные, введенные пользователем. Чтобы показать, как использовать TextInputLayout для обработки ошибки EditText, можно предположить, что у нас есть простая форма с кнопкой отправки, как показано на рисунке ниже.

Когда пользователь нажимает кнопку, приложение проверяет результат, и если что-то идет не так, приложение показывает сообщение об ошибке рядом с EditText, вызвавшим его.

android_inputtextlayout_error

Для обработки ошибок TextInputLayout предоставляет два метода: setError который принимает строку, содержащую сообщение, и setErrorEnabled который принимает логическое значение для включения или отключения функции ошибки. Первый метод используется для отображения сообщения erorr, второй — для удаления сообщения.

Деятельность, которая обрабатывает пользовательский интерфейс, содержит метод проверки, подобный показанному ниже:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
edtName = (EditText) findViewById(R.id.edtName);
     edtSurname = (EditText) findViewById(R.id.edtSurname);
     edtPhone = (EditText) findViewById(R.id.edtPhone);
     nameLayout = (TextInputLayout) findViewById(R.id.til1);
     surnameLayout = (TextInputLayout) findViewById(R.id.til2);
     phoneLayout = (TextInputLayout) findViewById(R.id.til3);
 
     Button btn = (Button) findViewById(R.id.btn);
     btn.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
             if ( validateData() ) {
                   //
             }
          }
     });

В методе проверки:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
private boolean validateData() {
        boolean result = true;
 
        String name = edtName.getText().toString();
        if (name == null || name.length() < 3) {
            // We set the error message
            nameLayout.setError(getString(R.string.invalidName));
            result = false;
        }
        else
            // We remove error messages
           nameLayout.setErrorEnabled(false);
 
        String surname = edtSurname.getText().toString();
        if (surname == null || surname.length() < 3) {
            // We set the error message
            surnameLayout.setError(getString(R.string.invalidSurname));
            result = false;
        }
        else
            // We remove error messages
            surnameLayout.setErrorEnabled(false);
 
 
        String phone = edtPhone.getText().toString();
        if (phone == null || phone.equals("")) {
            phoneLayout.setError(getString(R.string.invalidNumber));
            result = false;
        }
        else if (phone.equals("0")) {
            phoneLayout.setError(getString(R.string.invalidNumberZero));
            result = false;
        }
 
        return result;
    }

В этом посте вы узнали, как создать пользовательский интерфейс материала с помощью TextInputLayout для анимации EditText и как обрабатывать ошибки, используя комбинацию TextInputLayout и EditText.

Ссылка: Библиотека поддержки дизайна Android: TextInputLayout — плавающая метка от нашего партнера JCG Франческо Аццолы в блоге Surviving с Android .
40
Share: