如何在新 android 设计库中使用 TextInputLayout

Question

最近 google 介绍了新的 Android 设计库，其中介绍了如何使用 TextInputLayout 字段启用 EditText 的浮动提示功能。

可用的指导不多here。

这个页面说

you can now wrap it in a TextInputLayout

但不知道，因为智能预测 (Ctrl+SPACE) 不会预测 TextInputLayout 的任何属性。所以我的问题是：

我们如何获取此组件下的 EditText？

如何从 EditText 获取数据？

Answer 1

TextInputLayout 扩展 ViewGroup class。因此，这意味着您必须将 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>

Answer 2

这是在 "Floating labels for editing text" 下的 design support library 中定义的。

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

Answer 3

为了让它运作良好，你应该让你的应用程序主题从 Theme.AppCompat（或其后代）主题扩展，就像从 Theme.AppCompat.Light.NoActionBar.

扩展一样

Answer 4

<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);

Answer 5

请将 TextInputLayout 环绕在 TextInputEditText 而不是 EditText 周围。

环绕 EditText 在横向模式下确实有问题。参考 this article了解更多详情。

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

Answer 6

我们也可以使用 AppCompatEditText，为此需要在 gradle

中添加 support:appcompat

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

Answer 7

正确的方法...

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

如果您像 TextInputLayout 的子项一样使用 EditText，您将在 Android 监视器中看到此消息：

I/TextInputLayout: EditText added is not a TextInputEditText. Please switch to using that class instead.

Answer 8

使用 Material Components Library there is a new 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>

在 official doc 中您可以找到所有信息。

Answer 9

经验法则：TextInputLayout 应该包装 TextInputEditText 而不是普通的 EditText。

原因？ TextInputEditText 是 EditText 的子class，设计用作 TextInputLayout 的子项。

此外，使用 EditText 会向我们发出警告：添加的 EditText 不是 TextInputEditText。请改为使用 class。

如何在新 android 设计库中使用 TextInputLayout

How to use TextInputLayout in new android design library

android

android-design-library