TextInputLayout 的不同标签和提示

Question

我想制作一个 EditTextLayout，但我想要一个不同的标签和提示文本。

例如：标签文字为"Phone Number"，提示文字为 "+6281342134".

可能吗？

我的代码是：

    <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="+6281342134"
            android:inputType="phone" />
    </android.support.design.widget.TextInputLayout>

Answer 1

进入 xml 文本编辑模式并将其添加到编辑文本中：

android:label="Phone Number"
android:hint="+6281342134"

Answer 2

你可以简单地通过这种方式来完成：

<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="+6281342134"
        android:inputType="phone"/>
</android.support.design.widget.TextInputLayout>

但这会导致两个提示重叠，即 Phone Number 和 +6281342134。所以你需要为此实现 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("+6281342134");
        } else {
            ((EditText)v).setHint("");
        }
    }
};

并将其设置为您的 EditText

phone.setOnFocusChangeListener(onPhoneNumberFocusChangeListener);

Answer 3

我对热汗采取了类似的方法

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

在不禁用动画的情况下，动画对我来说已经足够好了：

Answer 4

这是我在没有代码的情况下（只是 XML）的做法，同时允许标签和占位符，如 Material 设计指南中所述。

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

这里的关键是让它默认透明，只有当它有焦点时才显示占位符文本。也不需要更改颜色，因为这将尊重任何现有的自定义主题，以及浅色和深色主题。

Answer 5

您可以使用这些属性：

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="+6281342134"
          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="+6281342134"
              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.

版本

TextInputLayout 的不同标签和提示

Different label and hint for TextInputLayout

android

android-textinputlayout