如何在新的Android设计库中使用TextInputLayout

Question

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

这里没有太多的指导可用，可以在这里找到相关信息。

此页面表示：

现在，您可以将它包装在一个TextInputLayout中

但是，由于智能预测（Ctrl+SPACE）不预测任何TextInputLayout的属性，因此我不知道怎么做。所以我的问题是：

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

我们如何从EditText获取数据？

- Kamalanathan

---

问题清晰且有用... - dieter

这个问题很清晰并且非常有用，因为Design Library的实现没有太多指南可用！ - sud007

请查看**这个教程**，它很有帮助。 - Chintan Rathod

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

- siriscac

---

在设计支持库中，因此可用于API 7+。 - S Fitz

好的，我在API 19中尝试过，但在填充视图时出现了异常。也许是我做错了什么。 - moictab

我尝试了你的解决方案并在我的Lolipop设备上运行了它，但是TextInputLayout不起作用。 - Gujarat Santana

@moictab 请确保将 compile 'com.android.support:design:22.2.0' 添加到您的 gradle 依赖中。 - Rachel

为什么TextInputLayout的高度是“wrap_content”？ - IgorGanapolsky

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

- Elye

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

- anand krish

Answer 4

为了使其正常工作，您应该让您的应用程序主题从Theme.AppCompat（或其后代）主题继承，例如继承自Theme.AppCompat.Light.NoActionBar。

- xiaoweiz

Answer 5

正确的方法是...

<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监视器中会看到以下消息：

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

- Brayan Loayza

Answer 6

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

- Cherry admin

Answer 7

使用Material Components Library后，新增了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>

在官方文档中，您可以找到所有信息。

- Gabriele Mariotti

Answer 8

经验之谈：TextInputLayout 应该包裹 TextInputEditText 而不是普通的 EditText。

为什么呢？ 因为 TextInputEditText 是 EditText 的子类，专门设计用于作为 TextInputLayout 的子元素。

此外，使用 EditText 会提示警告：添加的 EditText 不是 TextInputEditText，请改用该类。

- user12092733

Answer 9

我们可以使用AppCompactEditText来满足此需求，需要在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>

- Naveen Kumar M