TextInputLayout的不同标签和提示

Question

我想创建一个EditTextLayout，但是我希望标签和提示文本不同。

例如：标签文本为“电话号码”，提示文本为“[phone]”。

这可行吗？

我的代码是：

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

        <android.support.design.widget.TextInputEditText
            android:id="@+id/phone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="[phone]"
            android:inputType="phone" />
    </android.support.design.widget.TextInputLayout>

- mutokenji

---

android:label="Phone Number" android:hint="[phone]" - Aown Raza

我尝试添加焦点监听器，在EditText获取焦点时更改提示。虽然它能够工作，但我认为这不是最好的解决方案。 - mutokenji

Answer 1

我采用了与Rehan类似的方法。

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

editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            inputLayout.setHint("We did it!");
        } else {
            inputLayout.setHint("Testing 123");
        }
    }
});

动画对我来说已经足够好了，不需要禁用动画：

- starkej2

---

你可以通过以下命令来压缩if语句：inputLayout.setHint(hasFocus ? "We did it!" : "Testing 123");。 - Aliton Oliveira

我喜欢这个答案 <3 - CanonicalBear

Answer 2

这里是我用XML而不需要编写代码的方法，同时允许在Material Design指南中使用标签和占位符。

布局XML：

<android.support.design.widget.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:hint="My Label Text">
  <android.support.design.widget.TextInputEditText
    android:id="@android:id/input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorHint="@drawable/hint_selector"
    android:hint="Placeholder Text"/>
</android.support.design.widget.TextInputLayout>

颜色选择器XML：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_focused="true" android:color="?android:textColorHint" />
  <item android:color="@android:color/transparent" />
</selector>

关键在于默认情况下使其透明，只有当它被聚焦时才显示占位文本。不需要改变颜色，因为这将尊重任何自定义主题以及浅色和深色主题。

- ShortFuse

---

?android:textColorHint 需要最低 API 级别为 21。 - Johnny Five

@JohnnyFive 你可以轻松地将其替换为任何你想要的颜色，或者使用appcompat支持库。 - ShortFuse

这是一个不错的解决方案，但当用户将焦点切换到另一个EditText时，标签文本会消失。如果您正在使用多个EditText填写表单，则会有些“丑陋”。是否有选择器状态可以解决这个“问题”？谢谢。 - Alex

@Alex，请确保在TextInputLayout（标签文本）和TextInputEditText（占位符文本）中都使用了android:hint。也许您没有将其添加到TextInputLayout中。 - ShortFuse

这个答案比其他答案更好，因为使用OnFocusChangeListener的另一个解决方案需要双击EditText才能显示键盘。 - Dhananjay Suresh

Answer 3

您可以使用以下属性：

• android:hint：用于标签

• placeholderText：用于 EditText 内部的占位符文本

      <com.google.android.material.textfield.TextInputLayout
          android:id="@+id/phone_layout"
          android:layout_width="match_parent"
          android:hint="Phone Number"
          app:placeholderText="[phone]"
          android:layout_height="wrap_content">

          <com.google.android.material.textfield.TextInputEditText
              android:id="@+id/phone"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:hint="[phone]"
              android:inputType="phone" />

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

如果在文本字段为空时应该显示占位符，只需添加 expandedHintEnabled="false"：

        <com.google.android.material.textfield.TextInputLayout
            app:expandedHintEnabled="false"

注意: expandedHintEnabled 需要至少版本为1.3.0-alpha03。

- Gabriele Mariotti

---

这个实现使用了最新的1.3.0增强功能，满足了问题的要求。其他解决方案是使用旧的1.2.0库的变通方法，因此现在应该将其标记为正确答案。 - Eurig Jones

Answer 4

您可以简单地通过以下方式实现：

<android.support.design.widget.TextInputLayout
    android:id="@+id/phone_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Phone Number">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="[phone]"
        android:inputType="phone"/>
</android.support.design.widget.TextInputLayout>

但这将导致两个提示重叠，即电话号码和[phone]。因此，您需要为此实现OnFocusChangeListener。（不是很好的解决方案，但它会为您工作）。

在您的布局中，仅向TextInputLayout添加提示。我将hintAnimationEnabled设置为false，因为我认为动画可能不会与不同的提示一起看起来流畅。

<android.support.design.widget.TextInputLayout
    android:id="@+id/phone_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Phone Number"
    app:hintAnimationEnabled="false">

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

在你的Java文件中，创建OnFocusChangeListener：

private View.OnFocusChangeListener onPhoneNumberFocusChangeListener = new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            ((EditText)v).setHint("[phone]");
        } else {
            ((EditText)v).setHint("");
        }
    }
};

并将其设置为您的 EditText

phone.setOnFocusChangeListener(onPhoneNumberFocusChangeListener);

- Rehan

---

我认为我们需要停止在与Android相关的回答中使用“简单地”这个词。 - milosmns

没有使用 TextInputLayout 是可能的吗？ 实际上，我已经通过编程方式设置了提示，并且它运行良好。 但是现在我想以同样的方式设置文本，问题是在设置文本后提示会隐藏。 - Arbaz.in

Answer 5

我尝试使用android:hint="@string/EMAIL"来设置浮动标签。所以在框内的提示中，我使用了app:placeholderText="例如：[e-mail]"。

要始终启用浮动操作按钮，您必须使用requestFocus()。

- Maede Jalali

Answer 6

进入XML文本编辑模式并将以下内容添加到EditText中：

android:label="Phone Number"
android:hint="[phone]"

- Robert