Как использовать TextInputLayout в новой библиотеке дизайна для Android

Недавно google представила новую библиотеку Android Design, в которой используется поле TextInputLayout, чтобы включить функцию плавающей подсказки EditText.

Не доступно небольшое руководство здесь.

На этой странице

теперь вы можете обернуть его в TextInputLayout

Но не знаю, потому что интеллектуальное предсказание (Ctrl + SPACE) не предсказывает никаких атрибутов TextInputLayout. Поэтому мои вопросы:

Как мы можем получить EditText, лежащий в основе этого компонента?

Как мы можем получить данные из EditText?

Ответы

Ответ 1

TextInputLayout расширяет класс ViewGroup. Таким образом, это означает, что вы должны обернуть EditText в TextInputLayout.

<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="hint"
        android:id="@+id/editText1" />

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

Ответ 2

Оберните TextInputLayout вокруг TextInputEditText вместо EditText.

Обтекание EditText действительно имеет проблему в ландшафтном режиме. Ссылаться на эту статью для более подробной информации.

<android.support.design.widget.TextInputLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content">

     <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint"
        android:id="@+id/editText1" />

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

Ответ 3

Это определено в библиотеке поддержки дизайна в разделе "Плавающие метки для редактирования текста".

     <android.support.design.widget.TextInputLayout
            android:id="@+id/name_et_textinputlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/activity_vertical_margin">

            <EditText
                android:id="@+id/FeedBackerNameET"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:hint="hinttext"
                android:inputType="textPersonName|textCapWords" />
     </android.support.design.widget.TextInputLayout>

Ответ 4

Чтобы сделать это хорошо, вы должны указать, что тема приложения продолжается от темы Theme.AppCompat (или ее потомка), например, продолжается от Theme.AppCompat.Light.NoActionBar.

Ответ 5

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_message"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/et_message"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/type_message"
        android:maxLines="5"/>

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

Подсказка

будет автоматически сдвигаться, как только вы начнете вводить текст редактирования, и получите те ошибки, которые появляются ниже, при редактировании текстового набора ошибок на макете ввода текста, как это не при редактировании текста

tilMessage.setError("Message field is empty!");

для отключения ошибки

tilMessage.setErrorEnabled(false);

Ответ 6

Правильный способ...

<android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/card_id_edit_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/form_card_id_text"
                android:inputType="number"
                android:maxLength="10"/>
        </android.support.design.widget.TextInputLayout>

Если вы используете EditText как дочерний элемент TextInputLayout, вы увидите это сообщение в Android Monitor:

I/TextInputLayout: Добавленный EditText не является TextInputEditText. Вместо этого переключитесь на использование этого класса.

Ответ 7

В библиотеке компонентов материала появился новый TextInputLayout компонент.

Просто используйте:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/hint_text">

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

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

В официальном документе вы можете найти всю информацию.

Ответ 8

Мы можем использовать AppCompactEditText и для этого необходимо добавить поддержку: appcompat в gradle

 <android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp">

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint"
        android:maxLength="100"
        android:inputType="textNoSuggestions"
        android:textColor="@color/colorPrimary"
        android:textSize="@dimen/font_size_large" />

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

Ответ 9

Полезное правило. TextInputLayout следует обернуть TextInputEditText вместо обычного EditText.

Причина? TextInputEditText является подклассом EditText и предназначен для использования в качестве дочернего элемента TextInputLayout.

Кроме того, использование EditText вместо этого выдает нам предупреждение: добавленный EditText не является TextInputEditText. Пожалуйста, переключитесь на использование этого класса.